compass-less-plugin 0.3.1

data/.gitignore

@@ -0,0 +1,4 @@
+pkg/*
+*.gem
+.bundle
+.DS_Store

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in compass-less-plugin.gemspec
+gemspec

data/README.mkdn

@@ -0,0 +1,81 @@
+Less Framework - Compass Plugin
+===============================
+
+This plugin adds Less Framework 3 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/)
+
+
+Installation
+============
+
+    gem install compass-less-plugin
+
+
+Create a Compass Project using Less Framework
+=============================================
+
+    compass create -r lessframework my_project --using less
+
+Afterwards, edit the generated `styles.scss` file.
+
+
+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.
+
+
+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:
+
+    body {
+      @include grid(8);
+    }
+
+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.
+
+To prevent Mobile Safari from bumping up font sizes when in landscape mode, use the 
+`mobile-safari` mixin:
+
+    @media only screen and (max-width: 479px) {
+    
+      body {
+        @include grid(3);
+        @include mobile-safari;
+      }
+    }
+
+
+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. */
+    }
+
+    #sidebar {
+      @include column(3, true); /* Creates a 228 px column without the right gutter. */
+    }
+

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/compass-less-plugin.gemspec

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = "compass-less-plugin"
+  s.version     = "0.3.1"
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["William Wells"]
+  s.email       = ["projects@hanwells.me"]
+  s.homepage    = "http://github.com/willhw/compass-less-plugin"
+  s.summary     = %q{Compass compatible port of Less Framework 3}
+  s.description = %q{Less Framework is a cross-device CSS grid system based on using inline media queries.}
+
+  s.rubyforge_project = "compass-less-plugin"
+
+  s.add_dependency "compass", ">= 0.10"
+
+  s.files = `git ls-files`.split("\n")
+
+  s.has_rdoc = false
+  s.require_paths = ["lib"]
+end

data/lib/lessframework.rb

@@ -0,0 +1,2 @@
+require "compass"
+Compass::Frameworks.register("less", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/lessframework/_grid.scss

@@ -0,0 +1,28 @@
+$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 == 5 {
+    padding: 60px 42px 0;
+  } @else if $columns == 3 {
+    padding: 48px 46px 0;
+  } @else {
+    padding: 84px 60px 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

@@ -0,0 +1,21 @@
+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%; }

data/stylesheets/lessframework/_text.scss

@@ -0,0 +1,66 @@
+$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;
+}

data/templates/project/manifest.rb

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

data/templates/project/styles.sass

@@ -0,0 +1,68 @@
+/* Less Framework 3
+ * by Joni Korpi
+ * http://lessframework.com */
+
+@import lessframework/reset
+@import lessframework/grid
+@import lessframework/text
+
+h1
+  @include huge-font
+
+h2
+  @include large-font
+
+h3
+  @include big-font
+
+::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

metadata

@@ -0,0 +1,92 @@
+--- !ruby/object:Gem::Specification 
+name: compass-less-plugin
+version: !ruby/object:Gem::Version 
+  hash: 17
+  prerelease: false
+  segments: 
+  - 0
+  - 3
+  - 1
+  version: 0.3.1
+platform: ruby
+authors: 
+- William Wells
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-01-14 00:00:00 -06:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 31
+        segments: 
+        - 0
+        - 10
+        version: "0.10"
+  type: :runtime
+  version_requirements: *id001
+description: Less Framework is a cross-device CSS grid system based on using inline media queries.
+email: 
+- projects@hanwells.me
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- README.mkdn
+- Rakefile
+- compass-less-plugin.gemspec
+- lib/lessframework.rb
+- stylesheets/lessframework/_grid.scss
+- stylesheets/lessframework/_reset.scss
+- stylesheets/lessframework/_text.scss
+- templates/project/manifest.rb
+- templates/project/styles.sass
+has_rdoc: true
+homepage: http://github.com/willhw/compass-less-plugin
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: compass-less-plugin
+rubygems_version: 1.3.7
+signing_key: 
+specification_version: 3
+summary: Compass compatible port of Less Framework 3
+test_files: []
+