grid-coordinates 1.0.6 → 1.0.7

data/README.mdown

@@ -2,7 +2,7 @@
 
 Grid Coordinates is a [Sass](http://sass-lang.com/) CSS Grid Framework Generator delivered as a [Compass](http://compass-style.org/) extension. This project was inspired by Tyler Tate's [1kb CSS Grid](http://1kbgrid.com/) project.
 
-Grid Coordinates is quite simple. It sets up the styles for your CSS grid framework and even supports nested grids as well. It's also able to generate styles for grids of any size - you control the coordinates and it generates the styles.
+Grid Coordinates is quite simple. It fully leverages both classes and extends to set up the styles for your CSS grid framework. Grid Coordinates even supports nested grids and prefix and suffix features. It's also able to generate styles for grids of any size - you control the coordinates and it generates the styles.
 
 ## Installation
 
@@ -12,7 +12,7 @@ Add `require 'grid-coordinates'` to your Compass config file.
 
 ## Usage
 
-The default grid-coordinates defaults have been set to create a 960px wide grid with 12 columns at 60px with a gutter of 20px. You can override these as needed in your project if the 960px grid doesn't suit your needs.
+Grid-coordinates defaults to the 960px grid with 12 columns (12 columns at 60px with a gutter of 20px). You can override these variables as needed in your project if this grid doesn't suit your needs.
 
 Use [1kbgrid.com](http://1kbgrid.com) or another grid generator for guidance on the various grid coordinates possible.
 
@@ -20,26 +20,32 @@ See `templates/project/screen.sass` for an example.
 
 ### Configure as needed and import
 
-    //  Configure grid coordinates
-    $grid-columns: 16
-    $grid-pixels: 40px
-    $grid-gutter-width: 20px
+    // Configure grid coordinates
+    $grid-columns: 12 !default
+    $grid-pixels: 60px !default
+    $grid-gutter-width: 20px !default
     
     @import grid-coordinates
+    
+    @include grid-coordinates
+    
+    ...
+
+### Available extends
 
-### Available mixins
+Use the extend classes in your HTML or use them to extend in your Sass stylesheets. For an example of this in use, see `templates/project`.
 
-`@include grid-container`
+`@extend .grid-container`
 
-`@include nested-grid-container`
+`@extend .nested-grid-container`
 
-`@include grid($grid-columns)`
+`@extend .grid-4`
 
-`@include grid-prefix($grid-columns)`
+`@extend .grid-prefix-4`
 
-`@include grid-suffix($grid-columns)`
+`@extend .grid-suffix-4`
 
-`@include grid-full`
+`@extend .grid-full`
 
 ## License
 

data/VERSION

@@ -1 +1 @@
-1.0.6
+1.0.7

data/stylesheets/_grid-coordinates.sass

@@ -0,0 +1,57 @@
+@import compass/utilities
+
+// Configure grid coordinates
+$grid-columns: 12 !default
+$grid-pixels: 60px !default
+$grid-gutter-width: 20px !default
+
+@mixin grid-coordinates
+  /*
+    Grid-Coordinates by Adam Stacoviak
+    Fork me: http://adamstac.com/grid-coordinates */
+  .grid-container
+    margin: 0 auto
+    overflow: hidden
+    width: ($grid-columns * $grid-pixels) + ($grid-columns * $grid-gutter-width)
+  .nested-grid-container
+    display: inline-block
+    margin:
+      left: -$grid-gutter-width / 2
+      right: -$grid-gutter-width / 2
+    overflow: hidden
+    width: auto
+  @for $i from 1 through $grid-columns
+    .grid-#{$i}
+      @include grid($i)
+  .grid-full
+    @include grid($grid-columns)
+  @for $i from 1 through $grid-columns - 1
+    .grid-prefix-#{$i}
+      @include grid-prefix($i)
+  @for $i from 1 through $grid-columns - 1
+    .grid-suffix-#{$i}
+      @include grid-suffix($i)
+
+@mixin grid($grid-columns)
+  @include grid-width($grid-columns)
+  @include float-left
+  margin: 0 $grid-gutter-width / 2
+  overflow: hidden
+
+@mixin grid-width($grid-columns)
+  @if $grid-columns == 1
+    width: $grid-pixels
+  @else
+    width: ($grid-columns * $grid-pixels) + (($grid-columns * $grid-gutter-width) - $grid-gutter-width)
+
+@mixin grid-prefix($grid-columns)
+  @if $grid-columns == 1
+    padding-left: $grid-pixels + $grid-gutter-width
+  @else
+    padding-left: ($grid-columns * $grid-pixels) + ($grid-columns * $grid-gutter-width)
+
+@mixin grid-suffix($grid-columns)
+  @if $grid-columns == 1
+    padding-right: $grid-pixels + $grid-gutter-width
+  @else
+    padding-right: ($grid-columns * $grid-pixels) + ($grid-columns * $grid-gutter-width)

data/stylesheets/_grid-coordinates.scss

@@ -1,48 +1,48 @@
 @import "compass/utilities";
 
-//  How many grid columns would you like?
+// Configure grid coordinates
 $grid-columns: 12 !default;
-
-//  How many pixels wide would you like each column to be?
 $grid-pixels: 60px !default;
-
-//  How many pixels wide would you like the gutter to be?
 $grid-gutter-width: 20px !default;
 
-//  Set grid width
-$grid-width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width;
+@mixin grid-coordinates {
+  /* Grid-Coordinates by Adam Stacoviak
+   * Fork me: http://adamstac.com/grid-coordinates */
+  .grid-container {
+    margin: 0 auto;
+    overflow: hidden;
+    width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width; }
+  .nested-grid-container {
+    display: inline-block;
+    margin: {
+      left: -$grid-gutter-width / 2;
+      right: -$grid-gutter-width / 2; };
+    overflow: hidden;
+    width: auto; }
+  @for $i from 1 through $grid-columns {
+    .grid-#{$i} {
+      @include grid($i); } }
+  .grid-full {
+    @include grid($grid-columns); }
+  @for $i from 1 through $grid-columns - 1 {
+    .grid-prefix-#{$i} {
+      @include grid-prefix($i); } }
+  @for $i from 1 through $grid-columns - 1 {
+    .grid-suffix-#{$i} {
+      @include grid-suffix($i); } } }
 
 @mixin grid($grid-columns) {
-  @include column;
-  @include grid-width($grid-columns); }
-
-// Used internatlly to the extension only
-@mixin column {
+  @include grid-width($grid-columns);
   @include float-left;
   margin: 0 $grid-gutter-width / 2;
   overflow: hidden; }
 
