From 1b153235ba09e462532dc154eb528f1cf68c9f4b Mon Sep 17 00:00:00 2001 From: Mark Perkins Date: Mon, 25 Jun 2012 15:27:55 +0100 Subject: [PATCH] More doc updates --- README.md | 119 +++++++++++++++++++++++++++++++++---- _compiled/example.css | 6 +- examples/example.less | 2 +- examples/grids.html | 2 +- examples/index.html | 2 +- examples/nested-grids.html | 2 +- examples/other.html | 2 +- examples/sprites.html | 2 +- 8 files changed, 115 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 65a2225..5898608 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,22 @@ The core tenets of this mixin library are to *avoid output bloat wherever possib Usage ----- -Simply `@import` the `mixins/all.less` file into the top of your main Less file, and then override any of the settings as described below, if required. +Simply `@import` the `mixins/all.less` file into the top of your main Less file, and then (optionally) override any of the settings as described below. -Settings --------- +The `mixins/all.less` file itself simply imports all the individual Less files into one place. The mixins and settings for these individual files are documented under in their various groupings below: + +* [Settings](#global-settings) +* [Resets](#resets) +* [Shortcuts & Helpers](#shortcuts--helpers) +* [Typography](#typography) +* [Sprites](#sprites) +* [Icons](#icons) +* [Grids](#grids) + + + +Global settings +--------------- ClearLess defines a few settings that affect the output of some of the mixins. These are just [Less variables](http://lesscss.org/#-variables), and have their default values defined in `mixins/settings.less`. @@ -30,7 +42,9 @@ The following global settings are defined: ### @using-modernizr -`@using-modernizr: false;` +```css +@using-modernizr: false; +``` If using Modernizr, some of the mixins will swap to using the Modernizr-generated classes to determine support for various features and thus what CSS to generate (see the icon/sprites mixins for an example). Set this to `true` to enable this behaviour. @@ -40,7 +54,9 @@ Modernizr feature tests currently used (if using a custom Modernizr build): ### @using-ieclasses -`@using-ieclasses: true;` +```css +@using-ieclasses: true; +``` If using [H5BP](http://html5boilerplate.com/)-style conditional comments to add IE-indentifying classes to the HTML element, some mixins will use them to patch IE support where there are known issues. If this is set to `false` then these mixins will fall back to hacks like the [star hack](http://en.wikipedia.org/wiki/CSS_filter#Star_hack) to provide this support instead. @@ -53,13 +69,17 @@ Convinience mixins that should be used *outside of element selectors* as a quick ### .reset; -`.reset();` +```css +.reset(); +``` Outputs styles from the '[Meyer Reset](http://meyerweb.com/eric/tools/css/reset/)'. ### .normalize; -`.normalize();` +```css +.normalize(); +``` Outputs styles from [normalize.css](http://necolas.github.com/normalize.css/). @@ -70,6 +90,81 @@ Shortcuts & Helpers These are the most basic mixins. *Shortcuts* typically provide a quick way to generate all the required vendor-prefixed versions of a property, and/or give a more manageable syntax for defining things like CSS gradients. *Helpers* are mixins that typically generate boilerplate code for common use cases, such as `display: inline-block;` statements with IE7 fixes, or image replacement code. +### .border-radius() + +Generates a box-radius property with the appropriate vendor prefixes. + +```css +.border-radius( <@radius> ); +``` + +* `@radius`: Radius to round all corners to. Defaults to 5px. + +```css +.border-radius( <@top-left>, <@top-right>, <@bottom-left>, <@bottom-right>); +``` + +* `@top-left`: Radius to round the top-left corner to. Defaults to 5px. +* `@top-right`: Radius to round the top-right corner to. Defaults to 5px. +* `@bottom-left`: Radius to round the bottom-left corner to. Defaults to 5px. +* `@bottom-right`: Radius to round the bottom-right corner to. Defaults to 5px. + +```css +/* Usage: */ +.div1 { + .border-radius( 5px ); +} +.div2 { + .border-radius( 5px, 7px, 5px, 10px ); +} + +/* Output: */ +.div1 { + -moz-border-radius: 5px; + border-radius: 5px; +} +.div2 { + -webkit-border-top-left-radius: 5px; + -webkit-border-top-right-radius: 7px; + -webkit-border-bottom-left-radius: 5px; + -webkit-border-bottom-right-radius: 10px; + -moz-border-radius-topleft: 5px; + -moz-border-radius-topright: 7px; + -moz-border-radius-bottomleft: 5px; + -moz-border-radius-bottomright: 10px; + border-top-left-radius: 5px; + border-top-right-radius: 7px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 10px; +} +``` + + +### .box-sizing() + +Generates a box-sizing property with the appropriate vendor prefixes. + +```css +.box-sizing( <@type> ); +``` + +* `@type`: Box-sizing property value. Defaults to border-box. + +```css +/* Usage: */ +.div { + .box-sizing( border-box ); +} +/* Output: */ +.div { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +``` + + Typography ------- @@ -127,12 +222,6 @@ p { } ``` -Grids -------- - -Documentation coming soon. - - Sprites ------- @@ -145,6 +234,10 @@ Icons Documentation coming soon. +Grids +------- + +Documentation coming soon. diff --git a/_compiled/example.css b/_compiled/example.css index 0428f1c..b714148 100644 --- a/_compiled/example.css +++ b/_compiled/example.css @@ -287,7 +287,7 @@ h2 { position: absolute; display: block; content: ' '; - background-image: url('/examples/sprite.png'); + background-image: url('../examples/sprite.png'); background-repeat: no-repeat; background-position: -100px -50px; height: 11px; @@ -466,7 +466,7 @@ h2 { position: absolute; display: block; content: ' '; - background-image: url('/examples/sprite.png'); + background-image: url('../examples/sprite.png'); background-repeat: no-repeat; background-position: -100px -50px; height: 11px; @@ -490,7 +490,7 @@ h2 { position: absolute; display: block; content: ' '; - background-image: url('/examples/sprite.png'); + background-image: url('../examples/sprite.png'); background-repeat: no-repeat; background-position: 0px 0px; height: 28px; diff --git a/examples/example.less b/examples/example.less index 5c8888d..a432c21 100644 --- a/examples/example.less +++ b/examples/example.less @@ -2,7 +2,7 @@ // Default settings override -@sprite-image: url('/examples/sprite.png'); +@sprite-image: url('../examples/sprite.png'); @using-modernizr: false; @using-ieclasses: true; diff --git a/examples/grids.html b/examples/grids.html index 3a52e7f..5e78ff5 100644 --- a/examples/grids.html +++ b/examples/grids.html @@ -5,7 +5,7 @@ - + ClearLESS Examples diff --git a/examples/index.html b/examples/index.html index 435462d..a58cab9 100644 --- a/examples/index.html +++ b/examples/index.html @@ -5,7 +5,7 @@ - + ClearLESS Examples diff --git a/examples/nested-grids.html b/examples/nested-grids.html index dd20607..f48d995 100644 --- a/examples/nested-grids.html +++ b/examples/nested-grids.html @@ -5,7 +5,7 @@ - + ClearLESS Examples diff --git a/examples/other.html b/examples/other.html index b992a88..e049774 100644 --- a/examples/other.html +++ b/examples/other.html @@ -5,7 +5,7 @@ - + ClearLESS Examples diff --git a/examples/sprites.html b/examples/sprites.html index c766cb3..29bd717 100644 --- a/examples/sprites.html +++ b/examples/sprites.html @@ -5,7 +5,7 @@ - + ClearLESS Examples