SASS Workbench, A Style Generator

Yeoman generator

Getting Started

Meet the Generator

Basically, we want to scaffold out a flexible system that is based off the culmination of many people's efforts and use it as a tool for style consistency. The following ideas are employed:

• SASS: The transpiler flavor of choice for composing stylesheets
• Compass: SASS with a utility belt, used for all sorts of enhanced SASS features including browser support techniques
• North: We're using the ideas behind North's style structure for proper organization and code predictability
• Susy: For a better grid framework, we prefer to be free from a cookie cutter grid and craft content around custom grids
• Breakpoint: Media query help across device dimensions
• Modular Scaling: Proper scaling for maximum flexibility across devices

Requirements

You will need, at the very minimum, the following installed:

• Node and NPM (Comes with Node)
• Ruby
• Bundler

Basic Usage

To install generator-sass-bench from npm, run:

npm install -g generator-sass-bench

Initiate the generator:

yo sass-bench

A run down of the options it will ask you:

Project Name

Enter the name of the project

Author

Enter the name of the author and their email

SASS Folder

Usually 'sass', but you can opt to install somewhere else

Bower Folder

Usually 'bower_components', but you can opt to install somewhere else

Base Folder

Whether to generate an entire base element SASS file set for setting base element (p, h1, ul, etc) styles

Components Folder

Whether to generate a components folder or not. The subgenerator will create one if you don't but this wires it up automatically.

Layouts Folder

Whether to generate a layouts folder or not. The subgenerator will create one if you don't but this wires it up automatically.

Pages Folder

Whether to generate a pages folder or not. Used primarily for contextual page-level presentation.

Overrides Folder

Whether to generate an overrides folder or not. Used primarily used to override external stylesheets.

Features

All Features are optional

• Compass: Whether to install a local copy of Compass, and thus SASS, or not. Also installs the SASS Toolkit gem. Requires Ruby.
• Breakpoint: Breakpoint media query library for SASS, installed via Bower
• Bootstrap: Twitter Bootstrap library for SASS, installed via Bower
• Susy Grids: Susy grid framework library for SASS, installed via Bower
• Modular Scale: Modular scaling library for SASS, installed via Bower

Grunt File

Whether to generate a grunt file and a package.json file (if not already available). This will setup a (very) basic server and watch your SASS stuff. This is not meant to be comprehensive, but rather a starting point.

Create New Components / Layouts

Both construction subgenerators will install new files for your use. Remember to add the import statements to the _all.scss file in the targeted component or layout folder.

To add a new component to your sass structure:

yo sass-bench:component

To add a new layout to your sass structure:

yo sass-bench:layout

Create A New Icon Component

The icon subgenerator will install a new component file for icons. This is an opinionated style that uses font icons in (up to) four weights to create complex, scalable and customizable icons. The way it works is that you take one font family with different weights and match each part of an icon (up to 4 pieces) to the same character in the respective weights. So for a Facebook icon in a "social-font-icons" font family, weight 100 of the charater 'a' may be the background block, and weight 200 of the charater 'a' may be the 'F' shape on top. These can then be colored differently and still be aligned correctly with the power of :first-line, :first-letter, and :after pseudo selectors (which should be supported by IE9+, Webkit, and Mozilla) This process was adapted from the article found here at PixelAmbacht. Please review the component if you are unsure how this works, or email me.

Remember to add the import statements to the _all.scss file in the component folder, and add your actual font family definitions / font files to your project. I recommend creating 32x32 SVG files for each icon, split into folders named "100", "200", "300", and "400", and then using IcoMoon as a tool to help you generate your fonts. You will also need to wire all characters up to the named icons you desire in _icon.scss.

To add a new icon component to your sass structure:

yo sass-bench:icons

Create A Grunt file

You can add a Grunt file to your workflow later, if you wish. To add a Grunt file to your SASS structure:

yo sass-bench:grunt

This basically sets up the below node modules, a Grunt file, and a package.json (if not available) that, when run, has two modes described below.

• grunt: Grunt JS,
• grunt-contrib-connect: Connect flavor node server,
• grunt-contrib-sass: Grunt SASS compilation tasking,
• grunt-contrib-watch: Watch / live reload for Connect server

Default / Compile (Default Task)

Compiles sass, watches for changes. Server is up to you.

grunt default

Run a Server

Default setup but runs a connect server for you.

grunt serve

One thing to note is that if you install Grunt upfront with the SASS bench generator, it includes the required livereload tag in the header. If you install later and find it's not refreshing, simply add the following to your html page(s):

<script src="//localhost:35729/livereload.js"></script>

License

MIT