compass-less-plugin 0.3.1 → 0.7

data/README.mkdn

@@ -13,69 +13,47 @@ Installation
     gem install compass-less-plugin
 
 
-Create a Compass Project using Less Framework
+Create a Compass Project Using Less Framework
 =============================================
 
     compass create -r lessframework my_project --using less
 
-Afterwards, edit the generated `styles.scss` file.
+The above command will generate a `styles.scss` file and a `partials` directory containing
+files pre-populated with media queries for each grid layout:
 
+* `partials/_8` - The default; for tablets at 768 px, netbooks, and old browsers
+* `partials/_3` - For all iPhones, iPod Touches, and other 320 px mobile devices
+* `partials/_5` - For 480 px mobile devices, narrow browsers, and landscape iPhones
+* `partials/_13` - For laptops, desktops, and hdtvs at 1280 px and beyond.
+* `partials/_iphone4` - Overrides for iPhone 4 and other high device-pixel-ratio devices
 
-Customizing Typography
-======================
-
-Less Framework contains typography settings optimized for line heights of `1.5`
-and `1.3`. While this plugin defaults to `1.5`, `1.3` may be used by changing the value
-of the `$less-line-height` variable before importing the `text` module:
-
-    $less-line-height: 1.3;
-    @import "lessframework/text";
-
-Values other than `1.5` or `1.3` will be ignored, resulting in the default being used.
 
+Populating the Grid
+====================
 
-Creating a Grid
-===============
-
-When `styles.scss` is generated, it will be pre-populated with the inline media queries
-necessary to create a responsive website. If you wish to define grids in a different
-manner, use the `grid(n)` mixin:
+To calculate column widths, use the `column(n, [last])` mixin:
 
-    body {
-      @include grid(8);
+    #content {
+      @include column(5);
     }
 
-The above example creates an 8-column grid with 60 px margins.
-
-The number of columns, `n`, can be:
-
-* `3` - For all iPhones, iPod Touches, and other 320 px mobile devices
-* `5` - For 480 px mobile devices, narrow browsers, and landscape iPhones
-* `8` - For tablets at 768 px, netbooks, and old browsers
-* `13` - For laptops, desktops, and hdtvs at 1280 px and beyond.
+This will create a 396 px column with a 24 px gutter to the right.
 
-To prevent Mobile Safari from bumping up font sizes when in landscape mode, use the 
-`mobile-safari` mixin:
+To avoid creating the right gutter (e.g. an element is the last column in a row),
+set the `last` parameter to `true`:
 
-    @media only screen and (max-width: 479px) {
-    
-      body {
-        @include grid(3);
-        @include mobile-safari;
-      }
+    #sidebar {
+      @include column(3, true);
     }
 
 
-Populating the Grid
-====================
-
-To calculate the width of columns within the grid, use the `column(n, [last])` mixin:
-
-    #content {
-      @include column(5); /* Creates a 396 px column with a 24 px gutter on the right. */
-    }
+Customizing Typography
+======================
 
-    #sidebar {
-      @include column(3, true); /* Creates a 228 px column without the right gutter. */
-    }
+Less Framework contains typography settings optimized for line heights of `1.5`
+and `1.3`. While this plugin includes the `1.5` line height optimizations by default,
+this can easily be switched by importing `lessframework/text/13` instead of
+`lessframework/text/15` in `styles.scss`.
 
+**Note to users of versions earlier than 0.7:** Please update the `lessframework/text`
+import to be one of the aforementioned new text modules when upgrading.

data/compass-less-plugin.gemspec

@@ -3,7 +3,7 @@ $:.push File.expand_path("../lib", __FILE__)
 
 Gem::Specification.new do |s|
   s.name        = "compass-less-plugin"
-  s.version     = "0.3.1"
+  s.version     = "0.7"
   s.platform    = Gem::Platform::RUBY
   s.authors     = ["William Wells"]
   s.email       = ["projects@hanwells.me"]

data/stylesheets/lessframework/_grid.scss