-// Used internatlly to the extension only
 @mixin grid-width($grid-columns) {
   @if $grid-columns == 1 {
     width: $grid-pixels; }
   @else {
     width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width - $grid-gutter-width; } }
 
-// Mixins used to create, define and manipulate the grid
-@mixin grid-container {
-  margin: 0 auto;
-  overflow: hidden;
-  width: $grid-width; }
-
-@mixin nested-grid-container {
-  display: inline-block;
-  margin: {
-    left: -$grid-gutter-width / 2;
-    right: -$grid-gutter-width / 2; };
-  overflow: hidden;
-  width: auto; }
-
 @mixin grid-prefix($grid-columns) {
   @if $grid-columns == 1 {
     padding-left: $grid-pixels + $grid-gutter-width; }
@@ -54,6 +54,3 @@ $grid-width: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width;
     padding-right: $grid-pixels + $grid-gutter-width; }
   @else {
     padding-right: $grid-columns * $grid-pixels + $grid-columns * $grid-gutter-width; } }
-
-@mixin grid-full {
-  @include grid($grid-columns); }

data/templates/project/index.haml

@@ -6,14 +6,18 @@
   %body{:id => body_id, :class => body_class}
     #header
       #brand
-        %p brand
+        .content
+          %p brand
       #nav
-        %p nav
+        .content
+          %p nav
     #page
       #page-body
-        %p page-body
+        .content
+          %p page-body
       #page-sidebar
-        %p page-sidebar
+        .content
+          %p page-sidebar
     #footer
-      #footer-body
+      .content
         %p footer

data/templates/project/screen.css

@@ -1,71 +1,279 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+body {
+  line-height: 1;
+  color: black;
+  background: white;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+q, blockquote {
+  quotes: "" "";
+}
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+}
+
+a img {
+  border: none;
+}
+
 body {
   font: bold 14px helvetica, arial, sans-serif;
   padding-top: 20px;
 }
 
-#header, #page, #footer {
+/* Grid-Coordinates by Adam Stacoviak
+ * Fork me: http://adamstac.com/grid-coordinates */
+.grid-container, #header, #page, #footer {
   margin: 0 auto;
   overflow: hidden;
   width: 960px;
 }
 
-#brand {
+.nested-grid-container {
+  display: inline-block;
+  margin-left: -10px;
+  margin-right: -10px;
+  overflow: hidden;
+  width: auto;
+}
+
+.grid-1 {
+  width: 60px;
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+}
+
+.grid-2 {
+  width: 140px;
   display: inline;
   float: left;
   margin: 0 10px;
   overflow: hidden;
+}
+
+.grid-3, #brand {
+  width: 220px;
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+}
+
+.grid-4, #page-sidebar {
   width: 300px;
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
 }
 
-#nav {
+.grid-5 {
+  width: 380px;
   display: inline;
   float: left;
   margin: 0 10px;
   overflow: hidden;
-  width: 620px;
 }
 
-#page-body {
+.grid-6 {
+  width: 460px;
   display: inline;
   float: left;
   margin: 0 10px;
   overflow: hidden;
+}
+
+.grid-7 {
+  width: 540px;
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+}
+
+.grid-8, #page-body {
   width: 620px;
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
 }
-#page-body.wide {
+
+.grid-9, #nav {
+  width: 700px;
   display: inline;
   float: left;
   margin: 0 10px;
   overflow: hidden;
-  width: 940px;
 }
 
