compass-grid-plugin 0.0.3 → 0.0.4

data/README.md

@@ -1,19 +1,24 @@
-- [Blog post](http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/)
-- [Gist](https://gist.github.com/702760)
+- [Using SASS With the 1KB Grid System](http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/)
+- [Compass Grid Plugin and a New Fluid Grid Option](http://heygrady.com/blog/2012/04/20/compass-grid-gem-and-new-fluid-grid/)
+- [Original Gist](https://gist.github.com/702760)
 - [The 1KB CSS Grid](http://1kbgrid.com/)
 
 ## About
 Simple grid system inspired by the [the 1KB CSS Grid](http://1kbgrid.com/) designed to utilize [Sass](http://sass-lang.com/) to remove unnecessary classes from the HTML markup and make customization easier. The best part is that it's not exactly 1KB now! Even better than the best part is that it's been extended to support fluid grids as well.
 
-The next better best thing would be fully responsive media query support, but there's [some limitations in Sass as a language](https://github.com/nex3/sass/issues/116#issuecomment-5166163) that make that difficult to do in a Compass plugin.
+The next better best thing would be fully responsive media query support, but there's [some limitations in Sass as a language](https://github.com/nex3/sass/issues/116#issuecomment-5166163) that make that difficult to do in a Compass plugin. Although there are a few example on how best to support media queries with sass.
+
+- [Responsive Web Design in Sass: Using Media Queries in Sass 3.2](http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32)
+- [Responsive Web Design in Sass Part 2: Media Queries in Sass](http://thesassway.com/intermediate/responsive-web-design-part-2)
+- [Responsive Web Design in Sass Part 1: Fluid Layouts and Fluid Images](http://thesassway.com/intermediate/responsive-web-design-part-1)
 
 ## Installation
-###Install the Ruby Gem.
+#### Install the Ruby Gem.
 ```
 gem install compass-grid-plugin
 ```
 
-### Existing Compass Projects
+#### Existing Compass Projects
 You can include it in any existing Compass project by including the grid in your config.rb file.
 
 ```ruby
@@ -21,7 +26,7 @@ You can include it in any existing Compass project by including the grid in your
 require 'compass-grid'
 ```
 
-### New Compass Projects
+#### New Compass Projects
 You can install the grid plugin as part of a new Compass project.
 
 ```
@@ -43,17 +48,22 @@ The primary grid is a fixed, pixel grid. This grid is ideal for designs that do
 - **$grid-support-for-ie6**: *false* - Apply fixes for IE6
 
 ### Functions
-- **grid-column-width( $i, [$plus: 0] )** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
+- **grid-column-width(** *$i*, *[$plus: 0]* **)** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
+- **grid-row-width(** *$i*, *[$plus: 0]* **)** - Function for calculating the inner width of a row. Useful for calculating percentages in the fluid grid. This function should not be applied to a row directly, row widths are supposed to be set to `auto`.
+- **grid-gutter-width(** *[$row: false]* **)** - Function for calculating the width of a gutter. Useful for applying margins to columns and rows. The `$row` argument controls if the returned length is negative or not. Rows require a negative margin.
 
 ### Mixins
-- **grid( $i, [$plus: 0] )** - Mixin for applying widths to a column. The *$plus* argument can be used to alter the width to account for borders or padding.
-- **grid-page( [$i: $grid-columns], [$plus: 0] )** - Mixin for declaring a page element. *$i* is *$grid-columns* by default but can be altered. The *$plus* argument can be used to alter the width to account for borders or padding.
-- **grid-row( [$page: false] )** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
-- **grid-column( [$i: false], [$plus: 0] )** - Mixin for declaring a column. Specifying *$i* will call the *grid* mixin. The *$plus* argument is passed to the *grid* mixin if *i* is also specified.
-- **grid-offset( [$i: 1], [$plus: 0], [$side] )** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
-- **grid-offset-left( [$i: 1], [$plus: 0] )** - Convenience mixin for setting the left margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
-- **grid-offset-right( [$i: 1], [$plus: 0] )** - Convenience mixin for setting the right margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
-- **grid-css( )** - outputs the default grid CSS in case those classes are required in the markup.
+- **grid(** *$i*, *[$plus: 0]*, *[$with-gutters: false]* **)** - Mixin for applying widths to a column. The `$plus` argument can be used to alter the width to account for borders or padding. The `$with-gutters` argument will optionally output the gutter margins in addition to the width.
+- **grid-page(** *[$i: $grid-columns]*, *[$plus: 0]* **)** - Mixin for declaring a page element. `$i` is `$grid-columns` by default but can be altered. The `$plus` argument can be used to alter the width to account for borders or padding.
+- **grid-row(** *[$page: false]* **)** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
+- **grid-column(** *[$i: false]*, *[$plus: 0]* **)** - Mixin for declaring a column. Specifying `$i` will call the `grid` mixin. The `$plus` argument is passed to the `grid` mixin if `$i` is also specified.
+- **grid-gutters(** *[$row: false]* **)** - Mixin for adding gutter margins to a column or a row. The `$row` argument controls if the returned margins are negative. Rows require a negative margin.
+- **grid-row-gutters( )** - Mixin for adding gutter margins to a row.
+- **grid-column-gutters( )** - Mixin for adding gutter margins to a column.
+- **grid-offset(** *[$i: 1]*, *[$plus: 0]*, *[$side]* **)** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
+- **grid-offset-left(** *[$i: 1]*, *[$plus: 0]* **)** - Convenience mixin for setting the left margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
+- **grid-offset-right(** *[$i: 1]*, *[$plus: 0]* **)** - Convenience mixin for setting the right margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
+- **grid-css( )** - Outputs the default grid CSS in case those classes are required in the markup.
 
 ## Fluid Grid Usage
 This is a fluid version of the grid that uses percentages for widths. This grid is ideal for responsive designs that need to scale depending on the device. The fluid grid is more complex because percentage widths depend on their context for meaning. Every function and mixin is similar to the fixed grid but there are two additional variables to provide context.
@@ -63,26 +73,32 @@ This is a fluid version of the grid that uses percentages for widths. This grid
 ```
 
 ### Variables
-The fluid grid uses the variable from the fixed grid module
+The fluid grid uses the variables from the fixed grid module.
+
+- **$fluid-support-for-ie7**: *false* - Creates widths for IE6 and IE7 that have had a half-pixel subtracted to account for IE 7 and below always rounding up on partial pixels.
 
 ### Functions
-- **fluid-column-width( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
-- **fluid-width( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Function for calculating arbitrary widths.
+- **fluid-column-width(** *$i*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$nudge: false]* **)** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
+- **fluid-gutter-width(** *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$row: false]*, *[$nudge: false]* **)** - Function for calculating the width of a gutter. Useful for applying margins to columns and rows. The `$row` argument controls if the returned length is negative or not. Rows require a negative margin.
+- **fluid-width(** *$width*, *[$context-width: grid-column-width($grid-columns, $grid-gutter-width)]*, *[$nudge: false]* **)** - Function for calculating arbitrary widths in percentages. The `$width` is the width of the element you want to calculate and `$context` is the width of the parent element.
+- **fluid-nudge(** *[$context-width: grid-column-width($grid-columns, $grid-gutter-width)]*, *[$nudge: false]* **)** - Function for calculating width of a half-pixel. Used for correcting for IE6 and IE7 because they always roundup.
 
 ### Mixins
-- **fluid( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for applying widths to a column. The *$plus* argument can be used to alter the width to account for borders or padding.
-- **fluid-page( [$i: $grid-columns], [$plus: 0], [$use-max-width: true] )** - Mixin for declaring a page element. *$i* is *$grid-columns* by default but can be altered. The *$plus* argument can be used to alter the width to account for borders or padding.
-- **fluid-row( [$page: false], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
-- **fluid-column( [$i: false], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for declaring a column. Specifying *$i* will call the *grid* mixin. The *$plus* argument is passed to the *grid* mixin if *i* is also specified.
-- **fluid-offset( [$i: 1], [$plus: 0], [$side], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
-- **fluid-offset-left( [$i: 1], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Convenience mixin for setting the left margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
-- **fluid-offset-right( [$i: 1], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Convenience mixin for setting the right margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
-- **fluid-css( )** - outputs the default fluid grid CSS in case those classes are required in the markup.
+- **fluid(** *$i*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$with-gutters: false]* **)** - Mixin for applying widths to a column. The `$plus` argument can be used to alter the width to account for borders or padding. The `$with-gutters` argument will optionally output the gutter margins in addition to the width.
+- **fluid-page(** *[$i: $grid-columns]*, *[$plus: 0]*, *[$use-max-width: true]* **)** - Mixin for declaring a page element. `$i` is `$grid-columns` by default but can be altered. The `$plus` argument can be used to alter the width to account for borders or padding. The `$use-max-width` determines if a pixel max-width is applied as well.
+- **fluid-row(** *[$page: false]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for declaring a column container. The `$page` argument is for removing the negative margins when a row is directly inside a page element.
+- **fluid-column(** *[$i: false]*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$with-gutters: true]* **)** - Mixin for declaring a column. Specifying `$i` will call the `grid` mixin. The `$plus` argument is passed to the *grid* mixin if `$i` is also specified. The `$with-gutters` argument can be used to omit the gutter margins.
+- **fluid-offset(** *[$i: 1]*, *[$plus: 0]*, *[$side]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width. `$side` can be right, left, top or bottom (although right and left are the most useful).
+- **fluid-gutters(** *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$row: false]* **)** - Mixin for adding gutter margins to a column or a row. The `$row` argument controls if the returned margins are negative. Rows require a negative margin.
+- **fluid-row-gutters(** *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for adding gutter margins to a row.
+- **fluid-column-gutters(** *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for adding gutter margins to a column.
+- **fluid-offset-left(** *[$i: 1]*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Convenience mixin for setting the left margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
+- **fluid-offset-right(** *[$i: 1]*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Convenience mixin for setting the right margin on a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width.
+- **fluid-css( )** - Outputs the default fluid grid CSS in case those classes are required in the markup.
 
 ## Notes
 - You must define a `.clearfix` class for the grid to work properly. The grid attempts to extend an existing `.clearfix` class. By default a clearfix class is output automatically. If you want to use your own, you can set `$grid-clearfix-class: false;`.
 - The only thing requiring an IE6 fix is the floats on columns.
-- In order to support accurate fluid grid percentages, the number precision in Sass is set to 8.
-- The fluid grid is not designed to work in older versions of IE, below version 8. The fluid grid is intended to be used on modern devices that support media queries.
-- The only thing in the fluid grid not supported in IE7 is the use of `box-sizing`. This will only matter if borders or padding are added to a column.
+- In order to support accurate fluid grid percentages, the number precision in Sass is set to 7.
+- The fluid grid uses of `box-sizing` which isn't supported in IE7 or below. This will only matter if borders or padding are added to a column.
 - The CSS generated by `@include fluid-css` for the fluid grid will not work in IE6 because of the use of the direct child selector.

data/compass-grid-plugin.gemspec

@@ -6,9 +6,9 @@ Gem::Specification.new do |s|
   s.name        = 'compass-grid-plugin'
   s.version     = Compass::Grid::VERSION
   s.platform    = Gem::Platform::RUBY
-  s.summary     = "Compass extension based on the 1KB CSS Grid"
-  s.description = "Compass extension based on the 1KB CSS Grid designed to utilize Sass and Compass to remove unnecessary classes from the HTML markup and make customization easier."
-  s.homepage    = 'https://github.com/heygrady/1KB-SCSS-Grid'
+  s.summary     = "Compass grid extension inspired by the 1KB CSS Grid"
+  s.description = "Compass grid extension inspired by the 1KB CSS Grid. Supports fixed and fluid grids. Designed to utilize Sass and Compass to remove unnecessary classes from the HTML markup and make customization easier."
+  s.homepage    = 'https://github.com/heygrady/compass-grid-plugin'
   s.authors     = ["Grady Kuhnline"]
   s.email       = ["github@heygrady.net"]
 

data/example/config.rb

@@ -1,27 +1,26 @@
-# Require any additional compass plugins here.
-require 'compass-grid'
-Sass::Script::Number.precision = 7
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = "css"
-sass_dir = "scss"
-images_dir = "i"
-javascripts_dir = "js"
-
-# You can select your preferred output style here (can be overridden via the command line):
-# output_style = :expanded or :nested or :compact or :compressed
-output_style = :compact
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+# Require any additional compass plugins here.
+require 'compass-grid'
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "i"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :compact
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/example/example.html

@@ -1,40 +1,40 @@
-<!doctype html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
-<head>
-  <meta charset="utf-8">
-
-  <title>1KB SCSS Grid Test Page</title>
-  <meta name="description" content="">
-  <meta name="author" content="">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-
-  <link rel="stylesheet" href="css/example.css">
-</head>
-
-<body>
-  <div id="container">
-    <header>
-        <h1>Header</h1>
-        <nav><a href="#">Nav Link</a></nav>
-    </header>
-    <div role="main">
-      <div id="left-column">Left Column</div>
-      <div id="main-column">
-        <section class="hero">
-          Hero Space, I take the full width
-        </section>
-        <section>
-          <article id="content">Actual Content</article>
-          <aside id="right-column">Right Column</aside>
-        </section>
-      </div>
-    </div>
-    <footer>
-      <p>&copy; Copyright 2011</p>
-    </footer>
-  </div>
-</body>
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+
+  <title>1KB SCSS Grid Test Page</title>
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+
+  <link rel="stylesheet" href="css/example.css">
+</head>
+
+<body>
+  <div id="container">
+    <header>
+        <h1>Header</h1>
+        <nav><a href="#">Nav Link</a></nav>
+    </header>
+    <div role="main">
+      <div id="left-column">Left Column</div>
+      <div id="main-column">
+        <section class="hero">
+          Hero Space, I take the full width
+        </section>
+        <section>
+          <article id="content">Actual Content</article>
+          <aside id="right-column">Right Column</aside>
+        </section>
+      </div>
+    </div>
+    <footer>
+      <p>&copy; Copyright 2011</p>
+    </footer>
+  </div>
+</body>
 </html>

data/example/fixed.html

@@ -1,216 +1,216 @@
-<!doctype html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
-<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
-<head>
-  <meta charset="utf-8">
-
-  <title>1KB SCSS Grid Fixed Grid</title>
-  <meta name="description" content="">
-  <meta name="author" content="">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-
-  <link rel="stylesheet" href="css/fixed.css">
-</head>
-
-<body>
-  <!-- normal -->
-  <div class="page">
-    <h2>Fixed</h2>
-    <div class="row">
-      <div class="column grid-1">1</div>
-      <div class="column grid-11">11</div>
-    </div>
-    <div class="row">
-      <div class="column grid-2">2</div>
-      <div class="column grid-10">10</div>
-    </div>
-    <div class="row">
-      <div class="column grid-3">3</div>
-      <div class="column grid-9">9</div>
-    </div>
-    <div class="row">
-      <div class="column grid-4">4</div>
-      <div class="column grid-8">8</div>
-    </div>
-    <div class="row">
-      <div class="column grid-5">5</div>
-      <div class="column grid-7">7</div>
-    </div>
-    <div class="row">
-      <div class="column grid-6">6</div>
-      <div class="column grid-6">6</div>
-    </div>
-    <div class="row">
-      <div class="column grid-12">12</div>
-    </div>
-  </div>
-
-  <!-- borders -->
-  <div class="page borders">
-    <h2>Borders</h2>
-    <div class="row">
-      <div class="column grid-1">1</div>
-      <div class="column grid-11">11</div>
-    </div>
-    <div class="row">
-      <div class="column grid-2">2</div>
-      <div class="column grid-10">10</div>
-    </div>
-    <div class="row">
-      <div class="column grid-3">3</div>
-      <div class="column grid-9">9</div>
-    </div>
-    <div class="row">
-      <div class="column grid-4">4</div>
-      <div class="column grid-8">8</div>
-    </div>
-    <div class="row">
-      <div class="column grid-5">5</div>
-      <div class="column grid-7">7</div>
-    </div>
-    <div class="row">
-      <div class="column grid-6">6</div>
-      <div class="column grid-6">6</div>
-    </div>
-    <div class="row">
-      <div class="column grid-12">12</div>
-    </div>
-  </div>
-
-  <!-- padding -->
-  <div class="page padding">
-    <h2>Padding</h2>
-    <div class="row">
-      <div class="column grid-1">1</div>
-      <div class="column grid-11">11</div>
-    </div>
-    <div class="row">
-      <div class="column grid-2">2</div>
-      <div class="column grid-10">10</div>
-    </div>
-    <div class="row">
-      <div class="column grid-3">3</div>
-      <div class="column grid-9">9</div>
-    </div>
-    <div class="row">
-      <div class="column grid-4">4</div>
-      <div class="column grid-8">8</div>
-    </div>
-    <div class="row">
-      <div class="column grid-5">5</div>
-      <div class="column grid-7">7</div>
-    </div>
-    <div class="row">
-      <div class="column grid-6">6</div>
-      <div class="column grid-6">6</div>
-    </div>
-    <div class="row">
-      <div class="column grid-12">12</div>
-    </div>
-  </div>
-
-  <!-- before -->
-  <div class="page">
-    <h2>Offset Before</h2>
-    <div class="row">
-      <div class="column grid-10">10</div>
-      <div class="column grid-1 before-1">1 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-9">9</div>
-      <div class="column grid-1 before-2">2 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-8">8</div>
-      <div class="column grid-1 before-3">3 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-7">7</div>
-      <div class="column grid-1 before-4">4 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-6">6</div>
-      <div class="column grid-1 before-5">5 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-5">5</div>
-      <div class="column grid-1 before-6">6 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-4">4</div>
-      <div class="column grid-1 before-7">7 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-3">3</div>
-      <div class="column grid-1 before-8">8 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-2">2</div>
-      <div class="column grid-1 before-9">9 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1">1</div>
-      <div class="column grid-1 before-10">10 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 before-11">11 before</div>
-    </div>
-    <div class="row">
-      <div class="column grid-12">12</div>
-    </div>
-  </div>
-
-  <!-- after -->
-  <div class="page">
-    <h2>Offset After</h2>
-    <div class="row">
-      <div class="column grid-1 after-1">1 after</div>
-      <div class="column grid-10">10</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-2">2 after</div>
-      <div class="column grid-9">9</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-3">3 after</div>
-      <div class="column grid-8">8</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-4">4 after</div>
-      <div class="column grid-7">7</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-5">5 after</div>
-      <div class="column grid-6">6</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-6">6 after</div>
-      <div class="column grid-5">5</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-7">7 after</div>
-      <div class="column grid-4">4</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-8">8 after</div>
-      <div class="column grid-3">3</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-9">9 after</div>
-      <div class="column grid-2">2</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-10">10 after</div>
-      <div class="column grid-1">1</div>
-    </div>
-    <div class="row">
-      <div class="column grid-1 after-11">11 after</div>
-    </div>
-    <div class="row">
-      <div class="column grid-12">12</div>
-    </div>
-  </div>
-</body>
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+
+  <title>1KB SCSS Grid Fixed Grid</title>
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+
+  <link rel="stylesheet" href="css/fixed.css">
+</head>
+
+<body>
+  <!-- normal -->
+  <div class="page">
+    <h2>Fixed</h2>
+    <div class="row">
+      <div class="column grid-1">1</div>
+      <div class="column grid-11">11</div>
+    </div>
+    <div class="row">
+      <div class="column grid-2">2</div>
+      <div class="column grid-10">10</div>
+    </div>
+    <div class="row">
+      <div class="column grid-3">3</div>
+      <div class="column grid-9">9</div>
+    </div>
+    <div class="row">
+      <div class="column grid-4">4</div>
+      <div class="column grid-8">8</div>
+    </div>
+    <div class="row">
+      <div class="column grid-5">5</div>
+      <div class="column grid-7">7</div>
+    </div>
+    <div class="row">
+      <div class="column grid-6">6</div>
+      <div class="column grid-6">6</div>
+    </div>
+    <div class="row">
+      <div class="column grid-12">12</div>
+    </div>
+  </div>
+
+  <!-- borders -->
+  <div class="page borders">
+    <h2>Borders</h2>
+    <div class="row">
+      <div class="column grid-1">1</div>
+      <div class="column grid-11">11</div>
+    </div>
+    <div class="row">
+      <div class="column grid-2">2</div>
+      <div class="column grid-10">10</div>
+    </div>
+    <div class="row">
+      <div class="column grid-3">3</div>
+      <div class="column grid-9">9</div>
+    </div>
+    <div class="row">
+      <div class="column grid-4">4</div>
+      <div class="column grid-8">8</div>
+    </div>
+    <div class="row">
+      <div class="column grid-5">5</div>
+      <div class="column grid-7">7</div>
+    </div>
+    <div class="row">
+      <div class="column grid-6">6</div>
+      <div class="column grid-6">6</div>
+    </div>
+    <div class="row">
+      <div class="column grid-12">12</div>
+    </div>
+  </div>
+
+  <!-- padding -->
+  <div class="page padding">
+    <h2>Padding</h2>
+    <div class="row">
+      <div class="column grid-1">1</div>
+      <div class="column grid-11">11</div>
+    </div>
+    <div class="row">
+      <div class="column grid-2">2</div>
+      <div class="column grid-10">10</div>
+    </div>
+    <div class="row">
+      <div class="column grid-3">3</div>
+      <div class="column grid-9">9</div>
+    </div>
+    <div class="row">
+      <div class="column grid-4">4</div>
+      <div class="column grid-8">8</div>
+    </div>
+    <div class="row">
+      <div class="column grid-5">5</div>
+      <div class="column grid-7">7</div>
+    </div>
+    <div class="row">
+      <div class="column grid-6">6</div>
+      <div class="column grid-6">6</div>
+    </div>
+    <div class="row">
+      <div class="column grid-12">12</div>
+    </div>
+  </div>
+
+  <!-- before -->
+  <div class="page">
+    <h2>Offset Before</h2>
+    <div class="row">
+      <div class="column grid-10">10</div>
+      <div class="column grid-1 before-1">1 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-9">9</div>
+      <div class="column grid-1 before-2">2 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-8">8</div>
+      <div class="column grid-1 before-3">3 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-7">7</div>
+      <div class="column grid-1 before-4">4 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-6">6</div>
+      <div class="column grid-1 before-5">5 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-5">5</div>
+      <div class="column grid-1 before-6">6 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-4">4</div>
+      <div class="column grid-1 before-7">7 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-3">3</div>
+      <div class="column grid-1 before-8">8 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-2">2</div>
+      <div class="column grid-1 before-9">9 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1">1</div>
+      <div class="column grid-1 before-10">10 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 before-11">11 before</div>
+    </div>
+    <div class="row">
+      <div class="column grid-12">12</div>
+    </div>
+  </div>
+
+  <!-- after -->
+  <div class="page">
+    <h2>Offset After</h2>
+    <div class="row">
+      <div class="column grid-1 after-1">1 after</div>
+      <div class="column grid-10">10</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-2">2 after</div>
+      <div class="column grid-9">9</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-3">3 after</div>
+      <div class="column grid-8">8</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-4">4 after</div>
+      <div class="column grid-7">7</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-5">5 after</div>
+      <div class="column grid-6">6</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-6">6 after</div>
+      <div class="column grid-5">5</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-7">7 after</div>
+      <div class="column grid-4">4</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-8">8 after</div>
+      <div class="column grid-3">3</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-9">9 after</div>
+      <div class="column grid-2">2</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-10">10 after</div>
+      <div class="column grid-1">1</div>
+    </div>
+    <div class="row">
+      <div class="column grid-1 after-11">11 after</div>
+    </div>
+    <div class="row">
+      <div class="column grid-12">12</div>
+    </div>
+  </div>
+</body>
 </html>