README.mkdn in compass-less-plugin-0.3.1 vs README.mkdn in compass-less-plugin-0.7
- old
+ new
@@ -11,71 +11,49 @@
============
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:
+Populating the Grid
+====================
- $less-line-height: 1.3;
- @import "lessframework/text";
+To calculate column widths, use the `column(n, [last])` mixin:
-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);
+ #content {
+ @include column(5);
}
-The above example creates an 8-column grid with 60 px margins.
+This will create a 396 px column with a 24 px gutter to the right.
-The number of columns, `n`, can be:
+To avoid creating the right gutter (e.g. an element is the last column in a row),
+set the `last` parameter to `true`:
-* `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;
- }
+ #sidebar {
+ @include column(3, true);
}
-Populating the Grid
-====================
+Customizing Typography
+======================
-To calculate the width of columns within the grid, use the `column(n, [last])` mixin:
+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`.
- #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. */
- }
-
+**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.