grid-coordinates 1.0.5 → 1.0.6

data/README.mdown

@@ -1,43 +1,45 @@
 # Grid Coordinates - Sass CSS Grid Framework Generator (Compass Extension)
 
-Grid Coordinates is a [Sass](http://sass-lang.com/) mixin inspired by Tyler Tate's [1kb CSS Grid](http://1kbgrid.com/) project.
+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 pretty simple, yet very complex. It sets up the styles for your CSS grid framework and supports nested grids as well. It's also able to generate the CSS styles for a grid of any dimension - you control the coordinates and it generates the styles.
+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.
 
 ## Installation
 
-You will need to install this to your specified Compass extensions directory. See the Compass documentation on extensions for more details: [http://compass-style.org/docs/tutorials/extensions/](http://compass-style.org/docs/tutorials/extensions/)
+`sudo gem install grid-coordinates`
+
+Add `require 'grid-coordinates'` to your Compass config file.
 
 ## Usage
 
-The default grid dimensions are set to create a 960px wide grid with 12 columns at 60px each with a 20px gutter.
+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.
 
-See `templates/project/screen.sass` for an example.
+Use [1kbgrid.com](http://1kbgrid.com) or another grid generator for guidance on the various grid coordinates possible.
 
-Start your project by adding grid-coordinates to your `extensions` directory in your sass folder.
+See `templates/project/screen.sass` for an example.
 
 ### Configure as needed and import
 
     //  Configure grid coordinates
-    $grid-columns: 12
-    $grid-pixels: 60px
+    $grid-columns: 16
+    $grid-pixels: 40px
     $grid-gutter-width: 20px
     
-    @import extensions/grid-coordinates
+    @import grid-coordinates
 
 ### Available mixins
 
-`grid-container`
+`@include grid-container`
 
-`nested-grid-container`
+`@include nested-grid-container`
 
-`grid($grid-columns)`
+`@include grid($grid-columns)`
 
-`grid-prefix($grid-columns)`
+`@include grid-prefix($grid-columns)`
 
-`grid-suffix($grid-columns)`
+`@include grid-suffix($grid-columns)`
 
-`grid-full`
+`@include grid-full`
 
 ## License
 

data/VERSION

@@ -1 +1 @@
-1.0.5
+1.0.6

data/lib/grid-coordinates.rb

@@ -1,2 +1,2 @@
 # path from the library file to where you're keeping your compass stuff.
-Compass::Frameworks.register("css-lightbox", :path => "#{File.dirname(__FILE__)}/..")
+Compass::Frameworks.register("grid-coordinates", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_grid-coordinates.scss

@@ -1,11 +1,3 @@
-//  --------------------------------------------------------------------------------
-//  Grid Coordinates was inspired by Tyler Tate's 1kb CSS Grid project (1kbgrid.com)
-//  --------------------------------------------------------------------------------
-//  The default grid is 960px wide, 12 columns at 60px each with a 20px gutter.
-//
-//  Set the 3 variables below to define your grid coordinates.
-//  Use 1kbgrid.com as a guide to the various grid coordinates possible.
-
 @import "compass/utilities";
 
 //  How many grid columns would you like?

data/templates/project/index.haml

@@ -0,0 +1,19 @@
+!!! Strict
+%html
+  %head
+    %title Grid Coordinates - Sample
+    %link{:href => "screen.css", :media => "all", :rel => "stylesheet", :type => "text/css"}
+  %body{:id => body_id, :class => body_class}
+    #header
+      #brand
+        %p brand
+      #nav
+        %p nav
+    #page
+      #page-body
+        %p page-body
+      #page-sidebar
+        %p page-sidebar
+    #footer
+      #footer-body
+        %p footer

data/templates/project/screen.css

@@ -0,0 +1,71 @@
+body {
+  font: bold 14px helvetica, arial, sans-serif;
+  padding-top: 20px;
+}
+
+#header, #page, #footer {
+  margin: 0 auto;
+  overflow: hidden;
+  width: 960px;
+}
+
+#brand {
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+  width: 300px;
+}
+
+#nav {
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+  width: 620px;
+}
+
+#page-body {
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+  width: 620px;
+}
+#page-body.wide {
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+  width: 940px;
+}
+
+#page-sidebar {
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+  width: 300px;
+}
+
+#footer-body {
+  display: inline;
+  float: left;
+  margin: 0 10px;
+  overflow: hidden;
+  width: 940px;
+}
+
+.common, #brand, #nav, #footer-body, #page-body, #page-body.wide, #page-sidebar {
+  background: #dddddd;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+#brand, #nav, #footer-body {
+  line-height: 100px;
+}
+
+#page-body, #page-body.wide, #page-sidebar {
+  line-height: 400px;
+}

data/templates/project/screen.sass

@@ -1,14 +1,20 @@
+@import compass
+
 //  Configure grid coordinates
 $grid-columns: 12
 $grid-pixels: 60px
 $grid-gutter-width: 20px
 
-@import path/to/grid-coordinates
+@import grid-coordinates
+
+body
+  font: bold 14px helvetica, arial, sans-serif
+  padding-top: 20px
 
 #header, #page, #footer
   @include grid-container
 
-#header
+#brand
   @include grid(4)
 
 #nav
@@ -17,7 +23,23 @@ $grid-gutter-width: 20px
 #page-body
   @include grid(8)
   &.wide
-    @include grid(12)
+    @include grid-full
 
 #page-sidebar
-  @include grid(4)
+  @include grid(4)
+
+#footer-body
+  @include grid-full
+
+.common
+  background: #ddd
+  margin-bottom: 20px
+  text-align: center
+  
+#brand, #nav, #footer-body
+  @extend .common
+  line-height: 100px
+
+#page-body, #page-sidebar
+  @extend .common
+  line-height: 400px

metadata

@@ -1,12 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: grid-coordinates
 version: !ruby/object:Gem::Version 
+  hash: 27
   prerelease: false
   segments: 
   - 1
   - 0
-  - 5
-  version: 1.0.5
+  - 6
+  version: 1.0.6
 platform: ruby
 authors: 
 - Adam Stacoviak
@@ -21,9 +22,11 @@ dependencies:
   name: compass
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
+        hash: 63
         segments: 
         - 0
         - 10
@@ -44,7 +47,9 @@ files:
 - VERSION
 - lib/grid-coordinates.rb
 - stylesheets/_grid-coordinates.scss
+- templates/project/index.haml
 - templates/project/manifest.rb
+- templates/project/screen.css
 - templates/project/screen.sass
 has_rdoc: true
 homepage: http://adamstacoviak.com/
@@ -56,23 +61,27 @@ rdoc_options: []
 require_paths: 
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
+      hash: 3
       segments: 
       - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
+      hash: 3
       segments: 
       - 0
       version: "0"
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.3.6
+rubygems_version: 1.3.7
 signing_key: 
 specification_version: 3
 summary: A Sass CSS Grid Framework Generator