README
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:
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