Hotplate

Requirements: gulp and browser-sync installed globally

npm install --global gulp-cli
npm install --global browser-sync

Install Browser-sync globally so it doesn't have to be installed everytime. It takes up a lot of space and a lot of time to install if included individually with every package.json. Just install it once!

Clone the repo. NPM install. Gulp.

git clone https://github.com/geoffyuen/hotplate-edge mysite
cd mysite

Edit the localserver variable in gulpfile.js

npm install
gulp

Use a .wrapper class to start using the grid system. Use .col-* classes to create your layouts. If the columns go over 12 "units" it'll wrap downwards and to the left*.

col-12

col-6

col-6

col-4

col-4

col-4

col-3

col-3

col-3

col-3

Responsive classes

0px	480px	624px	768px	960px	1300px
col-xxs-#	col-xs-#	col-sm-#	col-md-#	col-lg-#	col-xl-#

Where # is your column unit from 1–12. .col-# are aliases of col-md-#.

Use media queries

@include media(md) {
  your sass here
}

...or if you want to target everything smaller than md:

@include undermedia(md) {
  your sass here
}

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam alias consequuntur ipsam eos enim at ipsum recusandae, blanditiis quis pariatur cum! Quisquam reprehenderit vel repellat ipsa sunt earum in nostrum.

Nestable

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel, hic sit amet velit commodi accusamus possimus aliquid vero, veritatis, nihil ab? Voluptatem accusamus ad, repellendus voluptates sed expedita asperiores aspernatur!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus autem porro illo praesentium! Ratione perspiciatis deserunt iure. Blanditiis velit voluptate cumque nam accusantium, et, quidem modi, saepe quaerat nemo dolor!

Mixins

Responsive Font Size Generator

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor alias facilis inventore ducimus cupiditate, saepe omnis quibusdam atque molestiae mollitia fugit harum esse necessitatibus. Minus repellendus accusamus consequatur quibusdam quo.

Z-index Management

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore dignissimos sapiente magni cum, aut deserunt magnam exercitationem ex ipsum explicabo reprehenderit maxime. Ut aspernatur amet dolorem placeat explicabo rem! Quas.

Utility Classes

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta illo ipsa saepe alias ab temporibus culpa velit. Impedit amet laborum velit natus repudiandae! Saepe laudantium illo voluptatibus labore porro dolores!

Place your individual svg icons in ./src/sprites. A Gulp task will combine all the svgs in this folder into ./img/spritesheet.svg. The script, ./src/js/ajaxspritesheet will inject this into the top of your page but hidden. Check the javascript console and you can see the html you need to use throughout your site. The width and height attributes are set the the size that the svg was create but your can change these and the sprite will scale to fit inside those dimensions.

If your individual svg is filled with #000000 (black) you can use apply a css class to the svg html to change the fill colour.