@@ -1,6 +1,3 @@
-$less-column-width: 60px !default;
-$less-gutter-width: 24px !default;
-
 @mixin grid($columns) {
   @include column($columns, true);
   

data/stylesheets/lessframework/_reset.scss

@@ -1,21 +1,3 @@
-html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
-p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
-img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
-dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figure, figcaption, hgroup, 
-menu, footer, header, nav, section, summary, time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-article, aside, canvas, figure, figure img, figcaption, hgroup,
-footer, header, nav, section, audio, video {
-  display: block;
-}
-
-a img { border: 0; }
-
-figure { position: relative; }
-figure img { width: 100%; }
+@import "reset/utilities";
+
+@include less-reset;

data/stylesheets/lessframework/reset/_utilities.scss

@@ -0,0 +1,30 @@
+@mixin less-reset {
+  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
+  p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
+  img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
+  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, figure, figcaption, hgroup, 
+  menu, footer, header, nav, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  
+  article, aside, canvas, figure, figure img, figcaption, hgroup,
+  footer, header, nav, section, audio, video {
+    display: block;
+  }
+  
+  a img { border: 0; }
+  
+  figure { position: relative; }
+  figure img { width: 100%; }
+}
+
+@mixin less-reset-selection {
+  ::selection { background: rgb(255,255,0); }
+  ::-moz-selection { background: rgb(255,255,0); }
+  img::selection { background: transparent; }
+  img::-moz-selection { background: transparent; }
+}

data/stylesheets/lessframework/text/_13.scss

@@ -0,0 +1,38 @@
+$less-font-family: Palatino, Constantia, "Palatino Linotype", serif;
+
+@mixin gigantic {
+  font-size: 123px;
+  line-height: 132px;
+  letter-spacing: -2px;
+}
+
+@mixin huge {
+  font-size: 76px;
+  line-height: 84px;
+  letter-spacing: -2px;
+}
+
+@mixin large {
+  font-size: 46px;
+  line-height: 48px;
+  letter-spacing: -1px;
+}
+
+@mixin big {
+  font-size: 29px;
+  line-height: 36px;
+}
+
+@mixin normal {
+  font-size: 18px;
+  line-height: 24px;
+}
+
+@mixin small {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+body {
+  font: 18px/24px $less-font-family;
+}

data/stylesheets/lessframework/text/_15.scss

@@ -0,0 +1,37 @@
+$less-font-family: Helvetica, Arial, sans-serif;
+
+@mixin gigantic {
+  font-size: 110px;
+  line-height: 120px;
+  letter-spacing: -2px;
+}
+
+@mixin huge {
+  font-size: 68px;
+  line-height: 72px;
+  letter-spacing: -1px;
+}
+
+@mixin large {
+  font-size: 42px;
+  line-height: 48px;
+}
+
+@mixin big {
+  font-size: 26px;
+  line-height: 36px;
+}
+
+@mixin normal {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+@mixin small {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+body {
+  font: 16px/24px $less-font-family;
+}

data/templates/project/manifest.rb

@@ -1,15 +1,21 @@
-stylesheet "styles.sass", :media => "all"
-
-description "Less Framework"
-
-help %Q{
-Please see the Less Framework website for documentation:
-
-    http://lessframework.com/
-}
-
-welcome_message %Q{
-Please see the Less Framework website for documentation:
-
-    http://lessframework.com/
-}
+stylesheet "styles.sass", :media => "all"
+stylesheet "partials/_base.sass"
+stylesheet "partials/_3.sass"
+stylesheet "partials/_5.sass"
+stylesheet "partials/_8.sass"
+stylesheet "partials/_13.sass"
+stylesheet "partials/_iphone4.scss"
+
+description "Less Framework"
+
+help %Q{
+Please see the Less Framework website for documentation:
+
+    http://lessframework.com/
+}
+
+welcome_message %Q{
+Please see the Less Framework website for documentation:
+
+    http://lessframework.com/
+}

data/templates/project/partials/_13.sass

@@ -0,0 +1,6 @@
+/* 13-column layout
+ * For laptops, desktops, and hdtvs at 1280 px and beyond. */
+
+@media only screen and (min-width: 1212px)
+  body
+    @include grid(13)

data/templates/project/partials/_3.sass

@@ -0,0 +1,7 @@
+/* 3-column layout
+ * For all iPhones, iPod Touches, and other 320 px mobiles. */
+
+@media only screen and (max-width: 479px)
+  body
+    @include grid(3)
+    @include mobile-safari

data/templates/project/partials/_5.sass

@@ -0,0 +1,7 @@
+/* 5-column layout
+ * For 480 px mobiles, narrow browsers, and landscape iPhones. */
+
+@media only screen and (max-width: 767px) and (min-width: 480px)
+  body
+    @include grid(5)
+    @include mobile-safari

data/templates/project/partials/_8.sass

@@ -0,0 +1,5 @@
+/* Default 8-column layout
+ * For tablets at 768 px, netbooks, and old browsers. */
+
+body
+  @include grid(8)

data/templates/project/partials/_base.sass

@@ -0,0 +1,6 @@
+$less-column-width: 60px !default
+$less-gutter-width: 24px !default
+
+$less-line-height: 1.5 !default
+
+@import lessframework/grid

data/templates/project/partials/_iphone4.scss

@@ -0,0 +1,5 @@
+/* Overrides for iPhone 4
+ * and other high device-pixel-ratio devices */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+}

data/templates/project/styles.sass

@@ -2,67 +2,27 @@
  * by Joni Korpi
  * http://lessframework.com */
 
+@import partials/base
 @import lessframework/reset
-@import lessframework/grid
-@import lessframework/text
+@import lessframework/text/15
 
 h1
-  @include huge-font
+  @include huge
 
 h2
-  @include large-font
+  @include large
 
 h3
-  @include big-font
+  @include big
 
-::selection
-  background: rgb(255,255,0)
-
-::-moz-selection
-  background: rgb(255,255,0)
-
-img::selection
-  background: transparent
-
-img::-moz-selection
-  background: transparent
-
-
-/*  Default 8-column layout
-  For tablets at 768 px, netbooks, and old browsers. */
 
 body
-  @include grid(8)
-  @include font-stack
-  @include normal-font
   background: rgb(232,232,232)
   -webkit-tap-highlight-color: rgb(255,255,0)
 
 
-/*  13-column layout
-  For laptops, desktops, and hdtvs at 1280 px and beyond. */
-
-@media only screen and (min-width: 1212px)
-
-  body
-    @include grid(13)
-
-
-/*	5-column layout
-	For 480 px mobiles, narrow browsers, and landscape iPhones.	*/
-
-@media only screen and (max-width: 767px) and (min-width: 480px)
-
-  body
-    @include grid(5)
-    @include mobile-safari
-
-
-/*	3-column layout
-	For all iPhones, iPod Touches, and other 320 px mobiles.	*/
-
-@media only screen and (max-width: 479px)
-
-  body
-    @include grid(3)
-    @include mobile-safari
+@import partials/8
+@import partials/13
+@import partials/5
+@import partials/3
+@import partials/iphone4

metadata

@@ -1,13 +1,12 @@
 --- !ruby/object:Gem::Specification 
 name: compass-less-plugin
 version: !ruby/object:Gem::Version 
-  hash: 17
+  hash: 5
   prerelease: false
   segments: 
   - 0
-  - 3
-  - 1
-  version: 0.3.1
+  - 7
+  version: "0.7"
 platform: ruby
 authors: 
 - William Wells
@@ -51,8 +50,16 @@ files:
 - lib/lessframework.rb
 - stylesheets/lessframework/_grid.scss
 - stylesheets/lessframework/_reset.scss
-- stylesheets/lessframework/_text.scss
+- stylesheets/lessframework/reset/_utilities.scss
+- stylesheets/lessframework/text/_13.scss
+- stylesheets/lessframework/text/_15.scss
 - templates/project/manifest.rb
+- templates/project/partials/_13.sass
+- templates/project/partials/_3.sass
+- templates/project/partials/_5.sass
+- templates/project/partials/_8.sass
+- templates/project/partials/_base.sass
+- templates/project/partials/_iphone4.scss
 - templates/project/styles.sass
 has_rdoc: true
 homepage: http://github.com/willhw/compass-less-plugin

data/stylesheets/lessframework/_text.scss

@@ -1,66 +0,0 @@
-$less-line-height: 1.5 !default;
-
-@mixin font-stack {
-  @if $less-line-height == 1.3 {
-    font-family: Palatino, Constantia, "Palatino Linotype", serif;
-  } @else {
-    font-family: Helvetica, Arial, sans-serif;
-  }
-}
-
-@mixin gigantic-font {
-  @if $less-line-height == 1.3 {
-    font-size: 123px;
-    line-height: 132px;
-  } @else {
-    font-size: 110px;
-    line-height: 120px;
-  }  
-  
-  letter-spacing: -2px;
-}
-
-@mixin huge-font {
-  @if $less-line-height == 1.3 {
-    font-size: 76px;
-    line-height: 84px;
-    letter-spacing: -2px;
-  } @else {
-    font-size: 68px;
-    line-height: 72px;
-    letter-spacing: -1px;
-  }
-}
-
-@mixin large-font {
-  @if $less-line-height == 1.3 {
-    font-size: 46px;
-    letter-spacing: -1px;
-  } @else {
-    font-size: 42px;
-  }
-  line-height: 48px;
-}
-
-@mixin big-font {
-  @if $less-line-height == 1.3 {
-    font-size: 29px;
-  } @else {
-    font-size: 26px;
-  }
-  line-height: 36px;
-}
-
-@mixin normal-font {
-  @if $less-line-height == 1.3 {
-    font-size: 18px;
-  } @else {
-    font-size: 16px;
-  }
-  line-height: 24px;
-}
-
-@mixin small-font {
-  font-size: 13px;
-  line-height: 18px;
-}