gridgraphy 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e7e9a38002ff8f81ddd6d90a1fc8d6d3ba0333b6
+  data.tar.gz: 51460817a1ca9829d4b633d64ba6b8b0c1dbf9fe
+SHA512:
+  metadata.gz: 49ce16f47b85644c5443393c5bd45a3d3fbb2ca22d19cb59d3d2a74eeafd84b03f65c5b992d123a7a15d4a270e49ea68e6e156125341e95abe42b8dfdfbc1031
+  data.tar.gz: 37af0ec50805cb329d6d918c8308b37ba6ca6e72864e5a9e06eda2bcab4ff2bfe8e7ed53e8d9aab8966e4b74674eefbb9d51d15322a2e2260592b24d9e1744d6

data/.gitignore

@@ -0,0 +1,19 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+*.sassc
+.sass-cache

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in gridgraphy.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Jason Bellamy
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# Gridgraphy
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'gridgraphy'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install gridgraphy
+
+## Usage
+
+TODO: Write usage instructions here
+
+## 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

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/gridgraphy.gemspec

@@ -0,0 +1,21 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'gridgraphy/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "gridgraphy"
+  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.homepage      = "https://github.com/jasonbellamy/gridgraphy"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "compass", [">= 0.12.2"]
+  spec.add_dependency "sass", [">= 3.2.0"]
+end

data/lib/gridgraphy/version.rb

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

data/lib/gridgraphy.rb

@@ -0,0 +1,9 @@
+require "gridgraphy/version"
+require 'compass'
+
+Compass::Frameworks.register('gridgraphy',
+                             :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'stylesheets'),
+                             :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
+
+
+Sass::Script::Number.precision = 7

data/stylesheets/_gridgraphy.sass

@@ -0,0 +1,2 @@
+@import gridgraphy/grids/base/functions
+@import gridgraphy/grids/base/mixins

data/stylesheets/gridgraphy/_scaffolding.sass

@@ -0,0 +1,34 @@
+@import config/config
+
+@import grids/base/functions
+@import grids/base/mixins
+
+.#{$grid-namespace-base}-#{$grid-namespace-row}
+  @include grid-row( 100% )
+
+.#{$grid-namespace-base}-#{$grid-namespace-row}-nested
+  @include grid-row-nested( $grid-type )
+
+[class^="#{$grid-namespace-base}-#{$grid-namespace-column}"]
+  @include grid-column-base()
+  @include grid-column-gutter( $grid-type )
+
+@for $i from 1 to $grid-column-count + 1
+  .#{$grid-namespace-base}-#{$grid-namespace-column}-#{$i}
+    @include grid-column-width( $i, $grid-type )
+
+@for $i from 1 to $grid-column-count + 1
+  .pushed-by-#{$i}
+    @include grid-column-push( $i, $grid-type )
+
+@for $i from 1 to $grid-column-count + 1
+  .pulled-by-#{$i}
+    @include grid-column-pull( $i, $grid-type )
+
+@for $i from 1 to $grid-column-count + 1
+  .offset-right-by-#{$i}
+    @include grid-column-offset-right( $i, $grid-type )
+
+@for $i from 1 to $grid-column-count + 1
+  .offset-left-by-#{$i}
+    @include grid-column-offset-left( $i, $grid-type )

data/stylesheets/gridgraphy/config/_config.sass

@@ -0,0 +1,12 @@
+// set inital grid values
+$grid-type: 'full' !default
+$grid-max-width: 960px !default
+$grid-gutter-width: 20px !default
+$grid-column-count: 12 !default
+$grid-column-width: $grid-max-width / $grid-column-count !default
+
+$grid-namespace-base: 'grid' !default
+$grid-namespace-row: 'row' !default
+$grid-namespace-column: 'column' !default
+
+$grid-show: false !default

data/stylesheets/gridgraphy/grids/base/_functions.sass

