A basic frontend boilerplate with some opinionated gulp magic
Demo: http://kobeaerts.github.io/workbench/
Just copy the assets and dist folders and the gulpfile.js and package.json files to your project run npm install
and you're done.
Compile your sass with the gulp watch
command.
Run gulp compile-js
to minify the javascript and gulp optimize-images
to compress your images
- Sanitize.css as a css reset
- Responsive typography with rem units
- Some colors en margin mixins
- Basic styles for buttons, forms, lists, paragraphs and tags
- Element Queries for responsive elements
- Flickity for image carousels
- Packery for image grids
- A select replacement with Tether.js
- A simple page loading animation
- Compile your sass to a minified css file with sourcemaps
- Extends your css with Rucksack superpowers
- Autoprefix it (it's 2015 cmon..)
- Base64 small images inline in your css (max 8kb)
- Optimize other images
- Concat and minify javascript files
- Livereload on filechanges
A system to mix titles, text, images, quotes, grids and carousels. Check the demo on how it works.