crispy-grid 0.1.3

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2011 Christian Peters
+
+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,71 @@
+# Crispy Grid
+
+## Why should I use it?
+
+In short, Crispy Grid closes the gap between easy-to-use grids for
+simple web pages and doing everything by hand due to layout complexity.
+
+### Reason 1: No need for bending CSS layout semantics
+
+CSS grid frameworks like Blueprint and 960.gs try to realize their
+higher level concepts using only margins and relative positioning.
+
+Often, this is in conflict with CSS box semantics.
+In CSS, whitespace surrounding content should be expressed as padding of
+the containing element. Margins should be used for defining whitespace
+among sibling elements. 
+
+A common workaround for paddings and margins within a grid is using inner
+wrapping elements which are save to style. This is unsemantic and
+clutters up the template.
+
+Crispy respects padding and border box properties.
+
+Unlike [Lucid Grid](https://github.com/ezYZ/lucid) (which I recommend as
+an alternative), padding and border width can be set along with the
+column width in one statement. Crispy does the calculation for you.
+
+### Reason 2: There is no problem about being specific
+
+Whenever you try to realize a page that simply does not fit into the
+predefined columns, you are likely to catch yourself fighting with the grid.
+Likewise, most grids are not meant to be applied on more than the big
+containers (navigation, sidebar, main, etc.). Yet it would be nice to
+have a tool for specifying the layout of the inner elements in a smart
+way.
+
+Crispy tries to support you even if you go beyond the main grid.
+
+## Usage
+
+Pending. Please have a look at the source.
+
+## Installation
+
+1. In your Gemfile add:
+
+    gem 'crispy-grid'
+
+2. In your project configuration file (e.g. initializers/compass.rb)
+   add:
+
+    require 'crispy-grid'
+
+3. Customize and import the grid in your application stylesheet:
+
+    // Grid Configuration
+    $grid-column-width: 30px
+    $grid-gutter-width: 10px
+    $grid-columns: 25
+
+    @import crispy-grid
+
+## License
+
+See MIT-LICENSE.
+
+## TODO
+
+- Make use of @extend in order to reduce CSS output
+- Return calculation of inner box width for further use as column width
+  of children

data/lib/crispy-grid.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('crispy-grid', :path => extension_path)

data/stylesheets/_crispy-grid.sass

@@ -0,0 +1,9 @@
+// Crispy Grid Configuration
+//==========================
+
+// Grid Configuration
+$grid-column-width: 30px !default
+$grid-gutter-width: 10px !default
+$grid-columns: 25 !default
+
+@import crispy/grid

data/stylesheets/crispy/_grid.sass

