crispy-grid 0.3.0 → 0.3.1

data/README.md

@@ -46,8 +46,7 @@ Pending. Please have a look at the source.
 
     gem 'crispy-grid'
 
-2. In your project configuration file (e.g. initializers/compass.rb)
-   add:
+2. In your project configuration file (e.g. initializers/compass.rb, [you might want to](https://github.com/Compass/compass-rails/blob/stable/README.md#configuration) create one if it does not exist yet) add:
 
     require 'crispy-grid'
 
@@ -55,19 +54,19 @@ Pending. Please have a look at the source.
 
 ### 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.
+Tell Crispy Grid to use a single device by setting the singular
+configuration options `$device`, `$grid-column-width`, and `grid-gutter-width`.
 
-    // Copy this into your app in order to customize the grid
-    $devices: desktop
-    $grid-column-widths: 30px
-    $grid-gutter-widths: 10px
-    $grid-columns: 25
+``` sass
+// Copy this into your app in order to customize the grid
+$device: desktop
+$grid-column-width: 30px
+$grid-gutter-width: 10px
+$grid-columns: 24
 
-    // Import Crispy Grid below the configuration
-    @import crispy/grid
+// Import Crispy Grid below the configuration
+@import crispy/grid
+```
 
 ### Configuration for Multiple Devices
 
@@ -76,21 +75,21 @@ The nth entry of any of the following lists belongs to the nth device (the order
 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
+``` sass
+// 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, 24, 24, 13
 
-    // Import Crispy Grid below the configuration
-    @import crispy/grid
+// Import Crispy Grid below the configuration
+@import crispy/grid
+```
 
-## License
+## Changelog
 
-See MIT-LICENSE.
+There is one. [Have a look at it](https://github.com/ChristianPeters/crispy-grid/blob/master/CHANGELOG.md).
 
-## TODO
+## License
 
-- Make use of @extend in order to reduce CSS output
-- Return calculation of inner box width for further use as column width
-  of children
+See MIT-LICENSE.

data/stylesheets/_crispy-grid.sass

@@ -1,15 +1,25 @@
 // Crispy Grid Configuration
 //==========================
 
+// Configuration for a Single Device
+// ----------------------------------
+// Tell Crispy Grid to use a single device by setting the $device variable.
+
+// $device: desktop
+// $grid-column-width: 30px
+// $grid-gutter-width: 10px
+// $grid-columns: 24
+
+// Configuration for Multiple Devices
+// ----------------------------------
 // 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
+
+// $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

data/stylesheets/crispy/_grid.sass

@@ -2,17 +2,28 @@
 
 // Grid Configuration Accessors
 //=============================
+$device: false !default
+$devices: false !default
+$grid-column-width: false !default
+$grid-column-widths: false !default
+$grid-gutter-width: false !default
+$grid-gutter-widths: false !default
+$grid-columns: 24 !default
+
 @function default-device()
-  @return nth($devices, 1)
+  @return $device or nth($devices, 1)
 
 @function grid-column-width($device: default-device())
-  @return nth($grid-column-widths, index($devices, $device))
+  @return $grid-column-width or nth($grid-column-widths, index($devices, $device))
 
 @function grid-gutter-width($device: default-device())
-  @return nth($grid-gutter-widths, index($devices, $device))
+  @return $grid-gutter-width or nth($grid-gutter-widths, index($devices, $device))
 
 @function grid-columns($device: default-device())
-  @return nth($grid-columns, index($devices, $device))
+  @if type-of($grid-columns) == list
+    @return nth($grid-columns, index($devices, $device))
+  @else
+    @return $grid-columns
 
 // Note that the gutter is only between the columns, i.e. you have 1 gutter less than columns
 @function grid-gutters($device: default-device())

data/templates/project/_crispy-grid.sass

@@ -1,17 +1,27 @@
 // Crispy Grid Configuration
 //==========================
-// Copy this into your app in order to customize the grid
+// Copy this into your app and uncomment and customize the respective configuration variables
 
-// Configure grid for every device you whish to respond to
+// Configuration for a Single Device
+// ----------------------------------
+// Tell Crispy Grid to use a single device by setting the $device variable.
+
+// $device: desktop
+// $grid-column-width: 30px
+// $grid-gutter-width: 10px
+// $grid-columns: 24
+
+// Configuration for Multiple Devices
+// ----------------------------------
+// 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
+
+// $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
 
 // This import statement has to be included in your application stylesheet
 @import crispy/grid

metadata

@@ -2,7 +2,7 @@
 name: crispy-grid
 version: !ruby/object:Gem::Version 
   prerelease: 
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors: 
 - Christian Peters
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-12-30 00:00:00 Z
+date: 2012-05-04 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -73,7 +73,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.8.7
+rubygems_version: 1.8.17
 signing_key: 
 specification_version: 3
 summary: A Compass-based Grid that strives for lean & sane CSS and supports complex layouts