Permalink
Browse files

Initial commit.

  • Loading branch information...
0 parents commit c3d67519ab08ec0dce8031b9743663d8adb780c8 William Wells committed Jan 13, 2011
@@ -0,0 +1,4 @@
+pkg/*
+*.gem
+.bundle
+.DS_Store
@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in compass-less-plugin.gemspec
+gemspec
@@ -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. */
+ }
+
@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks
@@ -0,0 +1,31 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+
+Gem::Specification.new do |s|
+ s.name = "compass-less-plugin"
+ s.version = "0.3"
+ 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 = [
+ "compass-less-plugin.gemspec",
+ "README.mkdn",
+ "lib/lessframework.rb",
+ "stylesheets/lessframework/_grid.scss",
+ "stylesheets/lessframework/_reset.scss",
+ "stylesheets/lessframework/_text.scss",
+ "templates/project/manifest.rb",
+ "templates/project/styles.sass",
+ ]
+
+ s.has_rdoc = false
+ s.require_paths = ["lib"]
+end
@@ -0,0 +1,2 @@
+require "compass"
+Compass::Frameworks.register("less", :path => "#{File.dirname(__FILE__)}/..")
@@ -0,0 +1,28 @@
+$less-column-width: 60px !default;
+$less-gutter-width: 24px !default;
+
+@mixin grid($columns) {
+ @include column($columns);
+
+ @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%;
+}
@@ -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%; }
@@ -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;
+}
@@ -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/
+}
@@ -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

0 comments on commit c3d6751

Please sign in to comment.