generator-sizzle

Yeoman generator for creating single page webapps using Compass with Bourbon and Normalize, r.js optimiser and almond, jQuery, FastClick, jsSignals and the Greensock tweening engine.

Usage no npm install needed!

<script type="module">
  import generatorSizzle from 'https://cdn.skypack.dev/generator-sizzle';
</script>

README

generator-sizzle Build Status npm version

Sizzle generator for quickly bootstrapping web apps using AMD modules and SMACSS like styling usinc Compass and Bourbon.

Using this generator will give you a quickly bootstrapped web app. I wrote this generator to make my life easier, as I have been using this particular set up for quite some time now and I am loving it! It might not be for you, but who knows - I hope it helps others too :)

Features

  • Scaffolding projects with Yeoman
  • Run automated tasks with Grunt
  • Handle dependencies with Bower
  • Browser LiveReload
  • Compass stylesheets compilation and sprite generation (plus more)
  • HTML, JavaScript and CSS obfuscation and minification
  • Event driven JavaScript with JSSignals
  • No touch event latency thanks to FastClick
  • Double rainbow animations with the Greensock tweening engine
  • A nice SASS based grid framework thanks to Bourbon Neat
  • Quick deployment via SSH
  • Cache busting of image files including your JavaScript and JSON files
  • 1 CSS file in the and 1 JavaScript file before the , no unnecessary HTTP requests
  • Keep your JavaScript code modular with AMD modules via RequireJS
  • Use brill JavaScript utilities thanks to Underscore.js

Caveats

  • Right now there is no unit testing in place (might add later)
  • Because Yeoman doesn't like RequireJS, there is no way of making asyncronous calls to multiple AMD modules. Your code is generated by Almond into one single module
  • You need to install the Compass Ruby gem (detailed below)

Bower components

  • jQuery
  • Underscore.js
  • Greensock
  • FastClick
  • Almond (a working substitute of requirejs with Yeoman)
  • JS Signals
  • Bourbon + Bourbon Neat
  • Normalize.scss

NPM modules (other than the usual stuff)

  • Compass
  • RequireJS (r.js optimiser)

Installing Compass

  1. Make sure you have Ruby installed. Perhaps a better way of installing ruby is via rbenv

  2. Install Bundler if you haven't already

  3. In your project root run:

    $ bundle install

Usage

Install generator-sizzle:

npm install -g generator-sizzle

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo sizzle, optionally passing an app name:

yo sizzle [app-name]

Run grunt for building and grunt serve for preview

Changelog

All changes are logged in the CHANGELOG.md file.

To do

  • Add soft build Grunt task
  • Add optional jsHint and Mocha support

License

BSD license