smashing-layout 0.0.4 → 0.0.5

data/README.mdown

@@ -1,64 +1,90 @@
 # Smashing Layout
 
-The Sass Way to recreate Smashing Magazine's layout (circa 2009).
+A Sass project that began as an experiment to recreate Smashing Magazine's layout (circa 2009).
 
 ## Installation
 
-`gem install smashing-layout`
+`(sudo) gem install smashing-layout`
 
 Add `require 'smashing-layout'` to your Compass config file.
 
 ## Usage
 
-There are two mixins that produce all the magic in Smashing Layout.
+There are two mixins that produce all the magic in Smashing Layout. The `smashing-layout` mixin and the `smashing-width` mixin. I'll cover those in more detail below. But in the meantime, here are the details for the default variables and how to override them.
 
-### The `smashing-layout` mixin
+### Default variables
 
 The `smashing-layout` mixin sets up the core layout based on the default variable configuration or your overrides.
 
-Here is the default configuration of Smashing Layout. If you plan to override this, be sure to do so above the import of smashing-layout.
+The default configuration of Smashing Layout is listed below. If you plan to override any of these values, do so prior to importing smashing-layout.
 
     // Configuration
     $smashing-direction: right
     $smashing-max-width: 1200px
-    $smashing-min-width: 900px
-    $smashing-support-ie6: false
+    $smashing-min-width: 960px
+    $smashing-cushion: 2.5%
+    $smashing-devine: false
+    
+Import Smashing Layout from the extension, like so:
+
+    @import smashing-layout
+
+### Overriding the default variables
+
+A proper example of overriding the default variables would look something like this.
+
+The code below assumes you are keeping the default max and min width, but you'd like to set the sidebar to display on the left vs the default setting of displaying on the right. It also assumes you'd like a bit more cushion on the outside of the layout by setting the `$smashing-cushion`, and sets the left and right padding on the `.width` selector to 5% each vs the default of 2.5%.
+
+    // Configuration
+    $smashing-direction: left
+    $smashing-cushion: 5%
+    @import smashing-layout
+
+
+### Assumed markup and selectors
 
-The following markup structure is needed to create the Smashing Layout.
+The following markup and selector structure is assumed to create the two-column Smashing Layout.
 
-    #your-id
-      .max-width
+    .your-class
+      .width
         .padding
-          .primary.column
+          .primary
              ...
-          .secondary.column
+          .secondary
              ...
 
-If you have set the variable `$smashing-support-ie6` to `true` (set to `false` by default), the following markup structure is needed to create the Smashing Layout.
+I realize this means you are using more presentational selector names in your markup, but that doesn't mean you can't combine those class names with HTML5 elements.
 
-    #your-id
-      .max-width
-        .min-width
-          .padding
-            .primary.column
-               ...
-            .secondary.column
-               ...
-    
-### The `smashing-width` mixin
+## Smashing Mixins
+
+There are two mixins to use when using Smashing Layout.
+
+* `smashing-layout`, which takes care of creating the layout
+* `smashing-width`, which sets up just the width for keeping sections of the design outside the layout the same flexible width
+
+### `smashing-layout`
+
+Assumes the following markup and selector structure to work.
+
+    .your-class
+      .width
+        .padding
+          .primary
+             ...
+          .secondary
+             ...
 
-The `smashing-width` mixin sets up just the width with no columns based on the default variable configuration or your overrides. This is needed for headers and footers and other parts of your layout that need to be set to the same width as your main content areas where you've used the `smashing-layout` mixin.
+### `smashing-width`
 
-This assumes the following markup structure to apply the smashing-width.
+Assumes the following markup and selector structure to work.
 
-    #your-id
-      .max-width
-        .min-width
-          ...
+    .your-class
+      .width
+        ...
 
 ## License
 
-Copyright (c) 2009 Adam Stacoviak
+Copyright (c) 2009-2011 Adam Stacoviak
 
 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:
 

data/lib/smashing-layout.rb

@@ -3,7 +3,7 @@ Compass::Frameworks.register("smashing-layout", :path => "#{File.dirname(__FILE_
 
 module SmashingLayout
   
-  VERSION = "0.0.4"
+  VERSION = "0.0.5"
   DATE = "2011-09-19"
 
 end

data/stylesheets/_smashing-layout.sass

@@ -2,9 +2,9 @@
 
 // Configuration
 $smashing-direction: right !default
-$smashing-max-width: 1100px !default
+$smashing-max-width: 1200px !default
 $smashing-min-width: 960px !default
-$smashing-cushion: 0 2.5% !default
+$smashing-cushion: 2.5% !default
 $smashing-devine: false !default
 
 // Layout variables
@@ -17,7 +17,7 @@ $smashing-negative-sidebar-width-divine: -(ceil($smashing-sidebar-width-divine))
 =smashing-layout
   +smashing-width
   +smashing-padding
-  +smashing-columns
+  +smashing-content
 
 // Sets a div's width to behave like the width of +smashing-layout
 // Assumes an inner wrapping div .width
@@ -29,7 +29,9 @@ $smashing-negative-sidebar-width-divine: -(ceil($smashing-sidebar-width-divine))
     margin: 0 auto
     min-width: $smashing-min-width
     max-width: $smashing-max-width
-    padding: $smashing-cushion
+    padding:
+      right: $smashing-cushion
+      left: $smashing-cushion
 
 // Used only in +smashing-layout
 =smashing-padding
@@ -43,8 +45,8 @@ $smashing-negative-sidebar-width-divine: -(ceil($smashing-sidebar-width-divine))
     width: 100%
 
 // Used only in +smashing-layout
-=smashing-columns
-  .column
+=smashing-content
+  .primary, .secondary
     +box-sizing(border-box)
     @if $smashing-direction == right
       +float-left

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: smashing-layout
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
   prerelease: 
 platform: ruby
 authors:
@@ -13,7 +13,7 @@ date: 2011-09-19 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &70220532523400 !ruby/object:Gem::Requirement
+  requirement: &70135509786280 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: 0.11.5
   type: :runtime
   prerelease: false
-  version_requirements: *70220532523400
+  version_requirements: *70135509786280
 description: A Sass experiment to recreate Smashing Magazine's layout (circa 2009)
 email: adam@stacoviak.com
 executables: []
@@ -45,7 +45,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1884267593530934182
+      hash: 2416944541092671579
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: