Scaffold out a modern front-end web app using your CSS pre-processor of choice, Gulp, Bower, Autoprefixer and Browserify.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
docs
test
.editorconfig
.gitattributes
.gitignore
.jshintrc
.travis.yml
README.md
package.json
screenshot.png

README.md

NOT MAINTAINING THIS PROJECT: Use webpack instead.

generator-modern-frontend Build Status

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

Features

  • 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.

Options

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

License

BSD license