crispy-grid 0.2.0 → 0.3.0

data/README.md

@@ -53,12 +53,37 @@ Pending. Please have a look at the source.
 
 3. Customize and import the grid in your application stylesheet:
 
-    // Grid Configuration
-    $grid-column-width: 30px
-    $grid-gutter-width: 10px
+### Configuration for a Single Device
+
+The grid configuration is layed out for multiple devices.
+Though, you can also use Crispy Grid the classic way without any overhead.
+Just provide one setting and ignore the fact that the variables are
+written in plural.
+
+    // Copy this into your app in order to customize the grid
+    $devices: desktop
+    $grid-column-widths: 30px
+    $grid-gutter-widths: 10px
     $grid-columns: 25
 
-    @import crispy-grid
+    // Import Crispy Grid below the configuration
+    @import crispy/grid
+
+### Configuration for Multiple Devices
+
+In `$devices` you can list all devices you whish to respond to.
+The nth entry of any of the following lists belongs to the nth device (the order of `$devices` matters).
+The first device is the default for all grid helpers.
+Consider to set mobile as default device when following the mobile-first design approach.
+
+    // Copy this into your app in order to customize the grid
+    $devices: desktop, tablet, handheld-640, handheld-320
+    $grid-column-widths: 30px, 30px, 20px, 20px
+    $grid-gutter-widths: 10px, 10px, 5px, 5px
+    $grid-columns: 30, 25, 25, 13
+
+    // Import Crispy Grid below the configuration
+    @import crispy/grid
 
 ## License
 

data/stylesheets/_crispy-grid.sass

@@ -1,9 +1,15 @@
 // Crispy Grid Configuration
 //==========================
 
-// Grid Configuration
-$grid-column-width: 30px !default
-$grid-gutter-width: 10px !default
-$grid-columns: 25 !default
+// Configure grid for every device you whish to respond to
+// The nth entry of any list belongs to the nth device (the order of $devices matters).
+// The lists can take any number of devices, including 1.
+// If you do not plan to support multiple devices, you may want to delete all but the first entries.
+// The first device is the default for all grid helpers.
+// Consider to set mobile as default device when following the mobile-first design approach.
+$devices: desktop, tablet, handheld-640, handheld-320 !default
+$grid-column-widths: 30px, 30px, 20px, 20px !default
+$grid-gutter-widths: 10px, 10px, 5px, 5px !default
+$grid-columns: 30, 25, 25, 13 !default
 
 @import crispy/grid

data/stylesheets/crispy/_grid.sass

@@ -1,11 +1,27 @@
 @import compass//utilities/general/clearfix
 
-// Derived Variables
-//==================
+// Grid Configuration Accessors
+//=============================
+@function default-device()
+  @return nth($devices, 1)
+
+@function grid-column-width($device: default-device())
+  @return nth($grid-column-widths, index($devices, $device))
+
+@function grid-gutter-width($device: default-device())
+  @return nth($grid-gutter-widths, index($devices, $device))
+
+@function grid-columns($device: default-device())
+  @return nth($grid-columns, index($devices, $device))
+
 // 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
+@function grid-gutters($device: default-device())
+  @return grid-columns($device) - 1
+
+// The default settings result in a grid-width of 990 px
+@function grid-width($device: default-device())
+  @return grid-column-width($device) * grid-columns($device) + grid-gutter-width($device) * grid-gutters($device)
+
 
 // Public Methods
 //===============
@@ -18,30 +34,30 @@ $grid-width: $grid-column-width * $grid-columns + $grid-gutter-width * $grid-gut
 // 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($colspan, $device: default-device(), $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $gutter: grid-gutter-width($device), $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)
+  +column-metrics($colspan, $device, $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)
+=last-column($colspan, $device: default-device(), $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, $device, $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)
+=row($device: default-device(), $colspan: grid-columns($device), $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, $device, $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.
 // Clearfixing has to be done in order to enforce the container to enclose its content.
 // By default, the overflow: hidden method is used. Specify $clearfix: pie if container contents should be visible outside of the container (e.g. when positioned absolutely).
-=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, $clearfix: overflow)
-  +column-metrics($colspan, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $right-margin, $left-margin, true)
+=grid-container($device: default-device(), $colspan: grid-columns($device), $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $left-margin: auto, $right-margin: auto, $clearfix: overflow)
+  +column-metrics($colspan, $device, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $right-margin, $left-margin, true)
   @if $clearfix == pie or $clearfix == pie-clearfix
     +pie-clearfix
   @else
@@ -52,18 +68,18 @@ $grid-width: $grid-column-width * $grid-columns + $grid-gutter-width * $grid-gut
 =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)
+=column-metrics($column-width, $device: default-device(), $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $gutter: grid-gutter-width($device), $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)
+  $column-width: colspan-to-width($column-width, $device)
+  $padding: colspan-to-width($padding, $device, $include-last-gutter: true)
+  $differing-right-padding: colspan-to-width($differing-right-padding, $device, $include-last-gutter: true)
+  $border-width: colspan-to-width($border-width, $device, $include-last-gutter: true)
+  $differing-right-border-width: colspan-to-width($differing-right-border-width, $device, $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)
+    $gutter: grid-gutter-width($device) + colspan-to-width($gutter, $device, $include-last-gutter: true)
+  @if is-column-count($left-gutter)
+    $left-gutter: colspan-to-width($left-gutter, $device, $include-last-gutter: true)
 
   // Calculate derived metrics
   $right-border-width: right-value($border-width, $differing-right-border-width)
@@ -97,23 +113,23 @@ $grid-width: $grid-column-width * $grid-columns + $grid-gutter-width * $grid-gut
   @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)
+@function colspan-to-width($colspan, $device: default-device(), $include-last-gutter: false)
+  @if is-column-count($colspan)
+    @return column-count-to-width($colspan, $device, $include-last-gutter)
   @else
     @return $colspan
 
-@function is_column_count($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)
+@function column-count-to-width($column-count, $device: default-device(), $include-last-gutter: false)
   @if $include-last-gutter
-    @return ($grid-column-width + $grid-gutter-width) * $column-count
+    @return (grid-column-width($device) + grid-gutter-width($device)) * $column-count
   @else
-    @return $grid-column-width * $column-count + $grid-gutter-width * ($column-count - 1)
+    @return grid-column-width($device) * $column-count + grid-gutter-width($device) * ($column-count - 1)
 
 // adds to comparable values or doubles the first one
 @function left-and-right-sum($value, $differing-right-value)

data/templates/project/_crispy-grid.sass

@@ -2,17 +2,16 @@
 //==========================
 // 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
+// Configure grid for every device you whish to respond to
+// The nth entry of any list belongs to the nth device (the order of $devices matters).
+// The lists can take any number of devices, including 1.
+// If you do not plan to support multiple devices, you may want to delete all but the first entries.
+// The first device is the default for all grid helpers.
+// Consider to set mobile as default device when following the mobile-first design approach.
+$devices: desktop, tablet, handheld-640, handheld-320 !default
+$grid-column-widths: 30px, 30px, 20px, 20px !default
+$grid-gutter-widths: 10px, 10px, 5px, 5px !default
+$grid-columns: 30, 25, 25, 13 !default
 
 // This import statement has to be included in your application stylesheet
-@import crispy-grid
+@import crispy/grid

metadata

@@ -2,7 +2,7 @@
 name: crispy-grid
 version: !ruby/object:Gem::Version 
   prerelease: 
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors: 
 - Christian Peters
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-12-04 00:00:00 Z
+date: 2011-12-30 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -31,7 +31,7 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        version: 3.1.0
+        version: 3.1.2
   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.