crispy-grid 0.4.0 → 0.5.0

data/README.md

@@ -113,6 +113,10 @@ edge cases where you don't want to apply `border-box` to all your
 elements. That's why setting the box-model is not part of Crispy Grid's
 `$grid-box-sizing` option.
 
+### On Fluid Grids
+Crispy is fully capable of creating percentage based grids. However, when creating a fluid grid `border-box` should be used.
+Nesting columns is tricky with fluid grids. Crispy provides the `fluid-sub-column` mixin to help with nested columns. (See below)
+
 ## Usage
 
 ### Mixins
@@ -132,10 +136,13 @@ Use might also find these mixins useful:
   * This combines `+column` and `+last`. You should favor it over the two in order to reduce CSS output.
 2. `+row`
   * Use this for columns that span the whole row. This mixin just calls `+column` with the configured count of `$grid-columns`.
+3. `+fluid-sub-column`
+  * This resets the percentage values for nested fluid columns.
+    Just provide the intended colspan and the parent colspan (`+fluid-sub-column(2, 4)`) and Crispy will calculate a width and gutter as if the column was not nested.
 
 ### Options
 
-#### Options for `+column`, `+last-column`, `+row`
+#### Options for `+column`, `+last-column`, `+row`, `+fluid-sub-column`
 * `$colspan`
   * Specifies the number of grid columns the element should span
   * If the element does not fit into the grid, you can also specify a fixed width.

data/stylesheets/crispy/_grid.sass

@@ -63,6 +63,13 @@ $grid-box-sizing: content-box !default
 =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)
 
+// Intended for use with percentage values only
+// Recalculates $colspan and $gutter so that it appears as if the percentages of your nested column were relative to its grand-parent.
+// The parameters are the same of =column, except for a second mandatory parameter $parent-colspan.
+=fluid-sub-column($colspan, $parent-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, $device, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $gutter, $left-gutter, $subtract-border-from: $subtract-border-from, $parent-colspan: $parent-colspan)
+
 // 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.
@@ -80,7 +87,7 @@ $grid-box-sizing: content-box !default
 =column-behavior
   float: left
 
-=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)
+=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, $parent-colspan: false)
   // Convert column counts to widths with unit
   $column-width: colspan-to-width($column-width, $device)
   $padding: colspan-to-width($padding, $device, $include-last-gutter: true)
@@ -101,6 +108,12 @@ $grid-box-sizing: content-box !default
   $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)
 
+  // Recalculate Column width for fluid sub columns
+  @if $parent-colspan
+    $parent-width: colspan-to-width($parent-colspan, $device)
+    $column-width: ($column-width / $parent-width) * 100%
+    $gutter: ($gutter / $parent-width) * 100%
+
   // Setting width
   @if $container
     // Paddings and borders do not affect the inner width of a container.

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: crispy-grid
 version: !ruby/object:Gem::Version 
-  hash: 15
+  hash: 11
   prerelease: 
   segments: 
   - 0
-  - 4
+  - 5
   - 0
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors: 
 - Christian Peters
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-10-28 00:00:00 +01:00
+date: 2013-11-04 00:00:00 +01:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency