Scaffold out a modern front-end web app using your CSS pre-processor of choice, Gulp, Bower, Autoprefixer and Browserify.
JavaScript HTML CSS
Latest commit 14af00a Jan 10, 2017 @endel committed on GitHub Update


generator-modern-frontend Build Status

Yeoman generator that scaffolds out a modern front-end web app using gulp. Inspired by generator-gulp-webapp.


  • Browserify + ES6 (babelify)
  • Pick your favorite CSS pre-processor (Sass, Stylus or Less)
  • CSS Autoprefixing
  • Sourcemaps for CSS and JavaScript
  • Built-in preview server with BrowserSync
  • Image optimization
  • Wire-up dependencies installed with Bower

You may opt-out from using bower, sprite generation and image optimization if you don't need them.

Sprite sheet

For sprite generation, you'll need to create a directory for each sprite category on app/images/sprites/. It will generate its respective stylesheet and sprite sheet files as the following:

  • app/images/sprites/general/*.png generates:
    • css/sprites/general.styl
    • images/sprites_general.png
  • app/images/sprites/heavy_stuff/*.png generates:
    • css/sprites/heavy_stuff.styl
    • images/sprites_heavy_stuff.png

Please see our gulpfile.js for up to date information on what we support.

For more information on what this generator can do for you, take a look at the gulp plugins used in our package.json.

Getting Started

  • Install dependencies: npm install --global yo bower
  • Install the generator: npm install --global generator-modern-frontend
  • Run yo modern-frontend to scaffold your webapp
  • Run npm start to preview and watch for changes
  • Run bower install --save <package> to install frontend dependencies
  • Run gulp to build for production

Bower components

This generator includes the following Bower components by default:

  • Modernizr
  • normalize.css

Read the details about our Bower setup.


  • --skip-install Skips the automatic execution of bower and npm after scaffolding has finished.


BSD license