compass-columnal-plugin 0.1.3 → 0.1.4

data/README.mkdn

@@ -27,7 +27,7 @@ Add a `config/compass.rb` file to your project containing:
 
     require 'columnal'
 
-In your stylesheet:
+Finally, in your stylesheet:
 
     @import columnal/grid
 
@@ -51,11 +51,11 @@ Let's say we have a 12 columns layout, and we want to use the `<section>` tag as
       section
         +grid-row
         header
-          +grid-column(12)
+          +grid(12)
         article
-          +grid-column(9)
+          +grid(9)
         aside
-          +grid-column(3)
+          +grid(3)
           +last
 
 So we could use the following HTML:
@@ -67,3 +67,83 @@ So we could use the following HTML:
         <aside>And here 3</aside>
       </section>
     </body>
+
+Handling horizontal margins and paddings
+========================================
+
+Every `+grid(n)` column comes with a margin-right as default gutter between columns. But we don't want this margin on the last column because it'll break our layout. For that, we use:
+
+    +grid(3)
+    +last
+    
+Or, for the one's too damn used to 960.gs:
+
+    +grid(3)
+    +omega
+    
+Adding some "blank" (padding-left, actually) columns before your grid column:
+
+    +grid(3)
+    +grid-prefix(9)
+
+Adding some "blank" (padding-right, actually) columns after your grid column:
+
+    +grid(3)
+    +grid-suffix(9)
+
+Using subcolumns
+================
+
+Columnal allows you to use subcolumns that will flatten to a single column on mobile devices, the same way as the normal columns. One thing to note is that sub-columns will only work up to one level deep. More at http://www.columnal.com/#markupcode
+
+    body
+      +grid-container
+      section
+        +grid-row
+        article
+          +grid(9)
+          .author
+            +grid-subcolumn(9, 6)
+          .date
+            +grid-subcolumn(9, 3)
+            +last
+        aside
+          +grid(3)
+          +last
+
+This will divide your `article` into two subcolumns, one of them with 6 columns and the other with 3.
+
+IMPORTANT: since Columnal is a responsive grid system based on percentage, we can't know beforehand how many columns the parent `article` has. Thus, the first parameter will be the number of columns of the parent.
+
+Creating mobile-only or mobile-hidden content
+=====================
+
+If you want something to be shown only in mobile devices:
+
+    +mobile-only
+
+If you want something to be hidden in mobile devices:
+
+    +mobile-hide
+
+Configuring your grid
+=====================
+
+Defining the grid width:
+
+    $columnal-grid-width: 1140px !default
+    
+Defining the number of columns:
+
+    $columnal-columns: 12 !default
+
+Defining the separator for classes on class-based grids:
+
+    $columnal-class-separator: "_" !default
+
+Extras
+======
+
+Basic settings to make type look nice:
+
+    +text

data/compass-columnal-plugin.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-columnal-plugin}
-  s.version = "0.1.3"
+  s.version = "0.1.4"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
   s.authors = ["Diogo Biazus"]

data/stylesheets/columnal/_grid.sass

@@ -2,7 +2,8 @@
 ///*/////////////////////////////////////////// */
 
 /* Column code based on work from cssgrid.net: 
- *The 1140px Grid by Andy Taylor – http://cssgrid.net – http://www.twitter.com/andytlr – http://www.catchingzebra.com
+ *The 1140px Grid by Andy Taylor – http://cssgrid.net – http://www.twitter.com/andytlr – http://www.catchingzebra.com */
+
 @import text
 @import compass/css3
 
@@ -168,7 +169,7 @@ a img
 
 /*
  *_______________________________
- *Columnal - extras
+ *Columnal - extras */
 
 .clear, .clearboth
   clear: both !important
@@ -188,7 +189,7 @@ a img
 .textleft
   text-align: left
 
-/* this will insert a pseduo element clears floats for an element containing floated content
+/* this will insert a pseduo element clears floats for an element containing floated content */
 
 .selfclear:after
   clear: both

data/stylesheets/columnal/_text.sass

@@ -2,24 +2,24 @@
 ///*/////////////////////////////////////////// */
 /*
  *_______________________________
- *Columnal - TYPE (basic settings to make type look nice)
+ *Columnal - TYPE (basic settings to make type look nice) */
 =text
   body
     font-family: Helvetica, Arial, sans-serif
     font-size: 100%
     color: #444
     line-height: 1.6em
