gridgraphy 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e7e9a38002ff8f81ddd6d90a1fc8d6d3ba0333b6
-  data.tar.gz: 51460817a1ca9829d4b633d64ba6b8b0c1dbf9fe
+  metadata.gz: ef50f8da520103a7c8743d9008b399f5dfcc0066
+  data.tar.gz: 23935e6e9f1ed171235aa4b0b1ad73245b303186
 SHA512:
-  metadata.gz: 49ce16f47b85644c5443393c5bd45a3d3fbb2ca22d19cb59d3d2a74eeafd84b03f65c5b992d123a7a15d4a270e49ea68e6e156125341e95abe42b8dfdfbc1031
-  data.tar.gz: 37af0ec50805cb329d6d918c8308b37ba6ca6e72864e5a9e06eda2bcab4ff2bfe8e7ed53e8d9aab8966e4b74674eefbb9d51d15322a2e2260592b24d9e1744d6
+  metadata.gz: a8600895f8f4a5a90022f3c234c9fe813446033f07a2061afae83df8147eb86eea259f10689180fab09deee4d362bd16b8f0e7e9fe7ceede53d73faa5aaaea42
+  data.tar.gz: 638b295cb493b98ff9362edebed04e4fae1a74e5094bb2973791a34d1a48ff564795fded1855204d7c5267f836469b67d8506d2fde9caf2fd9b576c181cade2f

data/README.md

@@ -1,29 +1,285 @@
-# Gridgraphy
+# About
 