@@ -0,0 +1,52 @@
+// The (base) functions below provide a consistent interface to develop with regardless of which grid type is being used.
+
+
+// @imports
+@import ../../config/config
+@import ../../utils/functions
+@import ../types/right/functions
+@import ../types/center/functions
+@import ../types/left/functions
+@import ../types/full/functions
+
+
+// Determines a grid column width.
+// @param $columns [Integer] Number of columns to span.
+// @param $type [String] The type of grid being used.
+// @return [Integer] The grid column width.
+@function grid-column-width( $columns, $type: $grid-type )
+  @if $type == 'right'
+    @return right-grid-column-width( $columns )
+  @if $type == 'center'
+    @return center-grid-column-width( $columns )
+  @if $type == 'left'
+    @return left-grid-column-width( $columns )
+  @if $type == 'full'
+    @return full-grid-column-width( $columns )
+
+// Determines a grid column offset.
+// @param $columns [Integer] Number of columns to offset by.
+// @param $type [String] The type of grid being used.
+// @return [Integer] The grid column offset.
+@function grid-column-offset( $columns, $type: $grid-type )
+  @if $type == 'right'
+    @return right-grid-column-offset( $columns )
+  @if $type == 'center'
+    @return center-grid-column-offset( $columns )
+  @if $type == 'left'
+    @return left-grid-column-offset( $columns )
+  @if $type == 'full'
+    @return full-grid-column-offset( $columns )
+
+// Determines a grid column gutter width.
+// @param $type [String] The type of grid being used.
+// @return [Integer] The grid column gutter width.
+@function grid-column-gutter( $type: $grid-type )
+  @if $type == 'right'
+    @return right-grid-column-gutter()
+  @if $type == 'center'
+    @return center-grid-column-gutter()
+  @if $type == 'left'
+    @return left-grid-column-gutter()
+  @if $type == 'full'
+    @return full-grid-column-gutter()

data/stylesheets/gridgraphy/grids/base/_mixins.sass

@@ -0,0 +1,137 @@
+// The (base) mixins below provide a consistent interface to develop with regardless of which grid type is being used.
+
+// @imports
+@import compass/css3/box-sizing
+@import ../../config/config
+@import ../../utils/mixins
+@import ../types/right/mixins
+@import ../types/center/mixins
+@import ../types/left/mixins
+@import ../types/full/mixins
+
+
+// Output the grid row properties for a top level row.
+// @param $max-width The max width this specfic grid row should span.
+@mixin grid-row( $max-width: $grid-max-width )
+  @include grid-clear()
+  width: 100%
+  max-width: $max-width
+  margin-left: auto
+  margin-right: auto
+  @if $grid-show
+    background-color: rgb( 235, 235, 235 )
+    margin-bottom: 5px
+    > *
+      background-color: rgb( 205, 205, 205 )
+
+// Output the grid row properties for a nested row.
+// @param $type [String] The type of grid being used.
+@mixin grid-row-nested( $type: $grid-type )
+  @include grid-clear()
+  width: auto
+  min-width: 0
+  max-width: none
+  @if $type == 'left'
+    @include left-grid-row-nested()
+  @if $type == 'center'
+    @include center-grid-row-nested()
+  @if $type == 'right'
+    @include right-grid-row-nested()
+  @if $type == 'full'
+    @include full-grid-row-nested()
+  @if $grid-show
+    background-color: rgb( 235, 235, 235 )
+    > *
+      background-color: rgb( 155, 155, 155 )
+
+// Output a complete set of properties for a grid column.
+// @param [Integer] Number of columns to span.
+// @param $type [String] The type of grid being used.
+@mixin grid-column( $columns: 0, $type: $grid-type )
+  @include grid-column-base()
+  @include grid-column-width( $columns, $type )
+  @include grid-column-gutter( $type )
+
+// Output base properties for a grid column.
+@mixin grid-column-base()
+  @include box-sizing( border-box )
+  float: left
+  overflow: hidden
+  position: relative
+
+// Output the width property of a grid column.
+// @param [Integer] Number of columns to span.
+// @param $type [String] The type of grid being used.
+@mixin grid-column-width( $columns, $type: $grid-type )
+  @if $type == 'right'
+    @include right-grid-column-width( $columns )
+  @if $type == 'center'
+    @include center-grid-column-width( $columns )
+  @if $type == 'left'
+    @include left-grid-column-width( $columns )
+  @if $type == 'full'
+    @include full-grid-column-width( $columns )
+
+// Output the gutter properties of a grid column.
+// @param $type [String] The type of grid being used.
+@mixin grid-column-gutter( $type: $grid-type )
+  @if $type == 'right'
+    @include right-grid-column-gutter()
+  @if $type == 'center'
+    @include center-grid-column-gutter()
+  @if $type == 'left'
+    @include left-grid-column-gutter()
+  @if $type == 'full'
+    @include full-grid-column-gutter()
+
+// Output properties for a right offset grid column.
+// @param [Integer] Number of columns to offset by.
+// @param $type [String] The type of grid being used.
+@mixin grid-column-offset-right( $columns, $type: $grid-type )
+  @if $type == 'right'
+    @include right-grid-column-offset-right( $columns )
+  @if $type == 'center'
+    @include center-grid-column-offset-right( $columns )
+  @if $type == 'left'
+    @include left-grid-column-offset-right( $columns )
+  @if $type == 'full'
+    @include full-grid-column-offset-right( $columns )
+
+// Output properties for a left offset grid column.
+// @param [Integer] Number of columns to offset by.
+// @param $type [String] The type of grid being used.
+@mixin grid-column-offset-left( $columns, $type: $grid-type )
+  @if $type == 'right'
+    @include right-grid-column-offset-left( $columns )
+  @if $type == 'center'
+    @include center-grid-column-offset-left( $columns )
+  @if $type == 'left'
+    @include left-grid-column-offset-left( $columns )
+  @if $type == 'full'
+    @include full-grid-column-offset-left( $columns )
+
+// Output properties to push a grid column.
+// @param [Integer] Number of columns to push by.
+// @param $type [String] The type of grid being used.
+@mixin grid-column-push( $columns, $type: $grid-type )
+  @if $type == 'right'
+    @include right-grid-column-push( $columns )
+  @if $type == 'center'
+    @include center-grid-column-push( $columns )
+  @if $type == 'left'
+    @include left-grid-column-push( $columns )
+  @if $type == 'full'
+    @include full-grid-column-push( $columns )
+
+// Output properties to pull a grid column.
+// @param [Integer] Number of columns to pull by.
+// @param $type [String] The type of grid being used.
+@mixin grid-column-pull( $columns, $type: $grid-type )
+  @if $type == 'right'
+    @include right-grid-column-pull( $columns )
+  @if $type == 'center'
+    @include center-grid-column-pull( $columns )
+  @if $type == 'left'
+    @include left-grid-column-pull( $columns )
+  @if $type == 'full'
+    @include full-grid-column-pull( $columns )

