Less Framework Compass Plugin
=============================

This plugin adds Less Framework 4 to [Compass](http://compass-style.org/).

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
============

    gem install compass-less-plugin


Getting Started
===============

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.

`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 `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
============

The global reset included with the Less Framework can be used by importing the
`less/reset` file.


The Grid
========

To calculate column widths, use the `column(n, [last])` mixin:

    #content {
      @include column(5);
    }

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`:

    #sidebar {
      @include column(3, true);
    }


Typography
==========

Less Framework 4 contains three typographic presets:

* `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

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`
* `small`


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


Special Thanks
==============

Thanks to Joni Korpi for providing the Less Framework to the community, and to
Samson Ootoovak for helping me test the version 1 beta.