@@ -0,0 +1,126 @@
+// Derived Variables
+//==================
+// Note that the gutter is only between the columns, i.e. you have 1 gutter less than columns
+$grid-gutters: $grid-columns - 1
+// These default settings result in a grid-width of 990 px
+$grid-width: $grid-column-width * $grid-columns + $grid-gutter-width * $grid-gutters
+
+// Public Methods
+//===============
+
+// Main Grid Helper Methods
+//-------------------------
+// $colspan should be the number of grid columns. You can override it with a fixed width if you must.
+// You can also give a $padding and a $border-width, which is applied to both left and right by default.
+// It is ensured that you do not break the grid by setting padding and a border.
+// In order to differentiate between left and right padding/border-width you can set $different-right-padding/-border-width.
+// Example: +grid(4, 10px, 15px) will set padding-left: 10px, padding-right: 15px and the element will have the same overall width as +grid(4).
+// By default, the gutter is represented using margin-right, which can also be overridden.
+=column($colspan, $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $gutter: $grid-gutter-width, $left-gutter: false, $subtract-border-from: false)
+  +column-behavior
+  +column-metrics($colspan, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $gutter, $left-gutter, $subtract-border-from: $subtract-border-from)
+
+// The last column should not have a gutter.
+// Respectively, $gutter defaults to 0 in this mixin.
+=last-column($colspan, $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $gutter: 0, $left-gutter: false, $subtract-border-from: false)
+  +column($colspan, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $gutter, $left-gutter, $subtract-border-from)
+
+// The only difference between the last and other columns is that the last column has margin-right set to 0.
+=last
+  margin-right: 0
+
+// A row spans the whole grid width, i.e. it is the only column in a row. This is just a more elegant way for writing +last-column($grid-columns).
+=row($colspan: $grid-columns, $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $gutter: 0, $left-gutter: false, $subtract-border-from: false)
+  +last-column($colspan, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $gutter, $left-gutter, $subtract-border-from)
+
+// Use this mixin for your (none-floating) grid container.
+// By default, it spans the whole grid-width and is centered.
+// Unlike with columns, paddings and borders of a container do not affect its inner width
+=grid-container($colspan: $grid-columns, $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $left-margin: auto, $right-margin: auto)
+  +column-metrics($colspan, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $right-margin, $left-margin, true)
+  // As this grid system bases on the Float (Nearly) Everything method, this is necessary to enforce the container to enclose its content.
+  overflow: hidden
+
+// Internal Methods
+//=================
+=column-behavior
+  float: left
+
+=column-metrics($column-width, $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $gutter: $grid-gutter-width, $left-gutter: false, $container: false, $subtract-border-from: false)
+  // Convert column counts to widths with unit
+  $column-width: colspan-to-width($column-width)
+  $padding: colspan-to-width($padding, $include-last-gutter: true)
+  $differing-right-padding: colspan-to-width($differing-right-padding, $include-last-gutter: true)
+  $border-width: colspan-to-width($border-width, $include-last-gutter: true)
+  $differing-right-border-width: colspan-to-width($differing-right-border-width, $include-last-gutter: true)
+  @if is_column_count($gutter)
+    // It is assumed that the original gutter should also be preserved in addition to the one of the last column
+    $gutter: $grid-gutter-width + colspan-to-width($gutter, $include-last-gutter: true)
+  @if is_column_count($left-gutter)
+    $left-gutter: colspan-to-width($left-gutter, $include-last-gutter: true)
+
+  // Calculate derived metrics
+  $right-border-width: right-value($border-width, $differing-right-border-width)
+  $border-width-sum: left-and-right-sum($border-width, $differing-right-border-width)
+  $left-padding: if(($subtract-border-from == 'padding' or $subtract-border-from == 'left-padding') and $padding > 0, $padding - $border-width, $padding)
+  $right-padding: right-value($padding, $differing-right-padding)
+  $right-padding: if(($subtract-border-from == 'padding' or $subtract-border-from == 'right-padding') and $padding > 0, $right-padding - $right-border-width, $right-padding)
+  $padding-sum: left-and-right-sum($left-padding, $right-padding)
+
+  // Setting width
+  @if $container
+    // Paddings and borders do not affect the inner width of a container.
+    width: $column-width
+  @else
+    // Paddings and borders do not affect the outer width of a column.
+    width: $column-width - $padding-sum - $border-width-sum
+
+  // Setting other box attributes
+  padding:
+    left: $left-padding
+    right: $right-padding
+  border:
+    left-width: $border-width
+    right-width: $right-border-width
+  @if type_of($left-gutter) == number
+    margin-left: if(($subtract-border-from == 'gutter' or $subtract-border-from == 'left-gutter') and $left-gutter > 0, $gutter - $border-width, $left-gutter)
+  @else if $left-gutter
+    margin-left: $left-gutter
+  @if type_of($gutter) == number
+    margin-right: if(($subtract-border-from == 'gutter' or $subtract-border-from == 'right-gutter') and $gutter > 0, $gutter - $right-border-width, $gutter)
+  @else if $gutter
+    margin-right: $gutter
+
+@function colspan-to-width($colspan, $include-last-gutter: false)
+  @if is_column_count($colspan)
+    @return column-count-to-width($colspan, $include-last-gutter)
+  @else
+    @return $colspan
+
+@function is_column_count($colspan)
+  @if type_of($colspan) == 'number'
+    @if unitless($colspan) and $colspan > 0
+      @return true
+  @return false
+
+@function column-count-to-width($column-count, $include-last-gutter: false)
+  @if $include-last-gutter
+    @return ($grid-column-width + $grid-gutter-width) * $column-count
+  @else
+    @return $grid-column-width * $column-count + $grid-gutter-width * ($column-count - 1)
+
+// adds to comparable values or doubles the first one
+@function left-and-right-sum($value, $differing-right-value)
+  @if type-of($differing-right-value) == number
+    @if comparable($value, $differing-right-value)
+      @return $value + $differing-right-value
+    @else
+      @warn "It is not possible to compute the sum of #{$value} and #{$differing-right-value}. Please make them comparable. Meanwhile, the result is set to #{$value * 2}."
+  @return $value * 2
+
+// returns value unless numeric differing-right-value is given
+@function right-value($value, $differing-right-value: false)
+  @if type-of($differing-right-value) == number
+    @return $differing-right-value
+  @else
+    @return $value

data/templates/project/_crispy-grid.sass

@@ -0,0 +1,18 @@
+// Crispy Grid Configuration
+//==========================
+// Copy this into your app in order to customize the grid
+
+// Grid Configuration
+$grid-column-width: 30px
+$grid-gutter-width: 10px
+$grid-columns: 25
+
+// Note that that there is always one gutter between two columns
+// $grid-gutters: $grid-columns - 1
+
+// The grid width is calculated from the values above
+// $grid-width: $grid-column-width * $grid-columns + $grid-gutter-width * $grid-gutters
+// For the default values, that is 30px * 25 + 10px * 24 = 990px
+
+// This import statement has to be included in your application stylesheet
+@import crispy-grid

data/templates/project/manifest.rb

@@ -0,0 +1,25 @@
+stylesheet '_crispy-grid.sass', :media => 'screen, projection'
+
+description "A Compass-based Grid that strives for lean & sane CSS and supports complex layouts"
+
+help %Q{
+
+  --- Crispy Grid ---
+
+  A Compass-based Grid that strives for lean & sane CSS and supports complex layouts
+
+  For documentation, see crispy/_grid.sass
+
+}
+
+welcome_message %Q{
+
+
+  --- Crispy Grid ---
+
+  A Compass-based Grid that strives for lean & sane CSS and supports complex layouts
+
+  For documentation, see crispy/_grid.sass
+
+}
+

metadata

@@ -0,0 +1,81 @@
+--- !ruby/object:Gem::Specification 
+name: crispy-grid
+version: !ruby/object:Gem::Version 
+  prerelease: 
+  version: 0.1.3
+platform: ruby
+authors: 
+- Christian Peters
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-11-16 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: "0.11"
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        version: 3.1.0
+  type: :runtime
+  version_requirements: *id002
+description: In short, Crispy Grid closes the gap between easy-to-use grids for simple web pages and doing everything by hand due to layout complexity.
+email: info@c-peters.net
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- MIT-LICENSE
+- lib/crispy-grid.rb
+- stylesheets/_crispy-grid.sass
+- stylesheets/crispy/_grid.sass
+- templates/project/_crispy-grid.sass
+- templates/project/manifest.rb
+homepage: https://github.com/ChristianPeters/crispy-grid
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.7
+signing_key: 
+specification_version: 3
+summary: A Compass-based Grid that strives for lean & sane CSS and supports complex layouts
+test_files: []
+