data/stylesheets/gridgraphy/grids/types/center/_functions.sass

@@ -0,0 +1,19 @@
+// Center grid functions
+
+
+// Determines a grid column width.
+// @param $columns [Integer] Number of columns to span.
+// @return [Integer] The grid column width.
+@function center-grid-column-width( $columns )
+  @return px-to-percent( $columns * $grid-column-width - $grid-gutter-width, $grid-max-width )
+
+// Determines a grid column offset.
+// @param $columns [Integer] Number of columns to offset by.
+// @return [Integer] The grid column offset.
+@function center-grid-column-offset( $columns )
+  @return px-to-percent( $columns * $grid-column-width + $grid-gutter-width / 2, $grid-max-width )
+
+// Determines a grid column gutter width.
+// @return [Integer] The grid column gutter width.
+@function center-grid-column-gutter()
+  @return px-to-percent( $grid-gutter-width / 2, $grid-max-width )

data/stylesheets/gridgraphy/grids/types/center/_mixins.sass

@@ -0,0 +1,37 @@
+// Center grid mixins
+
+
+// Output the grid row properties for a nested row.
+@mixin center-grid-row-nested
+  margin-right: -(center-grid-column-gutter())
+  margin-left: -(center-grid-column-gutter())
+
+// Output the width property of a grid column.
+// @param [Integer] Number of columns to span.
+@mixin center-grid-column-width( $columns )
+  width: center-grid-column-width( $columns )
+
+// Output the gutter properties of a grid column.
+@mixin center-grid-column-gutter
+  margin-right: center-grid-column-gutter()
+  margin-left: center-grid-column-gutter()
+
+// Output properties for a right offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin center-grid-column-offset-right( $columns )
+  margin-right: center-grid-column-offset( $columns )
+
+// Output properties for a left offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin center-grid-column-offset-left( $columns )
+  margin-left: center-grid-column-offset( $columns )
+
+// Output properties to push a grid column.
+// @param [Integer] Number of columns to push by.
+@mixin center-grid-column-push( $columns )
+  left: center-grid-column-width( $columns ) + center-grid-column-gutter() * 2
+
+// Output properties to pull a grid column.
+// @param [Integer] Number of columns to pull by.
+@mixin center-grid-column-pull( $columns )
+  right: center-grid-column-width( $columns ) + center-grid-column-gutter() * 2