-TODO: Write a gem description
+Gridgraphy is a highly configurable, and incredibly flexible [Compass](http://compass-style.org/) extension
+that enables you to quickly and easily build semantic CSS grids. Whether you're developing a small single page site or architecting a large scale responsive grid system, Gridgraphy will help you get the job done faster.
 
-## Installation
 
-Add this line to your application's Gemfile:
+- [Installation](#installation)
+- [Getting Started](#getting-started)
+- [Types](#types)
+- [Mixins](#mixins)
+- [Functions](#functions)
+- [Demo](#demo)
 
-    gem 'gridgraphy'
 
-And then execute:
+# Installation
 
-    $ bundle
+Install Gridgraphy by running the following from the command line:
 
-Or install it yourself as:
+```bash
+$ gem install gridgraphy
+```
+Once Gridgraphy is installed you can either create a new Compass project based on Gridgraphy by running the following from the command line:
 
-    $ gem install gridgraphy
+```bash
+$ compass create <project_name> -r gridgraphy -u gridgraphy
+```
 
-## Usage
+Or you can add Gridgraphy to an existing Compass project by adding the following to your projects **config.rb**:
 
-TODO: Write usage instructions here
+```ruby
+require 'gridgraphy'
+```
 
-## Contributing
 
-1. Fork it
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Add some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create new Pull Request
+# Getting Started
+
+## Basic
+
+You can import the Gridgraphy extension by adding the following line to one of your [Sass/SCSS](http://sass-lang.com/) stylesheet(s):
+
+```scss
+@import gridgraphy
+```
+
+### Configurable Variables
+
+You can mix and match different configurations to acheive the exact type of grid you need.
+
+- **$grid-type** [default: **full**] - The [type](#types) of grid. [[full](#full-grid), [right](#right-grid), [center](#center-grid), [left](#left-grid)]
+- **$grid-max-width** [default: **960px**] - The maximum width of the grid in px.
+- **$grid-gutter-width** [default: **20px**] - The gutter spacing in px between columns.
+- **$grid-column-count** [default: **12**] - The total number of columns in the grid.
+- **$grid-show** [default: **false**] - Set ```true``` to highlight the grid row & columns.
+
+**That's it!** You now have access to all of the mixins and functions that Gridgraphy provides.
+
+
+---
+
+## Scaffolding
+
+Scaffolding is a quick way to generate classes for a grid. If you plan on adding your grid classes directly to your markup
+or want to export a pre-made grid as part of an external library, scaffolding can save you a ton of time.
+
+You can create a new compass project using scaffolding by running:
+
+```bash
+$ compass create <project_name> -r gridgraphy -u gridgraphy/scaffolding
+```
+
+Or you can add scaffolding to an existing project by adding the following line to any of your [Sass/SCSS](http://sass-lang.com/) stylesheet(s):
+
+```scss
+@import gridgraphy/scaffolding
+```
+
+### Configurable Variables
+
+- **$grid-namespace-base** [default: **grid**] - The name of the prefix that will be used for the grids row & columns class.
+- **$grid-namespace-row** [default: **row**] - The name of the suffix that will be used for the grids row class.
+- **$grid-namespace-column** [default: **column**] - The name of the suffix that will be used for the grids column class.
+
+
+# Types
+Gridgraphy ships with **4** different types of grid layouts. By default grids are created using the value you've set for the ```$grid-type``` [configuration variable](#configurable-variables), but can be set manually on each ```grid-*``` mixin or function.
+
+## Full Grid
+The full grid type does not have a gutter between columns.
+
+## Right Grid
+The right grid type has its gutter distributed to the right side of each column.
+
+## Center Grid
+The center grid type has its gutter split in half and evenly distributed to both sides of each column.
+
+## Left Grid
+The left grid type has its gutter distributed the the left side of each column.
+
+
+# Mixins
+
+#### grid-row($max-width)
+Sets an element as the container for your columns.
+
+- **$max-width** [default: **$grid-max-width**] - The maximum width in pixels the row should span.
+
+```sass
+.grid-row
+    @include grid-row(960px)
+```
+
+***
+
+#### grid-row-nested($type)
+Sets an element as the container for your columns inside another column.
+
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-row
+    @include grid-row-nested(left)
+```
+
+***
+
+#### grid-column($columns, $type)
+Sets **all** the properties of a column.
+
+- **$columns** - The number of columns to span in the row.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+    @include grid-column(6)
+```
+
+***
+
+#### grid-column-width($columns, $type)
+Set **only the width** of a column.
+
+**Note:** This mixin is called automatically when using the ```grid-column()``` mixin. You'll probably only want to use this directly if you need to keep your selectors very DRY.
+
+- **$columns** - The number of columns to span in the row.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+    @include grid-column-width(6)
+```
+
+***
+
+#### grid-column-base()
+Set **only the base** properties of a column.
+
+**Note:** This mixin is called automatically when using the ```grid-column()``` mixin. You'll probably only want to use this directly if you need to keep your selectors very DRY.
+
+
+```sass
+[class^="grid-column-"]
+  @include grid-column-base()
+
+.grid-column-1
+    @include grid-column-gutter(4)
+
+.grid-column-2
+    @include grid-column-gutter(8)
+```
+
+***
+
+#### grid-column-gutter($columns, $type)
+Set **only the gutter** properties of a column.
+
+**Note:** This mixin is called automatically when using the ```grid-column()``` mixin. You'll probably only want to use this directly if you need to keep your selectors very DRY.
+
+- **$columns** - The number of columns to span in the row.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+    @include grid-column-gutter(6)
+```
+
+***
+
+#### grid-column-offset-right($columns, $type)
+Sets **all** the properties to offset the column from the right. *(prepends empty columns)*
+
+- **$columns** - The number of columns to offset by.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+    @include grid-column-offest-right(6)
+```
+
+***
+
+#### grid-column-offset-left($columns, $type)
+Sets **all** the properties to offset the column from the left. *(appends empty columns)*
+
+- **$columns** - The number of columns to offset by.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+    @include grid-column-offest-left(6)
+```
+
+***
+
+#### grid-column-push($columns, $type)
+Sets **all** the properties to push the column from the left. *(moves the column without affecting surrounding elements)*
+
+- **$columns** - The number of columns to push by.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+    @include grid-column-push(6)
+```
+
+***
+
+#### grid-column-pull($columns, $type)
+Sets **all** the properties to pull the column towards the left. *(moves the column without affecting surrounding elements)*
+
+- **$columns** - The number of columns to pull by.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+    @include grid-column-pull(6)
+```
+
+
+# Functions
+
+#### grid-column-width($columns, $type)
+Returns the unitless (percentage based) width of a column.
+
+- **$columns** - The number of columns to take up in a row.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+  width: #{grid-column-width(12)}%
+```
+
+***
+
+#### grid-column-offset($columns, $type)
+Returns the unitless (percentage based) offset width of a column.
+
+- **$columns** - The number of columns to offset by.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+  left: #{grid-column-offset(12)}%
+```
+
+***
+
+#### grid-column-gutter($columns, $type)
+Returns the unitless (percentage based) gutter width of a column.
+
+- **$columns** - The number of columns to span in the row.
+- **$type** [default: **$grid-type**] - The [type](#types) of grid to be used.
+
+```sass
+.grid-column
+  margin-left: #{grid-column-gutter(12)}%
+```
+
+# Demo
+
+Run the following from the command line to build a demo project of the different types of grids provided.
+
+```bash
+$ compass create <project_name> -r gridgraphy -u gridgraphy/example
+```
+

data/gridgraphy.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
   spec.version       = Gridgraphy::VERSION
   spec.authors       = ["Jason Bellamy"]
   spec.email         = ["j@sonbellamy.com"]
-  spec.description   = "An unobtrusive Compass/SASS grid framework"
-  spec.summary       = "GridGraphy is an open source grid framework that stays out of the way and lets you get things done \"your way\""
+  spec.summary       = "Gridgraphy is a highly configurable, and incredibly flexible Compass extension that enables you to quickly and easily build semantic CSS grids."
+  spec.description   = "Whether you're developing a small single page site or architecting a large scale responsive grid system, Gridgraphy will help you get the job done faster."
   spec.homepage      = "https://github.com/jasonbellamy/gridgraphy"
   spec.license       = "MIT"
 

data/lib/gridgraphy/version.rb

@@ -1,3 +1,3 @@
 module Gridgraphy
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: gridgraphy
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Jason Bellamy
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-27 00:00:00.000000000 Z
+date: 2013-06-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -38,7 +38,8 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: 3.2.0
-description: An unobtrusive Compass/SASS grid framework
+description: Whether you're developing a small single page site or architecting a
+  large scale responsive grid system, Gridgraphy will help you get the job done faster.
 email:
 - j@sonbellamy.com
 executables: []
@@ -58,18 +59,14 @@ files:
 - stylesheets/gridgraphy/config/_config.sass
 - stylesheets/gridgraphy/grids/base/_functions.sass
 - stylesheets/gridgraphy/grids/base/_mixins.sass
-- stylesheets/gridgraphy/grids/types/center/.DS_Store
 - stylesheets/gridgraphy/grids/types/center/_functions.sass
 - stylesheets/gridgraphy/grids/types/center/_mixins.sass
-- stylesheets/gridgraphy/grids/types/full/.DS_Store
 - stylesheets/gridgraphy/grids/types/full/_functions.sass
 - stylesheets/gridgraphy/grids/types/full/_mixins.sass
-- stylesheets/gridgraphy/grids/types/left/.DS_Store
 - stylesheets/gridgraphy/grids/types/left/_functions.sass
 - stylesheets/gridgraphy/grids/types/left/_mixins.sass
 - stylesheets/gridgraphy/grids/types/right/_functions.sass
 - stylesheets/gridgraphy/grids/types/right/_mixins.sass
-- stylesheets/gridgraphy/utils/.DS_Store
 - stylesheets/gridgraphy/utils/_functions.sass
 - stylesheets/gridgraphy/utils/_mixins.sass
 - templates/example/examples/center/config/_config.sass
@@ -111,6 +108,6 @@ rubyforge_project:
 rubygems_version: 2.0.3
 signing_key: 
 specification_version: 4
-summary: GridGraphy is an open source grid framework that stays out of the way and
-  lets you get things done "your way"
+summary: Gridgraphy is a highly configurable, and incredibly flexible Compass extension
+  that enables you to quickly and easily build semantic CSS grids.
 test_files: []