smashing-layout 0.0.1 → 0.0.2

data/Gemfile

@@ -0,0 +1,7 @@
+source 'http://rubygems.org'
+
+# Source: https://github.com/nex3/haml
+gem "haml", "~> 3.0.25"
+
+# Source: https://github.com/chriseppstein/compass
+gem "compass", "~> 0.10.6"

data/README.mdown

@@ -1,56 +1,49 @@
 # Smashing Layout
 
-A Sass experiment to recreate Smashing Magazine's layout (circa 2009) turned Compass extension.
+The Sass Way to recreate Smashing Magazine's layout (circa 2009).
 
 ## Installation
 
-You will need to install this to your specified Compass extensions directory. See the Compass documentation on extensions for more details: [http://compass-style.org/docs/tutorials/extensions/](http://compass-style.org/docs/tutorials/extensions/)
+`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.
 
-### +smashing-layout
+### The `smashing-layout` mixin
 
-The `+smashing-layout` mixin setups the core layout based on the default variable configuration or your overrides.
+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.
 
     // Configuration
-    $direction: right !default
-    $max-width: 1400px !default
-    $min-width: 1250px !default
+    $direction: right
+    $max-width: 1200px
+    $min-width: 900px
 
 This assumes the following markup structure to create the layout.
 
-    <div id="your-id">
-      <div class="max-width">
-        <div class="min-width">
-          <div class="padding">
-            <div class="primary column">
-              ...
-            </div>
-            <div class="secondary column">
-              ...
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    #your-id
+      .max-width
+        .min-width
+          .padding
+            .primary.column
+               ...
+            .secondary.column
+               ...
     
-### +smashing-width
+### The `smashing-width` mixin
 
-The `+smashing-width` mixin setups the 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 area that you've applied `+smashing-layout` to.
+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.
 
 This assumes the following markup structure to apply the smashing-width.
 
-    <div id="your-id">
-      <div class="max-width">
-        <div class="min-width">
+    #your-id
+      .max-width
+        .min-width
           ...
-        </div>
-      </div>
-    </div>
 
 ## License
 

data/Rakefile

@@ -0,0 +1,30 @@
+require 'rubygems'
+require 'bundler/setup'
+
+Bundler.require(:default)
+
+require 'lib/smashing-layout'
+
+namespace :sass do
+
+  desc "Converts the Sass to SCSS"
+  task :convert do
+    puts "*** Converting Sass to SCSS ***"
+    system "sass-convert stylesheets/*.sass stylesheets/*.scss"
+  end
+
+end
+
+namespace :gem do
+
+  desc "Build the gem"
+  task :build do
+    system "gem build *.gemspec"
+  end
+ 
+  desc "Build and release the gem"
+  task :release => :build do
+    system "gem push smashing-layout-#{SmashingLayout::VERSION}.gem"
+  end
+  
+end

data/lib/smashing-layout.rb

@@ -1,2 +1,11 @@
+require 'compass'
+
 # path from the library file to where you're keeping your compass stuff.
-Compass::Frameworks.register("smashing-layout", :path => "#{File.dirname(__FILE__)}/..")
+Compass::Frameworks.register("smashing-layout", :path => "#{File.dirname(__FILE__)}/..")
+
+module SmashingLayout
+  
+  VERSION = "0.0.2".freeze
+  DATE = "2011-3-20".freeze
+
+end

data/stylesheets/_smashing-layout.sass

@@ -0,0 +1,49 @@
+@import compass/utilities
+
+// Configuration
+$direction: right !default
+$max-width: 1200px !default
+$min-width: 900px !default
+
+// Smashing Layout logic
+$divine-proportion: $min-width / 1.62
+$width: 95%
+$sidebar-width: floor($min-width - $divine-proportion)
+$negative-sidebar-width: -(ceil($sidebar-width))
+
+=smashing-layout($direction)
+  +smashing-width
+  +smashing-padding($direction)
+  +smashing-columns($direction)
+
+// Sets a div's width to behave like the width of +smashing-layout
+// Assumes 2 inner wrapping div's .max-width and .min-width
+=smashing-width
+  width: 100%
+  .max-width
+    +pie-clearfix
+    margin: 0 auto
+    min-width: $min-width
+    max-width: $max-width
+    width: $width
+
+// Used only in +smashing-layout
+=smashing-padding($direction)
+  .padding
+    +pie-clearfix
+    padding-#{$direction}: $sidebar-width
+    width: auto
+
+// Used only in +smashing-layout
+=smashing-columns($direction)
+  .column
+    @if $direction == right
+      float: left
+    @else if $direction == left
+      float: right
+    position: relative
+    &.primary
+      width: 100%
+    &.secondary
+      margin-#{$direction}: $negative-sidebar-width
+      width: $sidebar-width

data/stylesheets/_smashing-layout.scss

@@ -3,55 +3,35 @@
 // Configuration
 $direction: right !default;
 $max-width: 1200px !default;
-$min-width: 940px !default;
+$min-width: 900px !default;
 
 // Smashing Layout logic
 $divine-proportion: $min-width / 1.62;
 $width: 95%;
 $sidebar-width: floor($min-width - $divine-proportion);
-$negative-sidebar-width: - ceil($sidebar-width);
+$negative-sidebar-width: -(ceil($sidebar-width));
 
-// Creates the Smashing Layout.
-// IMPORTANT: This assumes the following markup structure to create the layout
-//
-// <div id="your-id">
-//   <div class="max-width">
-//     <div class="min-width">
-//       <div class="primary column">
-//          ...
-//       </div>
-//       <div class="secondary column">
-//          ...
-//       </div>
-//     </div>
-//   </div>
-// </div>
-@mixin smashing-layout($direction: $direction) {
+@mixin smashing-layout($direction) {
   @include smashing-width;
   @include smashing-padding($direction);
   @include smashing-columns($direction); }
 
-// Used to sett a div's width to behave like the width of +smashing-layout
-// Assumes 2 inner wrapping div's: .max-width and .min-width
+// Sets a div's width to behave like the width of +smashing-layout
+// Assumes 2 inner wrapping div's .max-width and .min-width
 @mixin smashing-width {
   width: 100%;
   .max-width {
-    margin: 0 auto;
-    max-width: $max-width; }
-  .min-width {
     @include pie-clearfix;
     margin: 0 auto;
     min-width: $min-width;
+    max-width: $max-width;
     width: $width; } }
 
 // Used only in +smashing-layout
 @mixin smashing-padding($direction) {
   .padding {
     @include pie-clearfix;
-    @if $direction == right {
-      padding-right: $sidebar-width; }
-    @else {
-      padding-left: $sidebar-width; }
+    padding-#{$direction}: $sidebar-width;
     width: auto; } }
 
 // Used only in +smashing-layout
@@ -59,14 +39,11 @@ $negative-sidebar-width: - ceil($sidebar-width);
   .column {
     @if $direction == right {
       float: left; }
-    @else {
+    @else if $direction == left {
       float: right; }
     position: relative;
     &.primary {
       width: 100%; }
     &.secondary {
-      @if $direction == right {
-        margin-right: $negative-sidebar-width; }
-      @else {
-        margin-left: $negative-sidebar-width; }
+      margin-#{$direction}: $negative-sidebar-width;
       width: $sidebar-width; } } }

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: smashing-layout
 version: !ruby/object:Gem::Version 
-  hash: 29
+  hash: 27
   prerelease: false
   segments: 
   - 0
   - 0
-  - 1
-  version: 0.0.1
+  - 2
+  version: 0.0.2
 platform: ruby
 authors: 
 - Adam Stacoviak
@@ -15,25 +15,25 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-08-31 00:00:00 -05:00
+date: 2011-03-20 00:00:00 -05:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
-  name: compass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
+  version_requirements: &id001 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 63
+        hash: 59
         segments: 
         - 0
         - 10
-        - 4
-        version: 0.10.4
+        - 6
+        version: 0.10.6
+  requirement: *id001
   type: :runtime
-  version_requirements: *id001
+  name: compass
+  prerelease: false
 description: A Sass experiment to recreate Smashing Magazine's layout (circa 2009) turned Compass extension
 email: adam@adamstacoviak.com
 executables: []
@@ -43,12 +43,12 @@ extensions: []
 extra_rdoc_files: []
 
 files: 
+- Gemfile
+- Rakefile
 - README.mdown
-- VERSION
 - lib/smashing-layout.rb
+- stylesheets/_smashing-layout.sass
 - stylesheets/_smashing-layout.scss
-- templates/project/manifest.rb
-- templates/project/screen.sass
 has_rdoc: true
 homepage: http://adamstacoviak.com/
 licenses: []
@@ -72,16 +72,18 @@ required_rubygems_version: !ruby/object:Gem::Requirement
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: 3
+      hash: 23
       segments: 
-      - 0
-      version: "0"
+      - 1
+      - 3
+      - 6
+      version: 1.3.6
 requirements: []
 
 rubyforge_project: 
 rubygems_version: 1.3.7
 signing_key: 
 specification_version: 3
-summary: A Sass recreatation of Smashing Magazine's layout (circa 2009)
+summary: A Sass recreatation of Smashing Magazine.com's layout (circa 2009)
 test_files: []
 

data/VERSION

@@ -1 +0,0 @@
-0.0.1

data/templates/project/manifest.rb

@@ -1,3 +0,0 @@
-description "Smashing Layout"
-
-discover :all

data/templates/project/screen.sass

@@ -1,2 +0,0 @@
-// This is where you put the contents of the main stylesheet for the user's project.
-// It should import your sass stylesheets and demonstrate how to use them.