data/stylesheets/gridgraphy/grids/types/full/_functions.sass

@@ -0,0 +1,19 @@
+// Full grid functions
+
+
+// Determines a grid column width.
+// @param $columns [Integer] Number of columns to span.
+// @return [Integer] The grid column width.
+@function full-grid-column-width( $columns )
+  @return px-to-percent( ($columns * $grid-column-width), $grid-max-width )
+
+// Determines a grid column offset.
+// @param $columns [Integer] Number of columns to offset by.
+// @return [Integer] The grid column offset.
+@function full-grid-column-offset( $columns )
+  @return px-to-percent( ($columns * $grid-column-width), $grid-max-width )
+
+// Determines a grid column gutter width.
+// @return [Integer] The grid column gutter width.
+@function full-grid-column-gutter()
+  @return px-to-percent( $grid-gutter-width, $grid-max-width )

data/stylesheets/gridgraphy/grids/types/full/_mixins.sass

@@ -0,0 +1,35 @@
+// Full grid mixins
+
+
+// Output the grid row properties for a nested row.
+@mixin full-grid-row-nested
+
+// Output the width property of a grid column.
+// @param [Integer] Number of columns to span.
+@mixin full-grid-column-width( $columns )
+  width: full-grid-column-width( $columns )
+
+// Output the gutter properties of a grid column.
+@mixin full-grid-column-gutter
+  margin-right: 0
+  margin-left: 0
+
+// Output properties for a right offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin full-grid-column-offset-right( $columns )
+  margin-right: full-grid-column-offset( $columns )
+
+// Output properties for a left offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin full-grid-column-offset-left( $columns )
+  margin-left: full-grid-column-offset( $columns )
+
+// Output properties to push a grid column.
+// @param [Integer] Number of columns to push by.
+@mixin full-grid-column-push( $columns )
+  left: full-grid-column-width( $columns )
+
+// Output properties to pull a grid column.
+// @param [Integer] Number of columns to pull by.
+@mixin full-grid-column-pull( $columns )
+  right: full-grid-column-width( $columns )

data/stylesheets/gridgraphy/grids/types/left/_functions.sass

@@ -0,0 +1,19 @@
+// Left grid functions
+
+
+// Determines a grid column width.
+// @param $columns [Integer] Number of columns to span.
+// @return [Integer] The grid column width.
+@function left-grid-column-width( $columns )
+  @return px-to-percent( ($columns * $grid-column-width) - ($grid-gutter-width * 2), $grid-max-width )
+
+// Determines a grid column offset.
+// @param $columns [Integer] Number of columns to offset by.
+// @return [Integer] The grid column offset.
+@function left-grid-column-offset( $columns )
+  @return px-to-percent( ($columns * $grid-column-width) + $grid-gutter-width, $grid-max-width )
+
+// Determines a grid column gutter width.
+// @return [Integer] The grid column gutter width.
+@function left-grid-column-gutter()
+  @return px-to-percent( $grid-gutter-width, $grid-max-width )

data/stylesheets/gridgraphy/grids/types/left/_mixins.sass

