grid-coordinates 1.0.8 → 1.1.0

data/README.mdown

@@ -22,16 +22,36 @@ See `templates/project/screen.sass` for an example.
 
     // Configure grid coordinates
     $grid-columns: 12 !default
-    $grid-pixels: 60px !default
+    $grid-width: 60px !default
     $grid-gutter-width: 20px !default
+    $overflow-allowed: false !default
     
     @import grid-coordinates
     
+    // Only needed if you're using the classes instead of the mixins
     @include grid-coordinates
     
     ...
 
-### Available extends
+The `$overflow-allowed` setting controls which of Compass' two clearfix mixins is used. The default setting, false, will clip any content that overflows a grid block. If you need overflowing content to remain visible (i.e., a drop-down menu inside a grid block) change this setting the true.
+
+### Using the Mixins
+
+Use these mixins in your Sass stylesheets. For an example of this in use, see `templates/project`.
+
+`@include grid-container`
+
+`@include nested-grid-container`
+
+`@include grid(4)`
+
+`@include grid-prefix(4)`
+
+`@include grid-suffix(4)`
+
+`@include grid-full`
+
+### Using the Classes
 
 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`.
 

data/VERSION

@@ -1 +1 @@
-1.0.7
+1.1.0

data/lib/grid-coordinates.rb

@@ -5,6 +5,6 @@ Compass::Frameworks.register("grid-coordinates", :path => "#{File.dirname(__FILE
 
 module GridCoordinates
   
-  VERSION = "1.0.8".freeze
+  VERSION = "1.1.0".freeze
 
 end

data/stylesheets/_grid-coordinates.sass

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

data/stylesheets/_grid-coordinates.scss

@@ -4,31 +4,20 @@
 $grid-columns: 12 !default;
 $grid-width: 60px !default;
 $grid-gutter-width: 20px !default;
+$overflow-allowed: false !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-width + $grid-columns * $grid-gutter-width; }
+    @include grid-container; }
   .nested-grid-container {
-    display: inline-block;
-    margin: {
-      left: -$grid-gutter-width / 2;
-      right: -$grid-gutter-width / 2; };
-    overflow: hidden;
-    width: auto; }
+    @include nested-grid-container; }
   .grid-block {
-    @include float-left;
-    overflow: hidden;
-    margin: 0 $grid-gutter-width / 2; }
+    @include grid-block; }
   @for $i from 1 through $grid-columns {
     .grid-#{$i} {
-      @include grid($i);
-      @extend .grid-block; } }
+      @include grid($i); } }
   .grid-full {
-    @include grid($grid-columns); }
+    @include grid-full; }
   @for $i from 1 through $grid-columns - 1 {
     .grid-prefix-#{$i} {
       @include grid-prefix($i); } }
@@ -36,8 +25,36 @@ $grid-gutter-width: 20px !default;
     .grid-suffix-#{$i} {
       @include grid-suffix($i); } } }
 
+@mixin grid-container {
+  margin: 0 auto;
+  @if $overflow-allowed {
+    @include pie-clearfix; }
+  @else {
+    @include clearfix; }
+  width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
+
+@mixin nested-grid-container {
+  display: inline-block;
+  margin: {
+    left: -$grid-gutter-width / 2;
+    right: -$grid-gutter-width / 2; };
+  @if $overflow-allowed {
+    @include pie-clearfix; }
+  @else {
+    @include clearfix; }
+  width: auto; }
+
+@mixin grid-block {
+  @include float-left;
+  @if $overflow-allowed {
+    @include pie-clearfix; }
+  @else {
+    @include clearfix; }
+  margin: 0 $grid-gutter-width / 2; }
+
 @mixin grid($grid-columns) {
-  @include grid-width($grid-columns); }
+  @include grid-width($grid-columns);
+  @include grid-block; }
 
 @mixin grid-width($grid-columns) {
   @if $grid-columns == 1 {
@@ -45,6 +62,9 @@ $grid-gutter-width: 20px !default;
   @else {
     width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width - $grid-gutter-width; } }
 
+@mixin grid-full {
+  @include grid($grid-columns); }
+
 @mixin grid-prefix($grid-columns) {
   @if $grid-columns == 1 {
     padding-left: $grid-width + $grid-gutter-width; }

data/templates/project/index.haml

@@ -1,23 +1,17 @@
 !!! Strict
 %html
   %head
-    %title Grid Coordinates - Sample
+    %title Grid Coordinates - Example
     %link{:href => "screen.css", :media => "all", :rel => "stylesheet", :type => "text/css"}
-  %body{:id => body_id, :class => body_class}
+  %body
     #header
-      #brand
-        .content
-          %p brand
-      #nav
-        .content
-          %p nav
+      %h1 Website Name
+      #nav-main
+        This is the main navigation
     #page
-      #page-body
-        .content
-          %p page-body
-      #page-sidebar
-        .content
-          %p page-sidebar
+      #content
+        This is the content section
+      #sidebar
+        This is the sidebar section
     #footer
-      .content
-        %p footer
+      This is the footer section

data/templates/project/screen.css

@@ -1,279 +1,432 @@
-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;
+.grid-container, #header, #page, #footer {
+  margin: 0 auto;
+  overflow: hidden;
+  *zoom: 1;
+  width: 960px;
 }
 
-body {
-  line-height: 1;
-  color: black;
-  background: white;
+.nested-grid-container {
+  display: inline-block;
+  margin-left: -5px;
+  margin-right: -5px;
+  overflow: hidden;
+  *zoom: 1;
+  width: auto;
 }
 
-ol, ul {
-  list-style: none;
+.grid-block {
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  vertical-align: middle;
+.grid-1 {
+  width: 30px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-caption, th, td {
-  text-align: left;
-  font-weight: normal;
-  vertical-align: middle;
+.grid-2 {
+  width: 70px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-q, blockquote {
-  quotes: "" "";
+.grid-3 {
+  width: 110px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
-q:before, q:after, blockquote:before, blockquote:after {
-  content: "";
+
+.grid-4 {
+  width: 150px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-a img {
-  border: none;
+.grid-5 {
+  width: 190px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-body {
-  font: bold 14px helvetica, arial, sans-serif;
-  padding-top: 20px;
+.grid-6, #header h1, #page #sidebar {
+  width: 230px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-/* Grid-Coordinates by Adam Stacoviak
- * Fork me: http://adamstac.com/grid-coordinates */
-.grid-container, #header, #page, #footer {
-  margin: 0 auto;
+.grid-7 {
+  width: 270px;
+  display: inline;
+  float: left;
   overflow: hidden;
-  width: 960px;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.nested-grid-container {
-  display: inline-block;
-  margin-left: -10px;
-  margin-right: -10px;
+.grid-8 {
+  width: 310px;
+  display: inline;
+  float: left;
   overflow: hidden;
-  width: auto;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-1 {
-  width: 60px;
+.grid-9 {
+  width: 350px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-2 {
-  width: 140px;
+.grid-10 {
+  width: 390px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-3, #brand {
-  width: 220px;
+.grid-11 {
+  width: 430px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-4, #page-sidebar {
-  width: 300px;
+.grid-12 {
+  width: 470px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-5 {
-  width: 380px;
+.grid-13 {
+  width: 510px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-6 {
-  width: 460px;
+.grid-14 {
+  width: 550px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-7 {
-  width: 540px;
+.grid-15 {
+  width: 590px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-8, #page-body {
-  width: 620px;
+.grid-16, #header #nav-main {
+  width: 630px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-9, #nav {
-  width: 700px;
+.grid-17, #page #content {
+  width: 670px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-10 {
-  width: 780px;
+.grid-18 {
+  width: 710px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-11 {
-  width: 860px;
+.grid-19 {
+  width: 750px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-12 {
-  width: 940px;
+.grid-20 {
+  width: 790px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
+}
+
+.grid-21 {
+  width: 830px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
-.grid-full, #page-body.wide, #footer .content {
-  width: 940px;
+.grid-22 {
+  width: 870px;
   display: inline;
   float: left;
-  margin: 0 10px;
   overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
+}
+
+.grid-23 {
+  width: 910px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
+}
+
+.grid-24 {
+  width: 950px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
+}
+
+.grid-full {
+  width: 950px;
+  display: inline;
+  float: left;
+  overflow: hidden;
+  *zoom: 1;
+  margin: 0 5px;
 }
 
 .grid-prefix-1 {
-  padding-left: 80px;
+  padding-left: 40px;
 }
 
 .grid-prefix-2 {
-  padding-left: 160px;
+  padding-left: 80px;
 }
 
 .grid-prefix-3 {
-  padding-left: 240px;
+  padding-left: 120px;
 }
 
 .grid-prefix-4 {
-  padding-left: 320px;
+  padding-left: 160px;
 }
 
 .grid-prefix-5 {
-  padding-left: 400px;
+  padding-left: 200px;
 }
 
 .grid-prefix-6 {
-  padding-left: 480px;
+  padding-left: 240px;
 }
 
 .grid-prefix-7 {
-  padding-left: 560px;
+  padding-left: 280px;
 }
 
 .grid-prefix-8 {
-  padding-left: 640px;
+  padding-left: 320px;
 }
 
 .grid-prefix-9 {
-  padding-left: 720px;
+  padding-left: 360px;
 }
 
 .grid-prefix-10 {
-  padding-left: 800px;
+  padding-left: 400px;
 }
 
 .grid-prefix-11 {
+  padding-left: 440px;
+}
+
+.grid-prefix-12 {
+  padding-left: 480px;
+}
+
+.grid-prefix-13 {
+  padding-left: 520px;
+}
+
+.grid-prefix-14 {
+  padding-left: 560px;
+}
+
+.grid-prefix-15 {
+  padding-left: 600px;
+}
+
+.grid-prefix-16 {
+  padding-left: 640px;
+}
+
+.grid-prefix-17 {
+  padding-left: 680px;
+}
+
+.grid-prefix-18 {
+  padding-left: 720px;
+}
+
+.grid-prefix-19 {
+  padding-left: 760px;
+}
+
+.grid-prefix-20 {
+  padding-left: 800px;
+}
+
+.grid-prefix-21 {
+  padding-left: 840px;
+}
+
+.grid-prefix-22 {
   padding-left: 880px;
 }
 
-.grid-suffix-1 {
-  padding-right: 80px;
+.grid-prefix-23 {
+  padding-left: 920px;
 }
 
-.grid-suffix-2 {
-  padding-right: 160px;
+.grid-suffix-1, #page #content {
+  padding-right: 40px;
+}
+
+.grid-suffix-2, #header h1 {
+  padding-right: 80px;
 }
 
 .grid-suffix-3 {
-  padding-right: 240px;
+  padding-right: 120px;
 }
 
 .grid-suffix-4 {
-  padding-right: 320px;
+  padding-right: 160px;
 }
 
 .grid-suffix-5 {
-  padding-right: 400px;
+  padding-right: 200px;
 }
 
 .grid-suffix-6 {
-  padding-right: 480px;
+  padding-right: 240px;
 }
 
 .grid-suffix-7 {
-  padding-right: 560px;
+  padding-right: 280px;
 }
 
 .grid-suffix-8 {
-  padding-right: 640px;
+  padding-right: 320px;
 }
 
 .grid-suffix-9 {
-  padding-right: 720px;
+  padding-right: 360px;
 }
 
 .grid-suffix-10 {
-  padding-right: 800px;
+  padding-right: 400px;
 }
 
 .grid-suffix-11 {
-  padding-right: 880px;
+  padding-right: 440px;
 }
 
-.common, #brand, #nav, #page-body, #page-sidebar, #footer .content {
-  background: #444444;
-  color: white;
-  margin-bottom: 20px;
-  text-align: center;
+.grid-suffix-12 {
+  padding-right: 480px;
+}
+
+.grid-suffix-13 {
+  padding-right: 520px;
 }
 
-#brand, #nav, #footer .content {
-  line-height: 100px;
+.grid-suffix-14 {
+  padding-right: 560px;
+}
+
+.grid-suffix-15 {
+  padding-right: 600px;
+}
+
+.grid-suffix-16 {
+  padding-right: 640px;
+}
+
+.grid-suffix-17 {
+  padding-right: 680px;
+}
+
+.grid-suffix-18 {
+  padding-right: 720px;
+}
+
+.grid-suffix-19 {
+  padding-right: 760px;
+}
+
+.grid-suffix-20 {
+  padding-right: 800px;
+}
+
+.grid-suffix-21 {
+  padding-right: 840px;
+}
+
+.grid-suffix-22 {
+  padding-right: 880px;
 }
 
-#page-body, #page-sidebar {
-  line-height: 400px;
+.grid-suffix-23 {
+  padding-right: 920px;
 }

data/templates/project/screen.sass

@@ -1,50 +1,26 @@
-@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
+// Configure grid coordinates
+$grid-columns: 24
+$grid-width: 30px
+$grid-gutter-width: 10px
 
 @import grid-coordinates
 
-@include grid-coordinates
++grid-coordinates
 
 #header, #page, #footer
   @extend .grid-container
-
-#brand
-  @extend .grid-3
-
-#nav
-  @extend .grid-9
-
-#page-body
-  @extend .grid-8
-  &.wide
-    @extend .grid-full
-
-#page-sidebar
-  @extend .grid-4
-
-#footer .content
-  @extend .grid-full
-
-.common
-  background: #444
-  color: #fff
-  margin-bottom: 20px
-  text-align: center
-  
-#brand, #nav, #page-body, #page-sidebar, #footer .content
-  @extend .common
-
-#brand, #nav, #footer .content
-  line-height: 100px
-
-#page-body, #page-sidebar
-  line-height: 400px
+  +box-sizing(border-box)
+
+#header
+  h1
+    @extend .grid-6
+    @extend .grid-suffix-2
+  #nav-main
+    @extend .grid-16
+
+#page
+  #content
+    @extend .grid-17
+    @extend .grid-suffix-1
+  #sidebar
+    @extend .grid-6

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: grid-coordinates
 version: !ruby/object:Gem::Version 
-  hash: 7
+  hash: 19
   prerelease: false
   segments: 
   - 1
+  - 1
   - 0
-  - 8
-  version: 1.0.8
+  version: 1.1.0
 platform: ruby
 authors: 
 - Adam Stacoviak