workbench
A basic frontend boilerplate with some opinionated gulp magic
Demo: http://kobeaerts.github.io/workbench/
getting started
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-jsto minify the javascript and gulp optimize-images to compress your images
whats in the css
- 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
whats in the javascript
- Element Queries for responsive elements
- Flickity for image carousels
- Packery for image grids
- A select replacement with Tether.js
- A simple page loading animation
what does the magic gulpfile do
- 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
bonus: a modular paragraph system
A system to mix titles, text, images, quotes, grids and carousels. Check the demo on how it works.