compass-less-plugin 0.8 → 1.0.beta.0

data/README.mkdn

@@ -1,10 +1,20 @@
 Less Framework Compass Plugin
 =============================
 
-This plugin adds Less Framework 3 to [Compass](http://compass-style.org/).
+This plugin adds Less Framework 4 to [Compass](http://compass-style.org/).
 
-Less Framework 3 was written by Joni Korpi. For more information, visit the official site at
-[http:/lessframework.com/](http://lessframework.com/)
+Less Framework was written by Joni Korpi. For more information, visit the
+official site at [http:/lessframework.com/](http://lessframework.com/)
+
+
+Less Framework 4
+================
+
+Less Framework 4 was a significant upgrade to the version that came before it.
+As a result, this plugin is now **backwards incompatible** with earlier
+versions.
+
+If you need to use Less Framework 3, use version 0.8 of this plugin.
 
 
 Installation
@@ -16,23 +26,45 @@ Installation
 Getting Started
 ===============
 
-To create a Compass project using Less Framework 3, enter:
+To create a Compass project using Less Framework, enter:
+
+    compass create -r less my_project --using less
+
+The above command will generate a directory named `my_project` populated with
+the Compass project files. If you look in the project `src` directory, you will
+find a `less.scss` file and a `partials` directory.
 
-    compass create -r lessframework my_project --using less
+`less.scss` is the plugin bootstrap file, and imports all necessary support
+files to use the framework. This file can also be used to configure some of the
+plugin settings (see the `Framework Configuration Variables` section for more
+details).
 
-The above command will generate a `styles.scss` file and a `partials` directory containing
-files pre-populated with media queries for each grid layout:
+The `partials` directory contains files pre-populated with media queries for
+the grid layouts defined by the Less Framework:
+
+* `default` - 10 columns at 992px; for desktops, laptops, tablets in landscape
+   orientation, and all old browsers
+* `tablet` - 8 columns at 768px; for iPads and other tablets
+* `mobile` - 3 columns at 320px; for iPhones, iPod Touches, and most other
+   modern mobile devices
+* `wide-mobile` - 5 columns at 480px; for large mobile devices, as well as
+   iPhones and iPod Touches in landscape orientation
+* `high-px-ratio` - Overrides styles for devices with a device-pixel-ratio of
+   2+, such as the iPhone 4
+
+A `partials/global` file is also provided to define global styles shared by all
+layouts.
+
+
+Global Reset
+============
 
-* `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/_11` - 984 px layout for those wanting something close to 960 px
-* `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
+The global reset included with the Less Framework can be used by importing the
+`less/reset` file.
 
 
-Populating the Grid
-====================
+The Grid
+========
 
 To calculate column widths, use the `column(n, [last])` mixin:
 
@@ -40,10 +72,10 @@ To calculate column widths, use the `column(n, [last])` mixin:
       @include column(5);
     }
 
-This will create a 396 px column with a 24 px gutter to the right.
+This will give an element a width of 436px with a 24px gutter to the right.
 
-To avoid creating the right gutter (e.g. an element is the last column in a row),
-set the `last` parameter to `true`:
+To avoid creating the right gutter (e.g. an element is the last column in a
+row), set the `$last` parameter to `true`:
 
     #sidebar {
       @include column(3, true);
@@ -53,26 +85,50 @@ set the `last` parameter to `true`:
 Typography
 ==========
 
-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`.
+Less Framework 4 contains three typographic presets:
 
-**Note to users of versions prior to 0.7:** Please update the `lessframework/text`
-import to be one of the aforementioned text modules when upgrading.
+* `typography/16px` - Optimized for 1.5 line-height; good for fonts like
+   Georgia
+* `typography/17px` - Optimized for 1.4 line-height; good for fonts like
+   Palatino
+* `typography/18px` - Optimized for 1.33 line-height; good for fonts like Times
 
-
-Typography Mixins
-=================
-
-The following typography mixins are available:
+If one of the above presets are imported, the following CSS classes also become
+available to help customize your text:
 
 * `gigantic`
 * `huge`
 * `large`
+* `bigger`
 * `big`
-* `normal`
 * `small`
 
-In addition, the `$less-font-family` variable contains the font stack assigned to
-the imported typography module.
+
+Framework Configuration Variables
+=================================
+
+The following variables are available to configure the plugin:
+
+* `$less-grid-element` - The element to mix the grid definition into; defaults
+   to `body`
+* `$less-grid-padding` - Globally determines if the grid mixin should also
+   include the default padding; defaults to `true`
+
+Be sure to configure these variables before any `@import` calls are made,
+otherwise the results may be inconsistent. Also, wrap any string variable
+values with the `unquote` function, e.g.
+
+    $less-grid-element: unquote("#container");
+
+
+Mixins
+======
+
+* `grid($columns)` - Sets up a grid with given number of columns
+* `grid-padding($columns)` - Imports the default padding for a grid with the
+   given number of columns; can be used to specify which layouts will use the
+   default grid padding as defined by the Less Framework
+* `column($columns, $last)` - Sets the width of an element to span the number
+   of given columns with a margin to the right; to disable the margin, set
+   `$last` to `false`
+* `selection-color($color)` - Sets the background color used for text selection

data/compass-less-plugin.gemspec

@@ -3,12 +3,12 @@ $:.push File.expand_path("../lib", __FILE__)
 
 Gem::Specification.new do |s|
   s.name        = "compass-less-plugin"
-  s.version     = "0.8"
+  s.version     = "1.0.beta.0"
   s.platform    = Gem::Platform::RUBY
   s.authors     = ["William Wells"]
-  s.email       = ["projects@hanwells.me"]
+  s.email       = ["less@hapa.me"]
   s.homepage    = "http://github.com/willhw/compass-less-plugin"
-  s.summary     = %q{Compass compatible port of Less Framework 3}
+  s.summary     = %q{Compass compatible port of Less Framework}
   s.description = %q{Less Framework is a cross-device CSS grid system based on using inline media queries.}
 
   s.rubyforge_project = "compass-less-plugin"

data/stylesheets/less/_framework.scss

@@ -0,0 +1,39 @@
+$less-grid-element: unquote("body") !default;
+$less-grid-padding: true !default;
+$less-font-family: Arial, sans-serif !default;
+
+@mixin grid($columns, $padding: $less-grid-padding) {
+  @include column($columns, true);
+
+  @if $padding == true {
+    @include grid-padding($columns);
+  }
+}
+
+@mixin grid-padding($columns) {
+  @if $columns == 10 {
+    padding: 72px 48px 84px;
+  } @else if $columns == 8 {
+    padding: 48px 28px 60px;
+  } @else if $columns == 3 {
+    padding: 48px 34px 60px;
+  } @else if $columns == 5 {
+    padding: 36px 22px 48px;
+  }
+}
+
+@mixin column($columns, $last: false) {
+  width: (68px * $columns) + (24px * ($columns - 1));
+
+  @if $last != true {
+    margin-right: 24px;
+  }
+}
+
+@mixin selection-color($color: unquote("rgb(255,255,158)")) {
+  ::selection {background: #{$color};}
+  ::-moz-selection {background: #{$color};}
+  img::selection {background: transparent;}
+  img::-moz-selection {background: transparent;}
+  body {-webkit-tap-highlight-color: #{$color};}
+}

data/stylesheets/less/_reset.scss

@@ -0,0 +1,18 @@
+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, hr,
+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;}

data/stylesheets/less/typography/_16px.scss

@@ -0,0 +1,35 @@
+.gigantic {
+	font-size: 110px;
+	line-height: 120px;
+	letter-spacing: -2px;
+}
+
+.huge {
+	font-size: 68px;
+	line-height: 72px;
+	letter-spacing: -1px;
+}
+
+.large {
+	font-size: 42px;
+	line-height: 48px;
+}
+
+.bigger {
+	font-size: 26px;
+	line-height: 36px;
+}
+
+.big {
+	font-size: 22px;
+	line-height: 30px;
+}
+
+body {
+	font: 16px/24px Georgia, serif;
+}
+
+.small {
+	font-size: 13px;
+	line-height: 18px;
+}

data/stylesheets/less/typography/_17px.scss

@@ -0,0 +1,35 @@
+.gigantic {
+	font-size: 116px;
+	line-height: 120px;
+	letter-spacing: -2px;
+}
+
+.huge {
+	font-size: 72px;
+	line-height: 72px;
+	letter-spacing: -1px;
+}
+
+.large {
+	font-size: 44px;
+	line-height: 48px;
+}
+
+.bigger {
+	font-size: 28px;
+	line-height: 36px;
+}
+
+.big {
+	font-size: 24px;
+	line-height: 30px;
+}
+
+body {
+	font: 17px/24px Palatino, Constantia, "Palatino Linotype", serif;
+}
+
+.small {
+	font-size: 13px;
+	line-height: 18px;
+}

data/stylesheets/less/typography/_18px.scss

@@ -0,0 +1,37 @@
+$less-font-family: "Times New Roman", Times, serif;
+
+.gigantic {
+	font-size: 123px;
+	line-height: 132px;
+	letter-spacing: -2px;
+}
+
+.huge {
+	font-size: 76px;
+	line-height: 84px;
+	letter-spacing: -1px;
+}
+
+.large {
+	font-size: 47px;
+	line-height: 48px;
+}
+
+.bigger {
+	font-size: 29px;
+	line-height: 36px;
+}
+
+.big {
+	font-size: 25px;
+	line-height: 30px;
+}
+
+body {
+	font: 18px/24px "Times New Roman", Times, serif;
+}
+
+.small {
+	font-size: 13px;
+	line-height: 18px;
+}

data/templates/project/example.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title></title>
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link rel="stylesheet" media="all" href="stylesheets/less.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
+  </head>
+  <body lang="en">
+    <div style="height: 600px; background: rgb(60,97,158)"></div>
+  </body>
+</html>

data/templates/project/less.sass

@@ -0,0 +1,19 @@
+/* Less Framework 4
+   http://lessframework.com
+   by Joni Korpi
+   License: http://creativecommons.org/licenses/MIT/ */
+
+// Less Framework Compass Plugin
+// by William Wells <less@hapa.me>
+// https://github.com/willhw/compass-less-plugin
+
+@import less/reset
+@import less/framework
+@import less/typography/16px
+
+@import partials/global
+@import partials/default
+@import partials/tablet
+@import partials/mobile
+@import partials/wide-mobile
+@import partials/high-px-ratio

data/templates/project/manifest.rb

@@ -1,11 +1,6 @@
-stylesheet "styles.sass", :media => "all"
-stylesheet "partials/_base.sass"
-stylesheet "partials/_3.sass"
-stylesheet "partials/_5.sass"
-stylesheet "partials/_8.sass"
-stylesheet "partials/_11.sass"
-stylesheet "partials/_13.sass"
-stylesheet "partials/_iphone4.scss"
+discover :stylesheet
+
+html "example.html"
 
 description "Less Framework"
 

data/templates/project/partials/_default.sass

@@ -0,0 +1,7 @@
+/* Default Layout: 992px.
+   Gutters: 24px.
+   Outer margins: 48px.
+   Leftover space for scrollbars @1024px: 32px.  */
+
+#{$less-grid-element}
+  @include grid(10)

data/templates/project/partials/_global.sass

@@ -0,0 +1,28 @@
+// Global style definitions
+
+h1
+  @extend .huge
+
+h2
+  @extend .large
+
+h3
+  @extend .bigger
+
+h4
+  @extend .big
+
+small
+  @extend .small
+
+
+body
+  background: rgb(232,232,232)
+  color: rgb(60,60,60)
+
+  // Stops Mobile Safari from auto-adjusting font-sizes
+  -webkit-text-size-adjust: 100%
+
+
+// Selection colors (easy to forget)
++selection-color(unquote("rgb(255,255,158)"))

data/templates/project/partials/_high-px-ratio.scss

@@ -0,0 +1,8 @@
+/* Retina media query.
+   Overrides styles for devices with a
+   device-pixel-ratio of 2+, such as iPhone 4.  */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+  #{$less-grid-element} {
+  }
+}

data/templates/project/partials/_mobile.sass

@@ -0,0 +1,8 @@
+/*  Mobile Layout: 320px.
+    Gutters: 24px.
+    Outer margins: 34px.
+    Inherits styles from: Default Layout.  */
+
+@media only screen and (max-width: 767px)
+  #{$less-grid-element}
+    @include grid(3)

data/templates/project/partials/_tablet.sass

@@ -0,0 +1,8 @@
+/*  Tablet Layout: 768px.
+    Gutters: 24px.
+    Outer margins: 28px.
+    Inherits styles from: Default Layout.  */
+
+@media only screen and (min-width: 768px) and (max-width: 991px)
+  #{$less-grid-element}
+    @include grid(8)

data/templates/project/partials/_wide-mobile.sass

@@ -0,0 +1,8 @@
+/* Wide Mobile Layout: 480px.
+   Gutters: 24px.
+   Outer margins: 22px.
+   Inherits styles from: Default Layout, Mobile Layout.  */
+
+@media only screen and (min-width: 480px) and (max-width: 767px)
+  #{$less-grid-element}
+    @include grid(5)

metadata

@@ -1,12 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: compass-less-plugin
 version: !ruby/object:Gem::Version 
-  hash: 27
-  prerelease: false
+  hash: 62196291
+  prerelease: 4
   segments: 
+  - 1
+  - 0
+  - beta
   - 0
-  - 8
-  version: "0.8"
+  version: 1.0.beta.0
 platform: ruby
 authors: 
 - William Wells
@@ -14,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-01-14 00:00:00 -06:00
+date: 2011-02-19 00:00:00 -06:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -34,7 +36,7 @@ dependencies:
   version_requirements: *id001
 description: Less Framework is a cross-device CSS grid system based on using inline media queries.
 email: 
-- projects@hanwells.me
+- less@hapa.me
 executables: []
 
 extensions: []
@@ -47,21 +49,21 @@ files:
 - README.mkdn
 - Rakefile
 - compass-less-plugin.gemspec
-- lib/lessframework.rb
-- stylesheets/lessframework/_grid.scss
-- stylesheets/lessframework/_reset.scss
-- stylesheets/lessframework/reset/_utilities.scss
-- stylesheets/lessframework/text/_13.scss
-- stylesheets/lessframework/text/_15.scss
+- lib/less.rb
+- stylesheets/less/_framework.scss
+- stylesheets/less/_reset.scss
+- stylesheets/less/typography/_16px.scss
+- stylesheets/less/typography/_17px.scss
+- stylesheets/less/typography/_18px.scss
+- templates/project/example.html
+- templates/project/less.sass
 - templates/project/manifest.rb
-- templates/project/partials/_11.sass
-- 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
+- templates/project/partials/_default.sass
+- templates/project/partials/_global.sass
+- templates/project/partials/_high-px-ratio.scss
+- templates/project/partials/_mobile.sass
+- templates/project/partials/_tablet.sass
+- templates/project/partials/_wide-mobile.sass
 has_rdoc: true
 homepage: http://github.com/willhw/compass-less-plugin
 licenses: []
@@ -83,18 +85,20 @@ required_ruby_version: !ruby/object:Gem::Requirement
 required_rubygems_version: !ruby/object:Gem::Requirement 
   none: false
   requirements: 
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version 
-      hash: 3
+      hash: 25
       segments: 
-      - 0
-      version: "0"
+      - 1
+      - 3
+      - 1
+      version: 1.3.1
 requirements: []
 
 rubyforge_project: compass-less-plugin
-rubygems_version: 1.3.7
+rubygems_version: 1.5.2
 signing_key: 
 specification_version: 3
-summary: Compass compatible port of Less Framework 3
+summary: Compass compatible port of Less Framework
 test_files: []
 

data/stylesheets/lessframework/_grid.scss

@@ -1,30 +0,0 @@
-$less-column-width: 60px !default;
-$less-gutter-width: 24px !default;
-
-@mixin grid($columns) {
-  @include column($columns, true);
-  
-  @if $columns == 13 {
-    padding: 96px 72px 0;
-  } @else if $columns == 11 {
-    padding: 66px 42px 0;
-  } @else if $columns == 8 {
-    padding: 84px 60px 0;
-  } @else if $columns == 5 {
-    padding: 60px 42px 0;
-  } @else if $columns == 3 {
-    padding: 48px 46px 0;
-  }
-}
-
-@mixin column($columns, $last: false) {
-  width: ($less-column-width * $columns) + ($less-gutter-width * ($columns - 1));
-  
-  @if $last != true {
-    margin-right: $less-gutter-width;
-  }
-}
-
-@mixin mobile-safari {
-  -webkit-text-size-adjust: 100%;
-}

data/stylesheets/lessframework/_reset.scss

@@ -1,3 +0,0 @@
-@import "reset/utilities";
-
-@include less-reset;

data/stylesheets/lessframework/reset/_utilities.scss

@@ -1,30 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-$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

@@ -1,37 +0,0 @@
-$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/partials/_11.sass

@@ -1,6 +0,0 @@
-/* 11-column layout
- * 984 px layout for those wanting something close to 960 px */
-
-@media only screen and (max-width: 1211px) and (min-width: 984px)
-  body
-    @include grid(11)

data/templates/project/partials/_13.sass

@@ -1,6 +0,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)

data/templates/project/partials/_3.sass

@@ -1,7 +0,0 @@
-/* 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

@@ -1,7 +0,0 @@
-/* 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

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

data/templates/project/partials/_base.sass

@@ -1,4 +0,0 @@
-$less-column-width: 60px
-$less-gutter-width: 24px
-
-@import lessframework/grid

data/templates/project/partials/_iphone4.scss

@@ -1,5 +0,0 @@
-/* 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

@@ -1,28 +0,0 @@
-/* Less Framework 3
- * by Joni Korpi
- * http://lessframework.com */
-
-@import partials/base
-@import lessframework/reset
-@import lessframework/text/15
-
-h1
-  @include huge
-
-h2
-  @include large
-
-h3
-  @include big
-
-
-body
-  background: rgb(232,232,232)
-  -webkit-tap-highlight-color: rgb(255,255,0)
-
-
-@import partials/8
-@import partials/13
-@import partials/5
-@import partials/3
-@import partials/iphone4