< Return to Blog

ECMAScript6 Compatible Yeoman Foundation SASS Generator with Browserify & BrowserSync Live Reloading & CSS DOM Injection

At the time of writing, I had stumbled onto the foundation-gulp-browserify Yeoman generator and within a couple hours I had a really slick static page live & hosted on AWS S3.

However, I noticed this generator, like most of the Yeoman generators, has gotten old and doesn't seem to be actively maintained any more.

It has 19 Github stars and the last commit was on 1st December 2015. Interestingly, the last commit reads

reverted to foundation 5.5.2. Foundation scss folder structure has changed and will require more reworking than I initially thought

Having used Gulp before, I really liked how it got the job done; dependencies were fixed with a simple npm install, but what really sold me were two things.

BrowserSync

If you've tried to get pixel-perfection in responsive designs without BrowserSync you will understand the level of frustration one could run into. Multiple form-factors, breakpoints, and you're just one rotation away from something looking a bit off.

I was able to edit content and not only have CSS injected into the DOM but also have changes update live on both my Mac and iPhone — simultaneously.

Foundation 6.1.1 & Babel.js

I really liked what I saw, and I wanted to upgrade the generator so I could use this in future projects — as my go to frontend generator, for well static builds. It is 2016, and about time I had such a thing!

Since last night, I have submitted a PR to the main generator repo for these additions having bumped the generator's version to 0.2.0. However, I like the thought of maintaining this as a fork, as it doesn't seem like the repo maintainer is active at all.

Gulp, Foundation, Sass, Babel, Browserify, BrowserSync Live Reloading

Say hello to generator-gulp-foundation-sass-babel-browserify which is now live for your downloading pleasure!