-    /* from cssgrid.net
+    /* from cssgrid.net */
     -webkit-text-size-adjust: none
     /* from cssgrid.net
-    /* Stops the iPhone scalling type up - from cssgrid.net
+    /* Stops the iPhone scalling type up - from cssgrid.net */
 
-  /* h1, h2, h3, h4, h5, h6 { letter-spacing: 1px; }
+  /* h1, h2, h3, h4, h5, h6 { letter-spacing: 1px; } */
 
   h1, h2, h3, h4, h5, h6, p, dl, hr, ol, ul, pre, table, address, fieldset
     margin-bottom: 1.6em
 
-  /* Add back in basic text markup (after removal by reset)
+  /* Add back in basic text markup (after removal by reset) */
 
   strong
     font-weight: bold
@@ -32,12 +32,12 @@
     font-size: 13px
     font-weight: bold
 
-  /* text colors, add custom colors here to match your site
+  /* text colors, add custom colors here to match your site */
 
   .teal
     color: #155f62
 
-  /* link colors
+  /* link colors */
 
   a
     color: #058
@@ -51,7 +51,7 @@
     &:focus
       outline: 1px dotted #79160d
 
-  /* .row hr, .row p, .row ul, .row ol, .row dl, .row pre, .row address, .row table, .row form {margin-bottom: 1.6em;}
+  /* .row hr, .row p, .row ul, .row ol, .row dl, .row pre, .row address, .row table, .row form {margin-bottom: 1.6em;} */
 
   dt
     font-weight: bold
@@ -77,7 +77,7 @@
   h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p
     margin-top: 0
 
-  /* fix for weird Chrome collapse bug
+  /* fix for weird Chrome collapse bug */
 
   h2
     font-size: 1.7em
@@ -132,7 +132,7 @@
 
   /*
    *_______________________________
-   *Columnal - reverse type presets (for text on dark backgrounds)
+   *Columnal - reverse type presets (for text on dark backgrounds) */
 
   .reverse
     h1, h2, h3, h4, h5, h6
@@ -142,7 +142,7 @@
 
   /*
    *_______________________________
-   *IMAGE basics
+   *IMAGE basics */
 
   img, object, embed
     margin-bottom: 20px
@@ -155,7 +155,7 @@
 
   a img
     display: block
-    /* Stops image links getting text link styles
+    /* Stops image links getting text link styles */
 
 // END TYPE PRESETS
 ///*/////////////////////////////////////////// */

metadata

@@ -1,83 +1,70 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: compass-columnal-plugin
-version: !ruby/object:Gem::Version 
-  prerelease: false
-  segments: 
-  - 0
-  - 1
-  - 3
-  version: 0.1.3
+version: !ruby/object:Gem::Version
+  version: 0.1.4
+  prerelease: 
 platform: ruby
-authors: 
+authors:
 - Diogo Biazus
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2012-01-12 00:00:00 -02:00
-default_executable: 
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2012-01-12 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: compass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        segments: 
-        - 0
-        - 10
-        - 0
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
         version: 0.10.0
   type: :runtime
-  version_requirements: *id001
-description: "The Columnal CSS grid system is a \xE2\x80\x9Cremix\xE2\x80\x9D of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Checkout at: http://www.columnal.com/"
-email: 
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.10.0
+description: ! 'The Columnal CSS grid system is a “remix” of a couple others with
+  some custom code thrown in. The elastic grid system is borrowed from cssgrid.net,
+  while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
+  Checkout at: http://www.columnal.com/'
+email:
 - diogo@biazus.me
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - compass-columnal-plugin.gemspec
 - README.mkdn
 - lib/columnal.rb
 - stylesheets/columnal/_grid.sass
 - stylesheets/columnal/_text.sass
 - templates/project/manifest.rb
-has_rdoc: true
 homepage: https://github.com/diogob/compass-columnal-plugin
 licenses: []
-
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 1
-      - 3
-      - 5
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
       version: 1.3.5
 requirements: []
-
 rubyforge_project: compass-columnal-plugin
-rubygems_version: 1.3.6
+rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
 summary: Compass compatible Sass port of columnal grid system.
 test_files: []
-