-#page-sidebar {
+.grid-10 {
+  width: 780px;
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+}
+
+.grid-11 {
+  width: 860px;
   display: inline;
   float: left;
   margin: 0 10px;
   overflow: hidden;
-  width: 300px;
 }
 
-#footer-body {
+.grid-12 {
+  width: 940px;
   display: inline;
   float: left;
   margin: 0 10px;
   overflow: hidden;
+}
+
+.grid-full, #page-body.wide, #footer .content {
   width: 940px;
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+}
+
+.grid-prefix-1 {
+  padding-left: 80px;
+}
+
+.grid-prefix-2 {
+  padding-left: 160px;
+}
+
+.grid-prefix-3 {
+  padding-left: 240px;
+}
+
+.grid-prefix-4 {
+  padding-left: 320px;
+}
+
+.grid-prefix-5 {
+  padding-left: 400px;
+}
+
+.grid-prefix-6 {
+  padding-left: 480px;
+}
+
+.grid-prefix-7 {
+  padding-left: 560px;
+}
+
+.grid-prefix-8 {
+  padding-left: 640px;
+}
+
+.grid-prefix-9 {
+  padding-left: 720px;
+}
+
+.grid-prefix-10 {
+  padding-left: 800px;
+}
+
+.grid-prefix-11 {
+  padding-left: 880px;
+}
+
+.grid-suffix-1 {
+  padding-right: 80px;
+}
+
+.grid-suffix-2 {
+  padding-right: 160px;
+}
+
+.grid-suffix-3 {
+  padding-right: 240px;
+}
+
+.grid-suffix-4 {
+  padding-right: 320px;
+}
+
+.grid-suffix-5 {
+  padding-right: 400px;
+}
+
+.grid-suffix-6 {
+  padding-right: 480px;
+}
+
+.grid-suffix-7 {
+  padding-right: 560px;
+}
+
+.grid-suffix-8 {
+  padding-right: 640px;
+}
+
+.grid-suffix-9 {
+  padding-right: 720px;
+}
+
+.grid-suffix-10 {
+  padding-right: 800px;
+}
+
+.grid-suffix-11 {
+  padding-right: 880px;
 }
 
-.common, #brand, #nav, #footer-body, #page-body, #page-body.wide, #page-sidebar {
-  background: #dddddd;
+.common, #brand, #nav, #page-body, #page-sidebar, #footer .content {
+  background: #444444;
+  color: white;
   margin-bottom: 20px;
   text-align: center;
 }
 
-#brand, #nav, #footer-body {
+#brand, #nav, #footer .content {
   line-height: 100px;
 }
 
-#page-body, #page-body.wide, #page-sidebar {
+#page-body, #page-sidebar {
   line-height: 400px;
 }

data/templates/project/screen.sass

@@ -1,45 +1,50 @@
-@import compass
-
-//  Configure grid coordinates
-$grid-columns: 12
-$grid-pixels: 60px
-$grid-gutter-width: 20px
-
-@import grid-coordinates
+@import compass/reset
+@import compass/utilities
 
 body
   font: bold 14px helvetica, arial, sans-serif
   padding-top: 20px
+  
+// // Configure grid coordinates
+// $grid-columns: 16
+// $grid-pixels: 40px
+// $grid-gutter-width: 20px
+
+@import grid-coordinates
+
+@include grid-coordinates
 
 #header, #page, #footer
-  @include grid-container
+  @extend .grid-container
 
 #brand
-  @include grid(4)
+  @extend .grid-3
 
 #nav
-  @include grid(8)
+  @extend .grid-9
 
 #page-body
-  @include grid(8)
+  @extend .grid-8
   &.wide
-    @include grid-full
+    @extend .grid-full
 
 #page-sidebar
-  @include grid(4)
+  @extend .grid-4
 
-#footer-body
-  @include grid-full
+#footer .content
+  @extend .grid-full
 
 .common
-  background: #ddd
+  background: #444
+  color: #fff
   margin-bottom: 20px
   text-align: center
   
-#brand, #nav, #footer-body
+#brand, #nav, #page-body, #page-sidebar, #footer .content
   @extend .common
+
+#brand, #nav, #footer .content
   line-height: 100px
 
 #page-body, #page-sidebar
-  @extend .common
   line-height: 400px

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: grid-coordinates
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 25
   prerelease: false
   segments: 
   - 1
   - 0
-  - 6
-  version: 1.0.6
+  - 7
+  version: 1.0.7
 platform: ruby
 authors: 
 - Adam Stacoviak
@@ -26,12 +26,12 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 63
+        hash: 61
         segments: 
         - 0
         - 10
-        - 4
-        version: 0.10.4
+        - 5
+        version: 0.10.5
   type: :runtime
   version_requirements: *id001
 description: A Sass CSS Grid Framework Generator (Compass Extension) inspired by the 1kb CSS Grid project
@@ -46,6 +46,7 @@ files:
 - README.mdown
 - VERSION
 - lib/grid-coordinates.rb
+- stylesheets/_grid-coordinates.sass
 - stylesheets/_grid-coordinates.scss
 - templates/project/index.haml
 - templates/project/manifest.rb