kobeaerts / workbench

A basic frontend boilerplate with some opinionated magic

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.