clearless/params.json

{"body":"ClearLess\r\n=========\r\n\r\nA reuseable collection of carefully-considered [Less](http://lesscss.org/) mixins, or *YALML* (Yet Another Less Mixin Library).\r\n\r\nThe core tenets of this mixin library are to *avoid output bloat wherever possible* (via duplicated properties etc) and to *provide flexibile, configurable solutions* to the problems that are addressed by the library (i.e. by using Modernizr classes, browser hacks or not, etc). The aim is to give the author the benefits of reusable shortcuts without obliterating personal style and generating bloated stylesheets.\r\n\r\n**Before diving in** it is strongly recommended that you peruse the [notes on usage and best practices](#some-notes-on-usage-and-best-practices) at the end of this document, which gives an overview of how you can take full advantage of ClearLess without compromising the generated CSS output.\r\n\r\nUsage\r\n-----\r\n\r\nSimply `@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.\r\n\r\nThe `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:\r\n\r\n* [Settings](#global-settings)\r\n* [Resets](#resets)\r\n* [Shortcuts & Helpers](#shortcuts--helpers)\r\n* [Typography](#typography)\r\n* [Sprites](#sprites)\r\n* [Icons](#icons)\r\n* [Grids](#grids)\r\n\r\n\r\nGlobal settings\r\n---------------\r\n\r\nClearLess 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`.\r\n\r\nTo override the defaults, simply redefine them after importing the mixins:\r\n\r\n```css\r\n@import \"mixins/all\";\r\n\r\n@using-modernizr: true;\r\n@base-font-size: 14;\r\n```\r\n\r\nThe following global settings are defined:\r\n\r\n### SETTING: @using-modernizr\r\n\r\n```css\r\n@using-modernizr: false;\r\n```\r\n\r\nIf 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.\r\n\r\nModernizr feature tests currently used (if using a custom Modernizr build):\r\n\r\n* Generated Content (`.generatedcontent`)\r\n\r\n### SETTING: @using-ieclasses\r\n\r\n```css\r\n@using-ieclasses: true;\r\n```\r\n\r\nIf 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.\r\n\r\n### SETTING: @disable-filters\r\n\r\n```css\r\n@disable-filters: true;\r\n```\r\n\r\nWhether or not certain mixins (like the gradient mixins) should generate IE fallbacks using the MS proprietary `filter` property or not. Disabled by default due to performance issues with filter props.\r\n\r\n**Other section-specific settings are documented alongside their mixins below.**\r\n\r\nResets\r\n-------\r\n\r\nConvinience mixins that should be used *outside of element selectors* as a quick way to generate popular reset stylesheet contents.\r\n\r\n### .reset;\r\n\r\n```css\r\n.reset();\r\n```\r\n\r\nOutputs styles from the '[Meyer Reset](http://meyerweb.com/eric/tools/css/reset/)'.\r\n\r\n### .normalize;\r\n\r\n```css\r\n.normalize();\r\n```\r\n\r\nOutputs styles from [normalize.css](http://necolas.github.com/normalize.css/).\r\n\r\n\r\nShortcuts & Helpers\r\n-------------------\r\n\r\nThese 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.\r\n\r\n* [.border-radius()](#border-radius)\r\n* [.box-sizing()](#box-sizing)\r\n* [.box-shadow()](#box-shadow)\r\n* [.transition()](#transition)\r\n* [.rotate()](#rotate)\r\n* [.placeholder()](#placeholder)\r\n* [#gradient > .vertical()](#gradient--vertical)\r\n* [#gradient > .horizontal()](#gradient--horizontal)\r\n* [.clearfix()](#clearfix)\r\n* [.inline-block()](#inline-block)\r\n* [.ir()](#ir)\r\n* [.hidden()](#hidden)\r\n* [.visually-hidden()](#visually-hidden)\r\n* [.size()](#size)\r\n\r\n### .border-radius()\r\n\r\nGenerates a `box-radius` property with the appropriate vendor prefixes.\r\n\r\n```css\r\n.border-radius( <@radius> );\r\n```\r\n\r\n* `@radius`: *(Optional)* Radius to round all corners to. Defaults to `5px`.\r\n\r\n```css\r\n.border-radius( <@top-left>, <@top-right>, <@bottom-left>, <@bottom-right>);\r\n```\r\n\r\n* `@top-left`: Radius to round the top-left corner to. Defaults to `5px`.\r\n* `@top-right`: Radius to round the top-right corner to. Defaults to `5px`.\r\n* `@bottom-left`: Radius to round the bottom-left corner to. Defaults to `5px`.\r\n* `@bottom-right`: Radius to round the bottom-right corner to. Defaults to `5px`.\r\n\r\n```css\r\n/* Usage: */\r\n.example1 {\r\n\t.border-radius( 5px );\r\n}\r\n.example2 {\r\n\t.border-radius( 5px, 7px, 5px, 10px );\r\n}\r\n/* Example output: */\r\n.example1 {\r\n\t-moz-border-radius: 5px;\r\n\tborder-radius: 5px;\r\n}\r\n.example2 {\r\n\t-webkit-border-top-left-radius: 5px;\r\n\t-webkit-border-top-right-radius: 7px;\r\n\t-webkit-border-bottom-left-radius: 5px;\r\n\t-webkit-border-bottom-right-radius: 10px;\r\n\t-moz-border-radius-topleft: 5px;\r\n\t-moz-border-radius-topright: 7px;\r\n\t-moz-border-radius-bottomleft: 5px;\r\n\t-moz-border-radius-bottomright: 10px;\r\n\tborder-top-left-radius: 5px;\r\n\tborder-top-right-radius: 7px;\r\n\tborder-bottom-left-radius: 5px;\r\n\tborder-bottom-right-radius: 10px;\r\n}\r\n```\r\n\r\n\r\n### .box-sizing()\r\n\r\nGenerates a `box-sizing` property with the appropriate vendor prefixes.\r\n\r\n```css\r\n.box-sizing( [<@type>] );\r\n```\r\n\r\n* `@type`: *(Optional)* box-sizing property value. Defaults to `border-box`.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.box-sizing( border-box );\r\n}\r\n/* Example output: */\r\n.example {\r\n\t-moz-box-sizing: border-box;\r\n\t-webkit-box-sizing: border-box;\r\n\t-ms-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n}\r\n```\r\n\r\n### .box-shadow()\r\n\r\nGenerates a `box-shadow` property with the appropriate vendor prefixes.\r\n\r\n```css\r\n.box-shadow( [<@shadow>] );\r\n```\r\n\r\n* `@shadow`: *(Optional)* box-shadow property value. Defaults to `1px 1px 2px rgba(0,0,0,0.25)`.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.box-shadow( 2px 2px 3px #999 );\r\n}\r\n/* Example output: */\r\n.example {\r\n\t-webkit-box-shadow: 2px 2px 3px #999;\r\n\t-moz-box-shadow: 2px 2px 3px #999;\r\n\tbox-shadow: 2px 2px 3px #999;\r\n}\r\n```\r\n\r\n### .transition()\r\n\r\nGenerates a `transition` property with the appropriate vendor prefixes.\r\n\r\n```css\r\n.transition( <@transition> );\r\n```\r\n\r\n* `@transition`: transition property value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.transition( all .2s ease-in-out );\r\n}\r\n/* Example output: */\r\n.example {\r\n\t-webkit-transition: all .2s ease-in-out;\r\n\t-moz-transition: all .2s ease-in-out;\r\n\ttransition: all .2s ease-in-out;\r\n}\r\n```\r\n\r\n### .rotate()\r\n\r\nGenerates a `transform` property with a rotation value and with the appropriate vendor prefixes.\r\n\r\n```css\r\n.rotate( <@rotation> );\r\n```\r\n\r\n* `@rotation`: rotation value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.rotate( 2.5deg );\r\n}\r\n/* Example output: */\r\n.example {\r\n\t-webkit-transform: rotate(2.5deg);\r\n\t-moz-transform: rotate(2.5deg);\r\n\t-o-transform: rotate(2.5deg);\r\n\ttransform: rotate(2.5deg);\r\n}\r\n```\r\n\r\n### .placeholder()\r\n\r\nGenerates pseudo-selector rules to globally change the colour of placeholder text for inputs. Use outside of element selectors.\r\n\r\n```css\r\n.placeholder( [<@color>] );\r\n```\r\n\r\n* `@color`: *(Optional)* colour value. Defaults to `#DDD`\r\n\r\n```css\r\n/* Usage: */\r\n.placeholder( #F00 );\r\n/* Example output: */\r\n:-moz-placeholder {\r\n\tcolor: #F00;\r\n}\r\n::-webkit-input-placeholder {\r\n\tcolor: #F00;\r\n}\r\n```\r\n\r\n### #gradient > .vertical()\r\n\r\nUses CSS3 gradient values to generate vertical background gradients with appropriate vendor prefixed implementations. Output varies according to the value of the `@disable-filters` setting.\r\n\r\n```css\r\n#gradient > .vertical( <@start-color>, <@end-color> );\r\n```\r\n\r\n* `@start-color`: Colour value for the upper start colour.\r\n* `@end-color`: Colour value for the bottom end colour.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t#gradient > .vertical( #F00, #555);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-color: #555;\r\n\tbackground-repeat: repeat-x;\r\n\tbackground-image: -khtml-gradient(linear, left top, left bottom, from(#F00), to(#555));\r\n\tbackground-image: -moz-linear-gradient(#F00, #555);\r\n\tbackground-image: -ms-linear-gradient(#F00, #555);\r\n\tbackground-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F00), color-stop(100%, #555));\r\n\tbackground-image: -webkit-linear-gradient(#F00, #555);\r\n\tbackground-image: -o-linear-gradient(#F00, #555);\r\n\tbackground-image: -ms-linear-gradient(top, #F00 0%, #555 100%);\r\n}\r\n```\r\n\r\n### #gradient > .horizontal()\r\n\r\nUses CSS3 gradient values to generate horizontal background gradients with appropriate vendor prefixed implementations. Output varies according to the value of the `@disable-filters` setting.\r\n\r\n```css\r\n#gradient > .horizontal( <@start-color>, <@end-color> );\r\n```\r\n\r\n* `@start-color`: Colour value for the left start colour.\r\n* `@end-color`: Colour value for the right end colour.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t#gradient > .horizontal( #F00, #555);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-color: #555;\r\n\tbackground-repeat: repeat-x;\r\n\tbackground-image: -khtml-gradient(linear, left top, right top, from(#F00), to(#555));\r\n\tbackground-image: -moz-linear-gradient(left, #F00, #555);\r\n\tbackground-image: -ms-linear-gradient(left, #F00, #555);\r\n\tbackground-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #F00), color-stop(100%, #555));\r\n\tbackground-image: -webkit-linear-gradient(left, #F00, #555);\r\n\tbackground-image: -o-linear-gradient(left, #F00, #555);\r\n\tbackground-image: -ms-linear-gradient(left, #F00 0%, #555 100%);\r\n\tbackground-image: linear-gradient(left, #F00, #555);\r\n}\r\n```\r\n\r\n### .clearfix()\r\n\r\nGenerates the appropriate properies to apply the [micro-clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) to the element. Output varies according to the value of the `@using-ieclasses` setting.\r\n\r\n```css\r\n.clearfix();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.clearfix();\r\n}\r\n/* Example output: */\r\n.example:before,\r\n.example:after {\r\n\tcontent: \"\";\r\n\tdisplay: table;\r\n}\r\n.example:after {\r\n\tclear: both;\r\n}\r\n.ie6 .example,\r\n.ie7 .example {\r\n\tzoom: 1;\r\n}\r\n```\r\n\r\n### .inline-block()\r\n\r\nHelper to generate the inline-block display property plus fixes for IE7. Output varies according to the value of the `@using-ieclasses` setting.\r\n\r\n```css\r\n.inline-block();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.inline-block();\r\n}\r\n/* Example output: */\r\n.example {\r\n\tdisplay: inline-block\r\n}\r\n.ie6 .example,\r\n.ie7 .example {\r\n\tdisplay: inline;\r\n\tzoom: 1;\r\n}\r\n```\r\n\r\n\r\n### .ir()\r\n\r\nGenerates text-removing properties for use in image replacement. Does not specify the background image (or it's positioning) itself - this needs to be specified manually (or use one of the sprite mixins, if appropriate).\r\n\r\n```css\r\n.ir();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.ir();\r\n\tbackground-image: url('/text.png');\r\n}\r\n/* Example output: */\r\n.example {\r\n\tborder: 0;\r\n\tfont: 0/0 a;\r\n\ttext-shadow: none;\r\n\tcolor: transparent;\r\n\tbackground-color: transparent;\r\n\tbackground-image: url('/text.png');\r\n}\r\n```\r\n### .hidden()\r\n\r\nHides content from the page. Uses `!important` to override inline-styles added by JS.\r\n\r\n```css\r\n.hidden();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.hidden();\r\n}\r\n/* Example output: */\r\n.example {\r\n\tdisplay: none !important;\r\n\tvisibility: hidden;\r\n}\r\n```\r\n\r\n### .visually-hidden()\r\n\r\nHides content visually, but leaves is accessible to screenreaders. Also generates helper classes to allow the element to be focusable when navigated to via the keyboard.\r\n\r\n```css\r\n.visually-hidden();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.visually-hidden();\r\n}\r\n/* Example output: */\r\n.example {\r\n\tborder: 0;\r\n\tclip: rect(0 0 0 0);\r\n\theight: 1px;\r\n\tmargin: -1px;\r\n\toverflow: hidden;\r\n\tpadding: 0;\r\n\tposition: absolute;\r\n\twidth: 1px;\r\n}\r\n.example.focusable:active,\r\n.example.focusable:focus {\r\n\tclip: auto;\r\n\theight: auto;\r\n\tmargin: 0;\r\n\toverflow: visible;\r\n\tposition: static;\r\n\twidth: auto;\r\n}\r\n```\r\n\r\n### .size()\r\n\r\nShortcut for generating width and height properties.\r\n\r\n```css\r\n.size( <@size> );\r\n```\r\n\r\n* `@size`: Value to use for the height and width properties.\r\n\r\n```css\r\n.size( <@width>, <@height> );\r\n```\r\n\r\n* `@width`: Value to use for the width property\r\n* `@height`: Value to use for the height property\r\n\r\n```css\r\n/* Usage: */\r\n.example1 {\r\n\t.size( 30px );\r\n}\r\n.example2 {\r\n\t.size( 20px, 70px );\r\n}\r\n/* Example output: */\r\n.example1 {\r\n\twidth: 30px;\t\r\n\theight: 30px;\r\n}\r\n.example2 {\r\n\twidth: 20px;\r\n\theight: 70px;\r\n}\r\n```\r\n\r\nTypography\r\n-------\r\n\r\n* [@base-font-size](#setting-base-font-size)\r\n* [.font-size-ems()](#font-size-ems)\r\n* [.font-size-rems()](#font-size-rems)\r\n\r\n### SETTING: @base-font-size\r\n\r\n`@base-font-size: 16;`\r\n\r\nA variable to sets the base font-size (in pixels) that is used as the default in certain calculations (such as in the pixels to rems conversion helper). Units should be omited.\r\n\r\nNote that this doesn't stop you doing your base `body` font size calculations/definitions any way you please - this should just be set to the result of that. For instance, if you set your base font size to `62.5%` then just set the `@base-font-size` value to `10`.\r\n\r\n### .font-size-ems()\r\n\r\nGenerates a font-size property with the pixel value converted to **ems**.\r\n\r\n```css\r\n.font-size-ems( <@px-size> [, <@context-px-size>] );\r\n```\r\n\r\n* `@px-size`: Font size (in pixels) to convert to ems.\r\n* `@context-px-size`: *(Optional)* The font size (in pixels) of the current context. Defaults to the value of `@base-font-size` if not specified.\r\n\r\n```css\r\n/* Usage: */\r\np {\r\n\t.font-size-ems( 12 );\r\n}\r\n/* Example output: */\r\np {\r\n\tfont-size: 0.75em;\r\n}\r\n```\r\n\r\n### .font-size-rems()\r\n\r\nGenerates a font-size property with the pixel value converted to **rems** and provides a pixel based fallback for browsers that do not support rem units.\r\n\r\n```css\r\n.font-size-rems( <@px-size> );\r\n```\r\n\r\n* `@px-size`: Font size (in pixels) to convert to rems.\r\n\r\n```css\r\n/* Usage: */\r\np {\r\n\t.font-size-rems( 12 );\r\n}\r\n/* Example output: */\r\np {\r\n\tfont-size: 12px;\t\r\n\tfont-size: 0.75rem;\r\n}\r\n```\r\n\r\n### .font-face()\r\n\r\nGenerates a font-face declaration block. Should be used outside of any element selectors. Note that this assumes that you have generated EOT, WOFF and TTF versions of the font, and that they all live in the same location, with the same filename (apart from the extension.\r\n\r\nFuture versions of this may include workarounds to make this more flexible. \r\n\r\n```css\r\n.font-face( <@font-family>, <@font-path>, <@font-weight>, <@font-style>, <@include-svg> );\r\n```\r\n\r\n* `@font-family`: The name to give the font-family\r\n* `@font-path`: The path/URL to the font, including the font name but **with the file extension removed**\r\n* `@font-weight`: *(Optional)* Value for the font-weight property. Defaults to `normal`\r\n* `@font-style`: *(Optional)* Value for the font-style property. Defaults to `normal`\r\n* `@include-svg`: *(Optional)* Value for the font-weight property. Defaults to `normal`\r\n\r\n```css\r\n/* Usage: */\r\n.font-face( 'MyNiceFontBold', '/fonts/my_nice_font', bold );\r\n/* Example output: */\r\n@font-face {\r\n    font-family: 'MyNiceFontBold';\r\n    src: url('/fonts/my_nice_font.eot');\r\n    src: url('/fonts/my_nice_font.eot?#iefix') format('embedded-opentype'),\r\n         url('/fonts/my_nice_font.woff') format('woff'),\r\n         url('/fonts/my_nice_font.ttf') format('truetype');\r\n    font-weight: bold;\r\n    font-style: normal;\r\n}\r\n```\r\n\r\n\r\nSprites\r\n-------\r\n\r\nThe sprite mixins give you an easy way to use sprited background images. It assumes the use of a single sprite image with individual images placed on a regular grid. These are defined as settings variables, but can also be supplied on a per-mixin basis.\r\n\r\n* [@sprite-image](#setting-sprite-image)\r\n* [@sprite-grid](#setting-sprite-grid)\r\n* [.sprite()](#sprite)\r\n* [.sprite-sized()](#sprite-sized)\r\n* [.sprite-ir()](#sprite-ir)\r\n* [.sprite-image()](#sprite-image)\r\n* [.sprite-pos()](#sprite-pos)\r\n* [.sprite-pos-sized()](#sprite-pos-sized)\r\n\r\n### SETTING: @sprite-image\r\n\r\n```css\r\n@sprite-image: '/images/example-sprite.png';\r\n```\r\n\r\nThe default image to use for the sprite mixins. Can be a Base64 encoded data-uri.\r\n\r\n### SETTING: @sprite-grid\r\n\r\n```css\r\n@sprite-grid: 50px;\r\n```\r\n\r\nThe size of the grid (in pixels) that the individal images are placed on.\r\n\r\n### .sprite()\r\n\r\nThe most basic sprite mixin. Outputs all the required properties to generate your sprited image.\r\n\r\n```css\r\n.sprite(<@x>, <@y>[, <@sprite-image>[, <@sprite-grid>]]);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.sprite( 2, 3 );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: -100px  -150px;\r\n}\r\n```\r\n\r\n### .sprite-sized()\r\n\r\nThe same as the `.sprite()` mixin above, but allows you to specify the height and width to constrain the element by.\r\n\r\n```css\r\n.sprite(<@x>, <@y>, <@width>, <@height>[, <@sprite-image>[, <@sprite-grid>]]);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@width`: The width of the image.\r\n* `@height`: The height of the image.\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n.sprite(<@x>, <@y>, <@size>[, <@sprite-image>[, <@sprite-grid>]]);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@size`: The height and width of the image (for 'square' images).\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.sprite-sized( 2, 3, 16px, 32px );\r\n}\r\n.example2 {\r\n\t.sprite-sized( 2, 3, 16px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: -100px  -150px;\r\n\twidth: 16px;\r\n\theight: 32px;\r\n}\r\n.example2 {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: -100px  -150px;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n```\r\n\r\n### .sprite-ir()\r\n\r\nAugments the `.sprite-sized()` mixin to include image replacement properties as defined in the `.ir()` mixin.\r\n\r\n```css\r\n.sprite-ir(<@x>, <@y>, <@width>, <@height>[, <@sprite-image>[, <@sprite-grid>]]);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@width`: The width of the image.\r\n* `@height`: The height of the image.\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n.sprite-ir(<@x>, <@y>, <@size>[, <@sprite-image>[, <@sprite-grid>]]);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@size`: The height and width of the image (for 'square' images).\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.sprite-ir( 2, 3, 16px, 32px );\r\n}\r\n.example2 {\r\n\t.sprite-ir( 2, 3, 16px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: -100px  -150px;\r\n\twidth: 16px;\r\n\theight: 32px;\r\n\tborder: 0;\r\n\tfont: 0/0 a;\r\n\ttext-shadow: none;\r\n\tcolor: transparent;\r\n\tbackground-color: transparent;\r\n}\r\n.example2 {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: -100px  -150px;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n\tborder: 0;\r\n\tfont: 0/0 a;\r\n\ttext-shadow: none;\r\n\tcolor: transparent;\r\n\tbackground-color: transparent;\r\n}\r\n```\r\n\r\n### .sprite-image()\r\n\r\nA [partial mixin](#optimising-output-using-partial-mixins). Just sets the background-image property to the `@sprite-image`. Useful in combination with the other sprite partial mixins below.\r\n\r\n```css\r\n.sprite-image([<@sprite-image>]);\r\n```\r\n\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.sprite-image();\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n}\r\n```\r\n\r\n### .sprite-pos()\r\n\r\nA [partial mixin](#optimising-output-using-partial-mixins). Generates the correct background-position property according to the position and grid. Useful in combination with the other sprite partial mixins.\r\n\r\n```css\r\n.sprite-pos(<@x>, <@y>);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.sprite-pos(2,3);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-position: -100px  -150px;\r\n}\r\n```\r\n\r\n### .sprite-pos-sized()\r\n\r\nSimilar to the `.sprite-pos()` [partial mixin](#optimising-output-using-partial-mixins) above, but includes the ability to set the size of the element.\r\n\r\n```css\r\n.sprite-pos-sized(<@x>, <@y>, <@width>, <@height>);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@width`: The width of the image.\r\n* `@height`: The height of the image.\r\n\r\n```css\r\n.sprite-pos-sized(<@x>, <@y>, <@size>);\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@size`: The width of the image.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.sprite-pos-sized( 2, 3, 16px, 32px );\r\n}\r\n.example2 {\r\n\t.sprite-pos-sized( 2, 3, 16px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tbackground-position: -100px  -150px;\r\n\twidth: 16px;\r\n\theight: 32px;\r\n}\r\n.example2 {\r\n\tbackground-position: -100px  -150px;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n```\r\n\r\nIcons\r\n-------\r\n\r\nThe icons mixins let you easily place an icon before or after an element, using absolutely positioned :before and :after pseudo elements to display them. There are also sprited icon mixins build on the sprite mixins above.\r\n\r\nThe exact output of all the icon mixins depends on the value of the `@using-modernizer` setting.\r\n\r\n* [.prepend-icon()](#prepend-icon)\r\n* [.append-icon()](#append-icon)\r\n* [.prepend-sprite-icon()](#prepend-sprite-icon)\r\n* [.append-sprite-icon()](#append-sprite-icon)\r\n* [.prepend-sprite-icon-pos()](#prepend-sprite-icon-pos)\r\n* [.append-sprite-icon-pos()](#append-sprite-icon-pos)\r\n* [.prepend-icon-setup()](#prepend-icon-setup)\r\n* [.append-icon-setup()](#append-icon-setup)\r\n* [.prepend-icon-image()](#prepend-icon-image)\r\n* [.append-icon-image()](#append-icon-image)\r\n\r\n### .prepend-icon()\r\n\r\nPrepends an icon to the element it's called on.\r\n\r\n```css\r\n.prepend-icon( <@icon-image>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]] );\r\n```\r\n\r\n* `@icon-image`: URL or data URI of an image to use for the prepended icon\r\n* `@width`: Width of the image\r\n* `@height`: Height of the image\r\n* `@nudge-left`: *(Optional)* The value of the `left` property for the icon. Defaults to `0`.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to `0`.\r\n* `@pad`: *(Optional)* Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.prepend-icon( 'img/icon.png', 16px, 32px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tposition: relative;\r\n\tpadding-left: 42px;\r\n}\r\n.example:before {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\tcontent: ' ';\r\n\tbackground: url('img/icon.png') no-repeat 0 0;\r\n\twidth: 16px;\r\n\theight: 32px;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n```\r\n\r\n### .append-icon()\r\n\r\nAppends an icon after the element it's called on.\r\n\r\n```css\r\n.append-icon( <@icon-image>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]] );\r\n```\r\n\r\n* `@icon-image`: URL or data URI of an image to use for the prepended icon\r\n* `@width`: Width of the image\r\n* `@height`: Height of the image\r\n* `@nudge-right`: *(Optional)* The value of the `right` property for the icon. Defaults to `0`.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to `0`.\r\n* `@pad`: *(Optional)* Right-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.append-icon( 'img/icon.png', 16px, 32px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tposition: relative;\r\n\tpadding-right: 42px;\r\n}\r\n.example:after {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\tcontent: ' ';\r\n\tbackground: url('img/icon.png') no-repeat 0 0;\r\n\twidth: 16px;\r\n\theight: 32px;\r\n\ttop: 0;\r\n\tright: 0;\r\n}\r\n```\r\n\r\n### .prepend-sprite-icon()\r\n\r\nPrepends an icon taken from the sprite to the element it's called on.\r\n\r\n```css\r\n.prepend-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@width`: Width of the image\r\n* `@height`: Height of the image\r\n* `@nudge-left`: *(Optional)* The value of the `left` property for the icon. Defaults to `0`.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to `0`.\r\n* `@pad`: *(Optional)* Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.prepend-sprite-icon( 1, 2, 16px, 32px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tposition: relative;\r\n\tpadding-left: 42px;\r\n}\r\n.example:before {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\tcontent: ' ';\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: -50px -100px;\r\n\twidth: 16px;\r\n\theight: 32px;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n```\r\n\r\n### .append-sprite-icon()\r\n\r\nAppends an icon taken from the sprite after the element it's called on.\r\n\r\n```css\r\n.append-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@width`: Width of the image\r\n* `@height`: Height of the image\r\n* `@nudge-right`: *(Optional)* The value of the `right` property for the icon. Defaults to `0`.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to `0`.\r\n* `@pad`: *(Optional)* Right-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n* `@sprite-image`: *(Optional)* The sprite image to use. Defaults to the globally defined `@sprite-image` value.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.append-sprite-icon( 1, 2, 16px, 32px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tposition: relative;\r\n\tpadding-right: 42px;\r\n}\r\n.example:after {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\tcontent: ' ';\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: -50px -100px;\r\n\twidth: 16px;\r\n\theight: 32px;\r\n\ttop: 0;\r\n\tright: 0;\r\n}\r\n```\r\n\r\n### .prepend-sprite-icon-pos()\r\n\r\nAdjusts the positioning of a prepended sprite icon.\r\n\r\n```css\r\n.prepend-sprite-icon-pos( <@x>, <@y>[, <@nudge-left>[, <@nudge-top>[, <@sprite-grid>]]] );\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@nudge-left`: *(Optional)* The value of the `left` property for the icon. Defaults to `0`.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to `0`.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.prepend-sprite-icon-pos( 1, 2 );\r\n}\r\n/* Example output: */\r\n.example:before {\r\n\tbackground-position: -50px -100px;\r\n}\r\n```\r\n\r\n### .append-sprite-icon-pos()\r\n\r\nAdjusts the positioning of a appended sprite icon.\r\n\r\n```css\r\n.append-sprite-icon-pos( <@x>, <@y>[, <@nudge-right>[, <@nudge-top>[, <@sprite-grid>]]] );\r\n```\r\n\r\n* `@x`: The x coordinate of the desired image on the grid.\r\n* `@y`: The y coordinate of the desired image on the grid.\r\n* `@nudge-right`: *(Optional)* The value of the `right` property for the icon. Defaults to `0`.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to `0`.\r\n* `@sprite-grid`: *(Optional)* The grid size used in the sprite. Defaults to the globally defined `@sprite-grid` value.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.append-sprite-icon-pos( 1, 2 );\r\n}\r\n/* Example output: */\r\n.example:after {\r\n\tbackground-position: -50px -100px;\r\n}\r\n```\r\n\r\n### .prepend-icon-setup()\r\n\r\nA [partial mixin](#optimising-output-using-partial-mixins) to generate common properties for prepended icon mixins.\r\n\r\n```css\r\n.prepend-icon-setup( [<@width>[, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]]]] );\r\n```\r\n\r\n* `@width`: *(Optional)* Width of the image. Defaults to not being set.\r\n* `@height`: *(Optional)* Height of the image. Defaults to not being set.\r\n* `@nudge-left`: *(Optional)* The value of the `left` property for the icon. Defaults to not being set.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to not being set.\r\n* `@pad`: *(Optional)* Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.prepend-icon-setup( 32px, 15px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tposition: relative;\r\n}\r\n.example:before {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\tcontent: ' ';\r\n\ttop: 0;\r\n\tleft: 0;\r\n    width: 32px;\r\n    height: 15px;\r\n}\r\n```\r\n\r\n### .append-icon-setup()\r\n\r\nA [partial mixin](#optimising-output-using-partial-mixins) to generate common properties for appended icon mixins.\r\n\r\n```css\r\n.append-icon-setup( [<@width>[, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]]]] );\r\n```\r\n\r\n* `@width`: *(Optional)* Width of the image. Defaults to not being set.\r\n* `@height`: *(Optional)* Height of the image. Defaults to not being set.\r\n* `@nudge-right`: *(Optional)* The value of the `right` property for the icon. Defaults to not being set.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to not being set.\r\n* `@pad`: *(Optional)* Right-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.append-icon-setup( 32px, 15px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tposition: relative;\r\n}\r\n.example:after {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\tcontent: ' ';\r\n\ttop: 0;\r\n\tright: 0;\r\n    width: 32px;\r\n    height: 15px;\r\n}\r\n```\r\n\r\n### .prepend-icon-image()\r\n\r\nA [partial mixin](#optimising-output-using-partial-mixins) to generate image-specific properties for prepended icon mixins. Likely to be used in combination with the `.prepend-icon-setup()` mixin above.\r\n\r\n```css\r\n.prepend-icon-image( <@icon-image>[, <@width>[, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]]]] );\r\n```\r\n\r\n* `@icon-image`: URL or data URI of an image to use for the prepended icon\r\n* `@width`: *(Optional)* Width of the image. Defaults to not being set.\r\n* `@height`: *(Optional)* Height of the image. Defaults to not being set.\r\n* `@nudge-left`: *(Optional)* The value of the `left` property for the icon. Defaults to not being set.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to not being set.\r\n* `@pad`: *(Optional)* Left-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.prepend-icon-image( 'img/icon.png', 12px, 12px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tpadding-left: 22px;\r\n}\r\n.example:before {\r\n  background: url('img/icon.png') no-repeat 0 0;\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n```\r\n\r\n### .append-icon-image()\r\n\r\nA [partial mixin](#optimising-output-using-partial-mixins) to generate image-specific properties for appended icon mixins. Likely to be used in combination with the `.append-icon-setup()` mixin above.\r\n\r\n```css\r\n.append-icon-image( <@icon-image>[, <@width>[, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]]]] );\r\n```\r\n\r\n* `@icon-image`: URL or data URI of an image to use for the prepended icon\r\n* `@width`: *(Optional)* Width of the image. Defaults to not being set.\r\n* `@height`: *(Optional)* Height of the image. Defaults to not being set.\r\n* `@nudge-right`: *(Optional)* The value of the `right` property for the icon. Defaults to not being set.\r\n* `@nudge-top`: *(Optional)* The value of the `top` property for the icon. Defaults to not being set.\r\n* `@pad`: *(Optional)* Right-padding (in addition to the width of the icon) to apply to the element. Defaults to `10px`\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.append-icon-image( 'img/icon.png', 12px, 12px );\r\n}\r\n/* Example output: */\r\n.example {\r\n\tpadding-right: 22px;\r\n}\r\n.example:after {\r\n  background: url('img/icon.png') no-repeat 0 0;\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n```\r\n\r\nGrids\r\n-------\r\n\r\nThe ClearLess grid system is a straightforward, fluid grid system that supports either floated columns or columns created using `display: inline-block;`. It supports infinite levels of nested columns.\r\n\r\nGutters are applied using the margin-right property. The columns that represent the last in a row at any time need to have the `.end-column()` (for floated grids) or `.inline-end-column()` (for inline-block grids) applied to them to stop them dropping down (although there are also shortcuts for doing this in the column and inline-column mixins themselves). There are obviously other ways to address this 'last column gutter' issue - but we've opted for simplicity and to closest match how many people would code this when doing so in 'straight' css.\r\n\r\nGroups of columns need to be wrapped in a parent element with the appropriate `.column-wrapper()` or `.inline-column-wrapper()` mixin applied to them.\r\n\r\n* [@total-columns](#setting-total-columns)\r\n* [@column-width](#setting-column-width)\r\n* [@gutter-width](#setting-gutter-width)\r\n* [.column-wrapper()](#column-wrapper)\r\n* [.inline-column-wrapper()](#inline-column-wrapper)\r\n* [.column()](#column)\r\n* [.inline-column()](#inline-column)\r\n* [.end-column()](#end-column)\r\n* [.inline-end-column()](#inline-end-column)\r\n* [.span()](#span)\r\n* [.pre-pad()](#pre-pad)\r\n* [.post-pad()](#post-pad)\r\n* [.pre-push()](#pre-push)\r\n* [.post-push()](#post-push)\r\n* [.post-push-end()](#post-push-end)\r\n\r\n### SETTING: @total-columns\r\n\r\n```css\r\n@total-columns: 12;\r\n```\r\n\r\nThe total number of columns for the top-level grid.\r\n\r\n### SETTING: @column-width\r\n\r\n```css\r\n@column-width: 60px;\r\n```\r\n\r\nThe width of a column, in pixels. It should be noted that the pixel value is never actually used itself - instead it will be converted to a percentage value. If you have flat visuals you can take this value straight from your visual, whatever width they are fixed at.\r\n\r\n### SETTING: @gutter-width\r\n\r\n```css\r\n@gutter-width: 20px;\r\n```\r\n\r\nThe width of a gutter, in pixels. It should be noted that the pixel value is never actually used itself - instead it will be converted to a percentage value. If you have flat visuals you can take this value straight from your visual, whatever width they are fixed at.\r\n\r\n\r\n### .column-wrapper()\r\n\r\nApply to the parent element of the grid columns for **floated grids**. This (by design) *does not* apply any float clearing to the columns - you will likely want to use the `.clearfix()` mixin (or `overflow:hidden;` or whatever you're perferred float clearing methid is!) to account for this.\r\n\r\n```css\r\n.column-wrapper();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.column-wrapper();\r\n}\r\n/* Example output: */\r\n.example {\r\n\twidth: 100%;\r\n}\r\n```\r\n\r\n### .inline-column-wrapper()\r\n\r\nApply to the parent element of the grid columns for **inline-block grids**.\r\n\r\n```css\r\n.inline-column-wrapper();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.column-wrapper();\r\n}\r\n/* Example output: */\r\n.example {\r\n\tletter-spacing: -0.31em;\r\n\tword-spacing: -0.43em;\r\n}\r\n.ie7 .example {\r\n\tletter-spacing: normal;\r\n}\r\n```\r\n\r\n### .column()\r\n\r\nWhen supplied with no arguments, this mixin just sets up the necessary shared styles to make an element into a **floated** column. The `.span()` mixin should then be used to apply the correct width accordingly.\r\n\r\nWhen supplied with a column count, this mixin effectively combines both of the above steps into one - simpler but may not result in the most optimised CSS, depending on the situation.\r\n\r\n```css\r\n.column();\r\n```\r\n\r\n```css\r\n.column( <@span>[, <@parent-grid-units>[, <@end-column>]] );\r\n```\r\n\r\n* `@span`: Number of grid columns to span.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n* `@end-column`: *(Optional)* Set to `true` if this column is the last one in a row.\r\n\r\n```css\r\n.column( <@span>[, <@end-column>] );\r\n```\r\n\r\n* `@span`: *(Optional)* Number of grid columns to span.\r\n* `@end-column`: *(Optional)* Set to `true` if this column is the last one in a row.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.column();\r\n}\r\n.example2 {\r\n\t.column(2);\r\n}\r\n.example3 {\r\n\t.column(2,true);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tfloat: left;\r\n\tmargin-right: 1.5873015873015872%;\r\n}\r\n.example2 {\r\n    float: left;\r\n    width: 11.11111111111111%;\r\n    margin-right: 1.5873015873015872%;\r\n}\r\n.example3 {\r\n    float: left;\r\n    width: 11.11111111111111%;\r\n}\r\n```\r\n\r\n### .inline-column()\r\n\r\nWhen supplied with no arguments, this mixin just sets up the necessary shared styles to make an element into a **inline-block** column. The `.span()` mixin should then be used to apply widths and margins accordingly.\r\n\r\nWhen supplied with a column count, this mixin effectively combines both of the above steps into one - simpler but may not result in the most optimised CSS, depending on the situation.\r\n\r\n```css\r\n.inline-column();\r\n```\r\n\r\n```css\r\n.inline-column( <@span>[, <@parent-grid-units>[, <@end-column>]] );\r\n```\r\n\r\n* `@span`: Number of grid columns to span.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n* `@end-column`: *(Optional)* Set to `true` if this column is the last one in a row.\r\n\r\n```css\r\n.inline-column( <@span>[, <@end-column>] );\r\n```\r\n\r\n* `@span`: *(Optional)* Number of grid columns to span.\r\n* `@end-column`: *(Optional)* Set to `true` if this column is the last one in a row.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.inline-column();\r\n}\r\n.example2 {\r\n\t.inline-column(2);\r\n}\r\n.example3 {\r\n\t.inline-column(2,true);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n\tletter-spacing: normal;\r\n\tword-spacing: normal;\r\n\tmargin-right: 1.5873015873015872%;\r\n}\r\n.ie7 .example {\r\n\tdisplay: inline;\r\n\tzoom: 1;\r\n}\r\n.example2 {\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n\tletter-spacing: normal;\r\n\tword-spacing: normal;\r\n\twidth: 11.11111111111111%;\r\n\tmargin-right: 1.5873015873015872%;\r\n}\r\n.ie7 .example2 {\r\n\tdisplay: inline;\r\n\tzoom: 1;\r\n}\r\n.example3 {\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n\tletter-spacing: normal;\r\n\tword-spacing: normal;\r\n\twidth: 11.11111111111111%;\r\n}\r\n.ie7 .example3 {\r\n\tdisplay: inline;\r\n\tzoom: 1;\r\n}\r\n```\r\n\r\n### .end-column()\r\n\r\nShould be applied to the last column in a row for **floated columns**. Typically this will equate to the `:last-child` column, but when dropping columns for RWD this is not always the case.\r\n\r\n```css\r\n.end-column();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.end-column();\r\n}\r\n/* Example output: */\r\n.example {\r\n\tmargin-right: 0;\r\n\tfloat: right;\r\n}\r\n```\r\n\r\n### .inline-end-column()\r\n\r\nShould be applied to the last column in a row for **inline-block columns**. Typically this will equate to the `:last-child` column, but when dropping columns for RWD this is not always the case.\r\n\r\n```css\r\n.inline-end-column();\r\n```\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.inline-end-column();\r\n}\r\n/* Example output: */\r\n.example {\r\n\tmargin-right: 0;\r\n}\r\n```\r\n\r\n### .span()\r\n\r\nA [partial mixin](#optimising-output-using-partial-mixins) for generating the width (and sometimes margin-right) property for columns (both floated and inline-block).\r\n\r\n```css\r\n.span( <@span>[, <@parent-grid-units>] );\r\n```\r\n\r\n* `@span`: Number of grid columns to span.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.span(2);\r\n}\r\n/* Example output: */\r\n.example {\r\n\twidth: 11.11111111111111%;\r\n}\r\n```\r\n\r\n### .pre-pad()\r\n\r\nAdds the specified number of columns' worth of padding to the the left of the element. \r\n\r\n```css\r\n.pre-pad( <@span>[, <@parent-grid-units>] );\r\n```\r\n\r\n* `@span`: Number of grid columns' worth of `padding-left` to add.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.pre-pad(2);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tpadding-left: 12.698412698412698%;\r\n}\r\n```\r\n\r\n### .post-pad()\r\n\r\nAdds the specified number of columns' worth of padding to the the right of the element. \r\n\r\n```css\r\n.post-pad( <@span>[, <@parent-grid-units>] );\r\n```\r\n\r\n* `@span`: Number of grid columns' worth of `padding-right` to add.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.post-pad(2);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tpadding-right: 12.698412698412698%;\r\n}\r\n```\r\n\r\n### .pre-push()\r\n\r\nAdds the specified number of columns' worth of margin to the the left of the element. \r\n\r\n```css\r\n.pre-push( <@span>[, <@parent-grid-units>] );\r\n```\r\n\r\n* `@span`: Number of grid columns' worth of `margin-left` to add.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.pre-push(2);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tmargin-left: 12.698412698412698%;\r\n}\r\n```\r\n\r\n### .post-push()\r\n\r\nAdds the specified number of columns' worth of margin to the the right of the element. \r\n\r\n```css\r\n.post-push( <@span>[, <@parent-grid-units>] );\r\n```\r\n\r\n* `@span`: Number of grid columns' worth of `margin-right` to add.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.post-push(2);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tmargin-right: 14.285714285714285%;\r\n}\r\n```\r\n\r\n### .post-push-end()\r\n\r\nShould be used instead of the `.post-push()` mixin above when applied to the last column in a row.\r\n\r\n```css\r\n.post-push-end( <@span>[, <@parent-grid-units>] );\r\n```\r\n\r\n* `@span`: Number of grid columns' worth of `margin-right` to add.\r\n* `@parent-grid-units`: *(Optional)* For nested grids, the number of columns the parent element spans needs to be added here.\r\n\r\n```css\r\n/* Usage: */\r\n.example {\r\n\t.post-push-end(2);\r\n}\r\n/* Example output: */\r\n.example {\r\n\tmargin-right: 12.698412698412698%;\r\n}\r\n```\r\n\r\n\r\n\r\n\r\nSome notes on usage and best practices\r\n--------------------------------------\r\n\r\nUsing a CSS preprocessor can result in pretty bloated generated CSS if you're not careful. Below are a few notes that outline some thoughts on how to avoid this and how ClearLess is structured to give you better tools to optimise your generated CSS.\r\n\r\n### On using (Clear)Less responsibly...\r\n\r\nJust because there is a mixin for something doesn't mean you *need* to use it! If you have a individual case that would need to override half the the properties outputted by the mixin in order to be styled correctly, then is probably better to roll the solution by hand (or create a new mixin for this use case) rather than to use the mixin and then override it. Fight the bloat!\r\n\r\n**All of the examples below above sample output from the mixins.** It's definitely recommended that you familiarise yourself with the output so you can judge whether or not to use the mixin in different situations.\r\n\r\n### Optimising output using 'partial' mixins\r\n\r\nThe library consists mostly of 'full' mixins, which stand alone and give you all the functionality you might expect. However there are also an number of so-called 'partial' mixins for things lke sprites, grids and icons. You may need more than one of these mixins to achieve the desired result - the idea is to split out certain bits of functionality so as to allow for optimisations in your generated CSS.\r\n\r\nAn example using the [sprite mixins](#sprites):\r\n\r\n```css\r\n/* Using 'full' mixins - results in verbose generated CSS */\r\n.social {\r\n\ta.twitter {\r\n\t\t.sprite-sized(0, 1, 16px, 16px);\r\n\t}\r\n\ta.facebook {\r\n\t\t.sprite-sized(0, 2, 16px, 16px);\r\n\t}\r\n\ta.youtube {\r\n\t\t.sprite-sized(0, 3, 16px, 16px);\r\n\t}\r\n}\r\n/* Output - poorly optimised, lots of repitition */\r\n.social a.twitter {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: 0 -50px;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.social a.twitter {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: 0 -100px;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.social a.youtube {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: 0 -150px;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n\r\n/* Using 'partial' mixins - results in more optimised generated CSS */\r\n.social {\r\n\ta {\r\n\t\t.sprite-image();\r\n\t\t.size(16px);\r\n\t}\r\n\ta.twitter {\r\n\t\t.sprite-pos(0, 1);\r\n\t}\r\n\ta.facebook {\r\n\t\t.sprite-pos(0, 2);\r\n\t}\r\n\ta.youtube {\r\n\t\t.sprite-pos(0, 3);\r\n\t}\r\n}\r\n/* Output - much better! */\r\n.socal a {\r\n\tbackground-image: url('/images/example-sprite.png');\r\n\tbackground-repeat: no-repeat;\r\n\twidth: 16px;\r\n\theight: 16px;\r\n}\r\n.social a.twitter {\r\n\tbackground-position: 0 -50px;\r\n}\r\n.social a.twitter {\r\n\tbackground-position: 0 -100px;\r\n}\r\n.social a.youtube {\r\n\tbackground-position: 0 -150px;\r\n}\r\n```\r\n\r\nAs you can see the second example gives an output that is much less verbose and more like what you would write by hand. So use the mixins wisely - for one off styling a full mixin is often appropriate, for applying the same styling to multiple related elements some of the partial mixins are probably better to use.\r\n\r\n### Doesn't Gzipping make bloated output a non-issue?\r\n\r\nGzip compression works very well on duplicated strings, so yes - gzipping a file with a lot of duplicated properties will to a large extent offest the additional size/bloat issue.\r\n\r\n**However**, It's still best to work to avoid all that duplication in the first place! And never forget that people may be view-sourcing on these files, and trying to learn from them. Regardless of whether you're gzip'ing, you should always strive to make sure your generated CSS is as representative of CSS you'd write by hand as possible/reasonable.\r\n\r\n### Mixins or classes?\r\n\r\nIf you find yourself applying a particular mixin to a lot of element selectors, it's probably worth considering if it would be better to take the 'regular CSS' route and create a separate classname (or classnames) to apply that mixin to. you can then use that class in your HTML instead of repeatedly using the mixin in your Less/CSS. It's generally good to do this in situations where you have an appropriate semantic class name that could encapsulate the mixin's output.\r\n\r\nYou can of course still use the mixin in other places as needed (where using the class would not be appropriate), but you'll get the advantage of a leaner CSS file (although with the possible disadvantage of more classes in your HTML).\r\n\r\nNeither approach is right or wrong - but take the time to consider each particular use case and you'll end up with a better balance between your HTML, your Less and the generated CSS.\r\n\r\n\r\nCredits\r\n-------\r\n\r\nClearLess is maintained and documented by [Mark Perkins](https://github.com/allmarkedup). For any queries, questions or bug reports you can ping him [on twitter](http://twitter.com/allmarkedup) or open an issue in the Github issue tracker.\r\n\r\nMany of the mixins, styles and other parts of this library were shamelessly poached from other open-source projects, including Mark Otto's [Preboot](http://markdotto.com/bootstrap/) and the [HTML5 Boilerplate](http://html5boilerplate.com). Thanks for being awesome!\r\n\r\n","name":"Clearless","tagline":"A collection of reusable LESS mixins","note":"Don't delete this file! It's used internally to help with page regeneration.","google":""}