@@ -0,0 +1,36 @@
+// Left grid mixins
+
+
+// Output the grid row properties for a nested row.
+@mixin left-grid-row-nested
+  margin-right: -(left-grid-column-gutter())
+  margin-left: -(left-grid-column-gutter())
+
+// Output the width property of a grid column.
+// @param [Integer] Number of columns to span.
+@mixin left-grid-column-width( $columns )
+  width: left-grid-column-width( $columns ) + left-grid-column-gutter()
+
+// Output the gutter properties of a grid column.
+@mixin left-grid-column-gutter
+  margin-left: left-grid-column-gutter()
+
+// Output properties for a right offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin left-grid-column-offset-right( $columns )
+  margin-right: left-grid-column-offset( $columns ) - left-grid-column-gutter()
+
+// Output properties for a left offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin left-grid-column-offset-left( $columns )
+  margin-left: left-grid-column-offset( $columns )
+
+// Output properties to push a grid column.
+// @param [Integer] Number of columns to push by.
+@mixin left-grid-column-push( $columns )
+  left: left-grid-column-width( $columns ) + (left-grid-column-gutter() * 2)
+
+// Output properties to pull a grid column.
+// @param [Integer] Number of columns to pull by.
+@mixin left-grid-column-pull( $columns )
+  right: left-grid-column-width( $columns ) + (left-grid-column-gutter() * 2)

data/stylesheets/gridgraphy/grids/types/right/_functions.sass

@@ -0,0 +1,19 @@
+// Right grid functions
+
+
+// Determines a grid column width.
+// @param $columns [Integer] Number of columns to span.
+// @return [Integer] The grid column width.
+@function right-grid-column-width( $columns )
+  @return px-to-percent( ($columns * $grid-column-width) - ($grid-gutter-width * 2), $grid-max-width )
+
+// Determines a grid column offset.
+// @param $columns [Integer] Number of columns to offset by.
+// @return [Integer] The grid column offset.
+@function right-grid-column-offset( $columns )
+  @return px-to-percent( ($columns * $grid-column-width) + $grid-gutter-width, $grid-max-width )
+
+// Determines a grid column gutter width.
+// @return [Integer] The grid column gutter width.
+@function right-grid-column-gutter()
+  @return px-to-percent( $grid-gutter-width, $grid-max-width )

data/stylesheets/gridgraphy/grids/types/right/_mixins.sass

@@ -0,0 +1,36 @@
+// Right grid mixins
+
+
+// Output the grid row properties for a nested row.
+@mixin right-grid-row-nested
+  margin-right: -(right-grid-column-gutter())
+  margin-left: -(right-grid-column-gutter())
+
+// Output the width property of a grid column.
+// @param [Integer] Number of columns to span.
+@mixin right-grid-column-width( $columns )
+  width: right-grid-column-width( $columns ) + right-grid-column-gutter()
+
+// Output the gutter properties of a grid column.
+@mixin right-grid-column-gutter
+  margin-right: right-grid-column-gutter()
+
+// Output properties for a right offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin right-grid-column-offset-right( $columns )
+  margin-right: right-grid-column-offset( $columns )
+
+// Output properties for a left offset grid column.
+// @param [Integer] Number of columns to offset by.
+@mixin right-grid-column-offset-left( $columns )
+  margin-left: right-grid-column-offset( $columns ) - right-grid-column-gutter()
+
+// Output properties to push a grid column.
+// @param [Integer] Number of columns to push by.
+@mixin right-grid-column-push( $columns )
+  left: right-grid-column-width( $columns ) + (right-grid-column-gutter() * 2)
+
+// Output properties to pull a grid column.
+// @param [Integer] Number of columns to pull by.
+@mixin right-grid-column-pull( $columns )
+  right: right-grid-column-width( $columns ) + (right-grid-column-gutter() * 2)

data/stylesheets/gridgraphy/utils/_functions.sass

@@ -0,0 +1,2 @@
+@function px-to-percent( $target, $context )
+  @return $target / $context * 100%

data/stylesheets/gridgraphy/utils/_mixins.sass

@@ -0,0 +1,9 @@
+@mixin grid-clear()
+  *zoom: 1
+  &:before,
+  &:after
+    content: ''
+    display: table
+  &:after
+    clear: both
+

data/templates/example/examples/center/config/_config.sass

@@ -0,0 +1,13 @@
+// grid type & size
+$grid-type: 'center'
+$grid-max-width: 960px
+$grid-gutter-width: 20px
+$grid-column-count: 12
+
+// grid generated class names
+$grid-namespace-base: 'grid'
+$grid-namespace-row: 'row'
+$grid-namespace-column: 'column'
+
+// style the grid (useful for debugging layouts)
+$grid-show: true