V2 release prep

.editorconfig

@@ -5,4 +5,4 @@ root = true
 [*]
 end_of_line = LF
 indent_style = space
-indent_size = 2
+indent_size = 4

CHANGELOG.md

@@ -0,0 +1,31 @@
+## Changelog
+
+This project attempts to follow the [Semantic Versioning Specification](http://semver.org/).
+
+- **1.2.0**
+    - Add more common colour scheme variables
+    - Rename style.css to main.css to match HTML5 Boilerplate
+- 1.1.1 - Fix load path error in ie.scss
+- --1.1.0--
+    - Standardise variable names
+    - Added Gemfile, .editorconfig and watch.sh (sass --watch script)
+- 1.0.0 Yay!
+    - Support for Media Queries with IE fallback, based on [http://jakearchibald.github.com/sass-ie/]()
+    - Functions and mixins moved into dedicated directories
+    - Modules moved into a dedicated directory
+- 0.9.3 Don't wrap layout styles in @media screen { } call. Causes issues with inline media queries.
+- 0.9.2 relative-size function now uses $base-fs as a default value for $context so it can be used with a single argument
+- 0.9.1 Reset styles in sync with HTML5 Boilerplate 3. Including removal of hot pink.
+- 0.9.0 Added base font-size and line-height variables to help when defining a baseline rhythm
+- 0.8.1 Minor bugfix, borked comment stopping styles from compiling
+- --0.8.0 Colour style merged into main styles.--
+- 0.7.0 Made Compass optional
+- 0.6.1 Moved `@media screen` declaration into main style.scss
+- 0.6.0 Added default form styles from HTML5 Boilerplate
+- 0.5.1 Demo moved to a separate Github repo
+- 0.5.0 Full expansion of SMACSS concept plus quality check of all current styles
+- 0.4.5 SMACSS inspired file structure added to the README
+- 0.4.0 Big changes to the directory structure, SMACSS terminology; see "Thanks & Resources"
+- 0.3.0 First fully working toolkit
+- 0.2.0 Basic file and directory structure
+- 0.1.0 Initial commit

README.md

@@ -1,4 +1,4 @@
-# SCSS Toolkit
+# SCSS Toolkit 2.0.0
 
 A starter toolkit based on SMACSS for Sass (SCSS) projects, with optional support for Compass.
 
@@ -9,52 +9,24 @@ SCSS Toolkit uses a combination of recommendations from:
 
 Styles are broken down into the following groups: **Base, Layout, Module, State**
 
+## Requirements
+
+* Ruby, along with the `bundler` gem.
+* NPM (`brew install node`)
+* Grunt CLI (`npm install -g grunt-cli`)
+
 ## Quick Start
 
-Clone the git repo - `git clone git://github.com/davidrapson/scss-toolkit.git` or [download it](https://github.com/davidrapson/scss-toolkit/zipball/master)
+* Clone the git repo - `git clone git://github.com/davidrapson/scss-toolkit.git` or [download it](https://github.com/davidrapson/scss-toolkit/zipball/master)
+* Run `bundle install` at the root of the project
+* Run `npm install` at the root of the project
+* You should be all set.
 
-## Requirements
+## Build tasks
 
-As this project uses Sass it assumes you already have Ruby and [Sass](http://sass-lang.com/) setup.
-This project requires Sass **3.2 alpha**, you should be able to run `bundle install` in terminal to get everthing setup.
-
-To watch the files for changes, either run `sass --watch style/scss:style` or use the `watch.sh` script.
-
-### Compass
-
-I use [Compass](http://compass-style.org/) for all my projects so I've included a Compass `config.rb` file, but it's completely optional. **SCSS Toolkit does not rely on Compass**.
-
-## Changelog
-
-This project attempts to follow the [Semantic Versioning Specification](http://semver.org/).
-
-- **1.2.0**
-    - Add more common colour scheme variables
-    - Rename style.css to main.css to match HTML5 Boilerplate
-- 1.1.1 - Fix load path error in ie.scss
-- --1.1.0--
-    - Standardise variable names
-    - Added Gemfile, .editorconfig and watch.sh (sass --watch script)
-- 1.0.0 Yay!
-    - Support for Media Queries with IE fallback, based on [http://jakearchibald.github.com/sass-ie/]()
-    - Functions and mixins moved into dedicated directories
-    - Modules moved into a dedicated directory
-- 0.9.3 Don't wrap layout styles in @media screen { } call. Causes issues with inline media queries.
-- 0.9.2 relative-size function now uses $base-fs as a default value for $context so it can be used with a single argument
-- 0.9.1 Reset styles in sync with HTML5 Boilerplate 3. Including removal of hot pink.
-- 0.9.0 Added base font-size and line-height variables to help when defining a baseline rhythm
-- 0.8.1 Minor bugfix, borked comment stopping styles from compiling
-- --0.8.0 Colour style merged into main styles.--
-- 0.7.0 Made Compass optional
-- 0.6.1 Moved `@media screen` declaration into main style.scss
-- 0.6.0 Added default form styles from HTML5 Boilerplate
-- 0.5.1 Demo moved to a separate Github repo
-- 0.5.0 Full expansion of SMACSS concept plus quality check of all current styles
-- 0.4.5 SMACSS inspired file structure added to the README
-- 0.4.0 Big changes to the directory structure, SMACSS terminology; see "Thanks & Resources"
-- 0.3.0 First fully working toolkit
-- 0.2.0 Basic file and directory structure
-- 0.1.0 Initial commit
+* Run `grunt watch` to watch all `.scss` files in `css/scss` for changes.
+* Run `grunt build` to compile the `.scss` files on demand
+* Run `grunt build:production` to compile and minify the `.scss` files on demand into `css/build`.
 
 ## License
 

css/ie.css

@@ -375,7 +375,7 @@ table {
 /*  ========================================================================== */
 body {
   color: #444444;
-  background-color: #f4f4ff;
+  background-color: white;
 }
 
 /*  ========================================================================== */
@@ -391,22 +391,22 @@ button,
 input,
 select,
 textarea {
-  font-family: "PT Serif", Georgia, serif;
+  font-family: sans-serif;
 }
 
 /* Display font stack */
 h1, h2, h3, h4, h5, h6 {
-  font-family: "PT Sans Narrow", sans-serif;
+  font-family: "Helvetica Neue", sans-serif;
 }
 
 /* Alternate font stack */
 blockquote, figcaption {
-  font-family: "PT Serif", Georgia, serif;
+  font-family: Georgia, serif;
 }
 
 /* Caption font stack, should be suitable for smaller sizes */
 [role=contentinfo], .caption {
-  font-family: "PT Sans Caption", Verdana, sans-serif;
+  font-family: Verdana, sans-serif;
 }
 
 /* Monospace font stack, for code samples and preformatted content */
@@ -466,6 +466,7 @@ h5 {
 a {
   text-decoration: none;
   word-wrap: break-word;
+  font-weight: bold;
 }
 
 a:focus {
@@ -477,14 +478,15 @@ a:hover, a:active {
 }
 
 a {
-  color: white;
+  color: black;
 }
 
 a:visited {
-  color: white;
+  color: black;
 }
 
 a:hover {
+  cursor: pointer;
   color: #dddddd;
 }
 
@@ -677,7 +679,7 @@ textarea {
 /*  ========================================================================== */
 .l-constrained {
   width: 95%;
-  max-width: 60em;
+  max-width: 720px;
   margin: 0 auto;
 }
 @media only screen and (min-width: 35em) {
@@ -689,33 +691,48 @@ textarea {
 /*  ========================================================================== */
 /*  @group Header */
 /*  ========================================================================== */
-/*  ========================================================================== */
-/*  @group Main */
-/*  ========================================================================== */
-[role="main"] {
-  margin-bottom: 1em;
-  width: 72.5%;
-  margin-left: 2.5%;
-  float: right;
+[role="banner"] {
+  background-color: #e6e6e6;
+  border-bottom: 1px solid #d9d9d9;
+  padding: 1em 0 1em;
+  margin-bottom: 1.5em;
 }
 
-[role="complementary"] {
-  margin-right: 2.5;
-  width: 22.5%;
-  float: left;
+.branding-logo {
+  margin: 0;
+  font-size: 24px;
+  font-size: 1.5rem;
 }
 
+/*  ========================================================================== */
+/*  @group Main */
+/*  ========================================================================== */
 /*  ========================================================================== */
 /*  @group Footer */
 /*  ========================================================================== */
+[role="contentinfo"] {
+  clear: both;
+  font-size: 13px;
+  font-size: 0.8125rem;
+  margin-top: 1.5em;
+  margin-bottom: 1em;
+  padding-top: .5em;
+  border-top: 1px solid #d9d9d9;
+}
+
 /*  ========================================================================== */
 /*  @group Modules */
 /*  ========================================================================== */
 /*  ========================================================================== */
 /*  @group Text */
 /*  ========================================================================== */
+.lead {
+  font-size: 120%;
+  line-height: 1.3;
+}
+
 .initialism {
-  font-size: 90%;
+  font-size: 85%;
   text-transform: uppercase;
 }
 
@@ -738,7 +755,7 @@ textarea {
 /*  @group Opt-in Typography */
 /*  ========================================================================== */
 .copy a {
-  border-bottom: 1px dotted white;
+  border-bottom: 1px dotted black;
 }
 
 /*  ========================================================================== */