Parameter Type Description width string Controls the width style attribute of the Select2 container div. The following values are supported:

off

No width attribute will be set. Keep in mind that the container div copies classes from the source element so setting the width attribute may not always be necessary.

element

Uses javascript to calculate the width of the source element.

copy

Copies the value of the width style attribute set on the source element

resolve

First attempts to copy than falls back on element

other values

if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim

minimumInputLength int Number of characters necessary to start a search maximumInputLength int Maximum number of characters that can be entered for an input minimumResultsForSearch int

The minimum number of results that must be initially (after opening the dropdown for the first time) populated in order to keep the search field. This is useful for cases where local data is used with just a few results, in which case the search box is not very useful and wastes screen space.

Only applies to single-value select boxes

maximumSelectionSize int/function

The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited.

Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated by the formatSelectionTooBig function

placeholder string

Initial value that is selected if no other selection is made.

The placeholder can also be specified as a data-placeholder attribute on the select or input element that Select2 is attached to.

Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>) for the placeholder to work.

separator string

Separator character or string used to delimit ids in value attribute of the multi-valued selects. The default delimiter is the , character.

allowClear boolean

Whether or not a clear button is displayed when the select box has a selection. The button, when clicked, resets the value of the select box back to the placeholder, thus this option is only available when the placeholder is specified.

This option only works when the placeholder is specified

When attached to a select an option with an empty value must be provided. This is the option that will be selected when the button is pressed since a select box requires at least one selection option.

Also, note that this option only works with non-multi-value based selects because multi-value selects always provide such a button for every selected option.

multiple boolean

Whether or not Select2 allows selection of multiple values.

When Select2 is attached to a select element this value will be ignored and select's multiple attribute will be used instead.

closeOnSelect boolean

If set to false the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is set to true.

Only applies when configured in multi-select mode.

openOnEnter boolean

If set to true the dropdown is opened when the user presses the enter key and Select2 is closed. By default this option is enabled.

id function Function used to get the id from the choice object or a string representing the key under which the id is stored.

id(object)

Parameter	Type	Description
object	object	A choice object
<returns>	string	the id of the object

The default implementation expects the object to have a id property that is returned. matcher function Used to determine whether or not the search term matches an option when a built-in query function is used. The built in query function is used when Select2 is attached to a select, or the local or tags helpers are used.

matcher(term, text, option)

Parameter	Type	Description
term	string	search term
text	string	text of the option being matched
option	jquery object	the option element we are trying to match. Only given when attached to select. Can be used to match against custom attributes on the option tag in addition to matching on the option's text.
<returns>	boolean	true if search term matches the text, or false otherwise

The default implementation is case insensitive and matches anywhere in the term: function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; } sortResults function Used to sort the results list for searching right before display. Useful for sorting matches by relevance to the user's search term.

sortResults(results, container, query)

object	object	One of the result objects returned from the query function
container	jQuery object	jQuery wrapper of the node that should contain the representation of the result
query	object	The query object used to request this set of results
<returns>	object	A results object.

Defaults to no sorting: function(results, container, query) { return results; } formatSelection function Function used to render the current selection.

formatSelection(object, container)

Parameter	Type	Description
object	object	The selected result object returned from the query function
container	jQuery object	jQuery wrapper of the node to which the selection should be appended
<returns>	string (optional)	Html string, a DOM element, or a jQuery object that renders the selection

The default implementation expects the object to have a text property that is returned.

The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended

When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:

 format(item) {
 var originalOption = item.element;
 return item.text
 }
 

formatResult function Function used to render a result that the user can select.

formatResult(object, container, query)

Parameter	Type	Description
object	object	One of the result objects returned from the query function
container	jQuery object	jQuery wrapper of the node that should contain the representation of the result
query	object	The query object used to request this set of results
escapeMarkup	function	Function used to escape markup in results. If you do not expect to render custom markup you should pass your text through this function to escape any markup that may have been accidentally returned. This function is configurable in options of select2.
<returns>	string (optional)	Html string, a DOM element, or a jQuery object that represents the result

The default implementation expects the object to have a text property that is returned.

The implementation may choose to append elements directly to the provided container object, or return a single value and have it automatically appended

When attached to a select the original <option> (or <optgroup>) element is accessible inside the specified function through the property item.element:

 format(item) {
 var originalOption = item.element;
 return item.text
 }
 

formatResultCssClass function Function used to add css classes to result elements

formatResultCssClass(object)

Parameter	Type	Description
object	object	One of the result objects returned from the query function
<returns>	string (optional)	String containing css class names separated by a space

By default when attached to a select css classes from options will be automatically copied

formatNoMatches function Function used to render the "No matches" message

formatNoMatches(term)

Parameter	Type	Description
term	string	Search string entered by user
<returns>	string	Message html

formatSearching function Function used to render the "Searching..." message that is displayed while search is in progress

formatSearching()

Parameter	Type	Description
<returns>	string	Message html or null/undefined to disable the message

formatInputTooShort function Function used to render the "Search input too short" message

formatInputTooShort(term, minLength)

Parameter	Type	Description
term	string	Search string entered by user
minLength	int	Minimum required term length
<returns>	string	Message html

formatSelectionTooBig function Function used to render the "You cannot select any more choices" message

formatSelectionTooBig(maxSize)

Parameter	Type	Description
maxSize	string	The maximum specified size of the selection
<returns>	string	Message html

createSearchChoice function Creates a new selectable choice from user's search term. Allows creation of choices not available via the query function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.

createSearchChoice(term)

Parameter	Type	Description
term	string	Search string entered by user
<returns>	object (optional)	Object representing the new choice. Must at least contain an id attribute.

If the function returns undefined or null no choice will be created. If a new choice is created it is displayed first in the selection list so that user may select it by simply pressing enter.

When used in combination with input[type=hidden] tag care must be taken to sanitize the id attribute of the choice object, especially stripping , as it is used as a value separator

initSelection function Called when Select2 is created to allow the user to initialize the selection based on the value of the element select2 is attached to.

Essentially this is an id->object mapping function.

initSelection(element, callback)

Parameter	Type	Description
element	jQuery array	element Select2 is attached to
callback	function	callback function that should be called with the data which is either an object in case of a single select or an array of objects in case of multi-select

This function will only be called when there is initial input to be processed.

Here is an example implementation used for tags. Tags are the simplest form of data where the id is also the text:

$("#tags").select2({
 initSelection : function (element, callback) {
 var data = [];
 $(element.val().split(",")).each(function () {
 data.push({id: this, text: this});
 });
 callback(data);
 }
});
// Or for single select elements:
$("#select").select2({
 initSelection : function (element, callback) {
 var data = {id: element.val(), text: element.val()};
 callback(data);
 }
});

tokenizer function A tokenizer function can process the input typed into the search field after every keystroke and extract and select choices. This is useful, for example, in tagging scenarios where the user can create tags quickly by separating them with a comma or a space instead of pressing enter.

Tokenizer only applies to multi-selects

tokenizer(input, selection, selectCallback, opts)

Parameter	Type	Description
input	string	The text entered into the search field so far
selection	array	Array of objects representing the current selection. Useful if tokenizer needs to filter out duplicates.
selectCallback	function	Callback that can be used to add objects to the selection
opts	object	Options with which Select2 was initialized. Useful if tokenizer needs to access some properties in the options.
<returns>	string (optional)	Returns the string to which the input of the search field should be set to. Usually this is the remainder, of any, of the string after the tokens have been stripped. If undefined or null is returned the input of the search field is unchanged.

The default tokenizer will only be used if the tokenSeparators and createSearchChoice options are specified. The default tokenizer will split the string using any separator in tokenSeparators and will create and select choice objects using createSearhChoice option. It will also ignore duplicates, silently swallowing those tokens. tokenSeparators array An array of strings that define token separators for the default tokenizer function. By default, this option is set to an empty array which means tokenization using the default tokenizer is disabled. Usually it is sensible to set this option to a value similar to [',', ' '] query function Function used to query results for the search term.

query(options)

Parameter	Type	Description
options.term	string	Search string entered by user
options.page	int	1-based page number tracked by Select2 for use with infinite scrolling of results
options.context	object	An object that persists across the lifecycle of queries for the same search term (the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term). When this function is first called for a new search term this object will be null. The user may choose to set any object in the results.context field - this object will then be used as the context parameter for all calls to the query method that will load more search results for the initial search term. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a "continuation token" that needs to be passed back to them in order to retrieve the next page of search results.
options.callback	function	Callback function that should be called with the result object. The result object: Parameter Type Description result.results [object] Array of result objects. The default renderers expect objects with id and text keys. The id attribute is required, even if custom renderers are used. The object may also contain a childrenkey if hierarchical data is displayed. result.more boolean trueif more results are available for the current search term results.context object A user-defined object that should be made available as the context parameter to the query function on subsequent queries to load more result pages for the same search term. See the description of options.context parameter.

In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.

Example Data

{
 more: false,
 results: [
 { id: "CA", text: "California" },
 { id: "AL", text: "Alabama" }
 ]
}
 

Example Hierarchical Data

{
 more: false,
 results: [
 { text: "Western", children: [
 { id: "CA", text: "California" },
 { id: "AZ", text: "Arizona" }
 ] },
 { text: "Eastern", children: [
 { id: "FL", text: "Florida" }
 ] }
 ]
}
 

ajax object Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.

Parameter	Type	Description
transport	function	Function that will be used to perform the ajax request. Must be parameter-compatible with $.ajax. Defaults to $.ajax if not specified. Allows the use of various ajax wrapper libraries such as: AjaxManager.
url	string/function	String containing the ajax url or a function that returns such a string.
dataType	string	Data type for the request. ajax, jsonp, other formats supported by jquery
quietMillis	int	Number of milliseconds to wait for the user to stop typing before issuing the ajax request
data	function	Function to generate query parameters for the ajax request. data(term, page) Parameter Type Description term string Search term page int 1-based page number tracked by Select2 for use with infinite scrolling of results context object See options.context parameter to the query function above. <returns> object Object containing url paramters
results	function	Function used to build the query results object from the ajax response results(data, page) Parameter Type Description data object Retrieved data page int Page number that was passed into the data function above context object See options.context parameter to the query function above. <returns> object Results object. See "options.callback" in the "query" function for format.

In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.

data array/object Options for the built in query function that works with arrays.

If this element contains an array, each element in the array must contain id and text keys

Alternatively, this element can be specified as an object in which results key must contain the data as an array and a text key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array

tags array/function Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via this options attribute which is either an array or a function that returns an array of objects or strings. If strings are used instead of objects they will be converted into an object that has an id and text attribute equal to the value of the string. containerCss function/object Inline css that will be added to select2's container. Either an object containing css property/value key pairs or a function that returns such an object. containerCssClass function/string Css class that will be added to select2's container tag dropdownCss function/object Inline css that will be added to select2's dropdown container. Either an object containing css property/value key pairs or a function that returns such an object. dropdownCssClass function/string Css class that will be added to select2's dropdown container escapeMarkup function String escapeMarkup(String markup)

Function used to post-process markup returned from formatter functions. By default this function escapes html entities to prevent javascript injection.

selectOnBlur boolean

Set to true if you want Select2 to select the currently highlighted option when it is blurred

loadMorePadding integer Defines how many results need to be below the fold before the next page is loaded. The default value is 0 which means the result list needs to be scrolled all the way to the bottom for the next page of results to be loaded. This option can be used to trigger the load sooner, possibly resulting in a smoother user experience.

Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection.

val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return []

Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. If you are attaching to a select element this function is already provided for you.

Gets or sets the selection. Analogous to val method, but works with objects instead of ids.

data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return []

Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.

Disables Select2. During this mode the user is not allowed to manipulate the selection.

Enables Select2.

Retrieves the main container element that wraps all of DOM added by Select2 Example: console.log($("#tags").select2("container"));

Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc. Example: $("#tags").select2("onSortStart");

Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to. Example: $("#tags").select2("onSortEnd");

ClearLess

A reuseable collection of carefully-considered Less mixins, or YALML (Yet Another Less Mixin Library).

The 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.

Before diving in it is strongly recommended that you peruse the 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.

Usage

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.

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:

Global settings

ClearLess defines a few settings that affect the output of some of the mixins. These are just Less variables, and have their default values defined in mixins/settings.less.

To override the defaults, simply redefine them after importing the mixins:

@import "mixins/all";
@using-modernizr: true;
@base-font-size: 14;

The following global settings are defined:

SETTING: @using-modernizr

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.

Modernizr feature tests currently used (if using a custom Modernizr build):

• Generated Content (.generatedcontent)

SETTING: @using-ieclasses

If using H5BP-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 to provide this support instead.

SETTING: @disable-filters

Whether 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.

Other section-specific settings are documented alongside their mixins below.

Resets

Convinience mixins that should be used outside of element selectors as a quick way to generate popular reset stylesheet contents.

.reset;

Outputs styles from the 'Meyer Reset'.

.normalize;

Outputs styles from normalize.css.

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.

.border-radius( <@radius> );

• @radius: (Optional) Radius to round all corners to. Defaults to 5px.

/* Usage: */
.example1 {
 .border-radius( 5px );
}
.example2 {
 .border-radius( 5px 7px 5px 10px );
}
/* Example output: */
.example1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.example2 {
 -webkit-border-radius: 5px 7px 5px 10px;
 -moz-border-radius: 5px 7px 5px 10px;
 border-radius: 5px 7px 5px 10px;
}

.box-sizing()

Generates a box-sizing property with the appropriate vendor prefixes.

.box-sizing( [<@type>] );

• @type: (Optional) box-sizing property value. Defaults to border-box.

/* Usage: */
.example {
 .box-sizing( border-box );
}
/* Example output: */
.example {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

.box-shadow()

Generates a box-shadow property with the appropriate vendor prefixes.

.box-shadow( [<@shadow>] );

• @shadow: (Optional) box-shadow property value. Defaults to 1px 1px 2px rgba(0,0,0,0.25).

/* Usage: */
.example {
 .box-shadow( 2px 2px 3px #999 );
}
/* Example output: */
.example {
 -webkit-box-shadow: 2px 2px 3px #999;
 -moz-box-shadow: 2px 2px 3px #999;
 box-shadow: 2px 2px 3px #999;
}

.filter()

Generates a filter property with the appropriate vendor prefixes.

• @filter: (Optional) filter property value. Defaults to grayscale(100%).

/* Usage: */
.example {
 .filter( sepia(50%) );
}
/* Example output: */
.example {
 -webkit-filter: sepia(50%);
 -moz-filter: sepia(50%);
 -ms-filter: sepia(50%);
 -o-filter: sepia(50%);
 filter: sepia(50%);
}

.transition()

Generates a transition property with the appropriate vendor prefixes.

.transition( <@transition> );

• @transition: transition property value.

/* Usage: */
.example {
 .transition( all .2s ease-in-out );
}
/* Example output: */
.example {
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}

.rotate()

Generates a transform property with a rotation value and with the appropriate vendor prefixes.

• @rotation: rotation value.

/* Usage: */
.example {
 .rotate( 2.5deg );
}
/* Example output: */
.example {
 -webkit-transform: rotate(2.5deg);
 -moz-transform: rotate(2.5deg);
 -o-transform: rotate(2.5deg);
 transform: rotate(2.5deg);
}

.placeholder()

Generates pseudo-selector rules to globally change the colour of placeholder text for inputs. Use outside of element selectors.

.placeholder( [<@color>] );

• @color: (Optional) colour value. Defaults to #DDD

/* Usage: */
.placeholder( #F00 );
/* Example output: */
:-moz-placeholder {
 color: #F00;
}
::-webkit-input-placeholder {
 color: #F00;
}

#gradient > .vertical()

Uses CSS3 gradient values to generate vertical background gradients with appropriate vendor prefixed implementations. Output varies according to the value of the @disable-filters setting.

#gradient > .vertical( <@start-color>, <@end-color> );

• @start-color: Colour value for the upper start colour.
• @end-color: Colour value for the bottom end colour.

/* Usage: */
.example {
 #gradient > .vertical( #F00, #555);
}
/* Example output: */
.example {
 background-color: #555;
 background-repeat: repeat-x;
 background-image: -khtml-gradient(linear, left top, left bottom, from(#F00), to(#555));
 background-image: -moz-linear-gradient(#F00, #555);
 background-image: -ms-linear-gradient(#F00, #555);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F00), color-stop(100%, #555));
 background-image: -webkit-linear-gradient(#F00, #555);
 background-image: -o-linear-gradient(#F00, #555);
 background-image: -ms-linear-gradient(top, #F00 0%, #555 100%);
}

#gradient > .horizontal()

Uses CSS3 gradient values to generate horizontal background gradients with appropriate vendor prefixed implementations. Output varies according to the value of the @disable-filters setting.

#gradient > .horizontal( <@start-color>, <@end-color> );

• @start-color: Colour value for the left start colour.
• @end-color: Colour value for the right end colour.

/* Usage: */
.example {
 #gradient > .horizontal( #F00, #555);
}
/* Example output: */
.example {
 background-color: #555;
 background-repeat: repeat-x;
 background-image: -khtml-gradient(linear, left top, right top, from(#F00), to(#555));
 background-image: -moz-linear-gradient(left, #F00, #555);
 background-image: -ms-linear-gradient(left, #F00, #555);
 background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #F00), color-stop(100%, #555));
 background-image: -webkit-linear-gradient(left, #F00, #555);
 background-image: -o-linear-gradient(left, #F00, #555);
 background-image: -ms-linear-gradient(left, #F00 0%, #555 100%);
 background-image: linear-gradient(left, #F00, #555);
}

.clearfix()

Generates the appropriate properies to apply the micro-clearfix hack to the element. Output varies according to the value of the @using-ieclasses setting.

/* Usage: */
.example {
 .clearfix();
}
/* Example output: */
.example:before,
.example:after {
 content: "";
 display: table;
}
.example:after {
 clear: both;
}
.ie6 .example,
.ie7 .example {
 zoom: 1;
}

.inline-block()

Helper to generate the inline-block display property plus fixes for IE7. Output varies according to the value of the @using-ieclasses setting.

/* Usage: */
.example {
 .inline-block();
}
/* Example output: */
.example {
 display: inline-block
}
.ie6 .example,
.ie7 .example {
 display: inline;
 zoom: 1;
}

.ir()

Generates 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).

/* Usage: */
.example {
 .ir();
 background-image: url('/text.png');
}
/* Example output: */
.example {
 border: 0;
 font: 0/0 a;
 text-shadow: none;
 color: transparent;
 background-color: transparent;
 background-image: url('/text.png');
}

.hidden()

Hides content from the page. Uses !important to override inline-styles added by JS.

/* Usage: */
.example {
 .hidden();
}
/* Example output: */
.example {
 display: none !important;
 visibility: hidden;
}

.visually-hidden()

Hides 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.

/* Usage: */
.example {
 .visually-hidden();
}
/* Example output: */
.example {
 border: 0;
 clip: rect(0 0 0 0);
 height: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
 width: 1px;
}
.example.focusable:active,
.example.focusable:focus {
 clip: auto;
 height: auto;
 margin: 0;
 overflow: visible;
 position: static;
 width: auto;
}

.size()

Shortcut for generating width and height properties.

• @size: Value to use for the height and width properties.

.size( <@width>, <@height> );

• @width: Value to use for the width property
• @height: Value to use for the height property

/* Usage: */
.example1 {
 .size( 30px );
}
.example2 {
 .size( 20px, 70px );
}
/* Example output: */
.example1 {
 width: 30px; 
 height: 30px;
}
.example2 {
 width: 20px;
 height: 70px;
}

Typography

SETTING: @base-font-size

@base-font-size: 16;

A 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.

Note 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.

.font-size-ems()

Generates a font-size property with the pixel value converted to ems.

.font-size-ems( <@px-size> [, <@context-px-size>] );

• @px-size: Font size (in pixels) to convert to ems.
• @context-px-size: (Optional) The font size (in pixels) of the current context. Defaults to the value of @base-font-size if not specified.

/* Usage: */
p {
 .font-size-ems( 12 );
}
/* Example output: */
p {
 font-size: 0.75em;
}

.font-size-rems()

Generates 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.

.font-size-rems( <@px-size> );

• @px-size: Font size (in pixels) to convert to rems.

/* Usage: */
p {
 .font-size-rems( 12 );
}
/* Example output: */
p {
 font-size: 12px; 
 font-size: 0.75rem;
}

.font-face()

Generates 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.

Future versions of this may include workarounds to make this more flexible.

.font-face( <@font-family>, <@font-path>, <@font-weight>, <@font-style>, <@include-svg> );

• @font-family: The name to give the font-family
• @font-path: The path/URL to the font, including the font name but with the file extension removed
• @font-weight: (Optional) Value for the font-weight property. Defaults to normal
• @font-style: (Optional) Value for the font-style property. Defaults to normal
• @include-svg: (Optional) Value for the font-weight property. Defaults to normal

/* Usage: */
.font-face( 'MyNiceFontBold', '/fonts/my_nice_font', bold );
/* Example output: */
@font-face {
 font-family: 'MyNiceFontBold';
 src: url('/fonts/my_nice_font.eot');
 src: url('/fonts/my_nice_font.eot?#iefix') format('embedded-opentype'),
 url('/fonts/my_nice_font.woff') format('woff'),
 url('/fonts/my_nice_font.ttf') format('truetype');
 font-weight: bold;
 font-style: normal;
}

.word-wrap()

Implement word-wrapping for text within the element, with hyphenation where supported. See http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ for details.

/* Usage: */
.example {
 .word-wrap();
}
/* Example output: */
.example {
 -ms-word-break: break-all;
 word-break: break-all;
 word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
}

Sprites

The 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.

SETTING: @sprite-image

@sprite-image: '/images/example-sprite.png';

The default image to use for the sprite mixins. Can be a Base64 encoded data-uri.

SETTING: @sprite-grid

The size of the grid (in pixels) that the individal images are placed on.

.sprite()

The most basic sprite mixin. Outputs all the required properties to generate your sprited image.

.sprite(<@x>, <@y>[, <@sprite-image>[, <@sprite-grid>]]);

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

/* Usage: */
.example {
 .sprite( 2, 3 );
}
/* Example output: */
.example {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: -100px -150px;
}

.sprite-sized()

The same as the .sprite() mixin above, but allows you to specify the height and width to constrain the element by.

.sprite(<@x>, <@y>, <@width>, <@height>[, <@sprite-image>[, <@sprite-grid>]]);

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @width: The width of the image.
• @height: The height of the image.
• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

.sprite(<@x>, <@y>, <@size>[, <@sprite-image>[, <@sprite-grid>]]);

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @size: The height and width of the image (for 'square' images).
• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

/* Usage: */
.example {
 .sprite-sized( 2, 3, 16px, 32px );
}
.example2 {
 .sprite-sized( 2, 3, 16px );
}
/* Example output: */
.example {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: -100px -150px;
 width: 16px;
 height: 32px;
}
.example2 {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: -100px -150px;
 width: 16px;
 height: 16px;
}

.sprite-ir()

Augments the .sprite-sized() mixin to include image replacement properties as defined in the .ir() mixin.

.sprite-ir(<@x>, <@y>, <@width>, <@height>[, <@sprite-image>[, <@sprite-grid>]]);

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @width: The width of the image.
• @height: The height of the image.
• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

.sprite-ir(<@x>, <@y>, <@size>[, <@sprite-image>[, <@sprite-grid>]]);

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @size: The height and width of the image (for 'square' images).
• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

/* Usage: */
.example {
 .sprite-ir( 2, 3, 16px, 32px );
}
.example2 {
 .sprite-ir( 2, 3, 16px );
}
/* Example output: */
.example {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: -100px -150px;
 width: 16px;
 height: 32px;
 border: 0;
 font: 0/0 a;
 text-shadow: none;
 color: transparent;
 background-color: transparent;
}
.example2 {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: -100px -150px;
 width: 16px;
 height: 16px;
 border: 0;
 font: 0/0 a;
 text-shadow: none;
 color: transparent;
 background-color: transparent;
}

.sprite-image()

A partial mixin. Just sets the background-image property to the @sprite-image. Useful in combination with the other sprite partial mixins below.

.sprite-image([<@sprite-image>]);

• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.

/* Usage: */
.example {
 .sprite-image();
}
/* Example output: */
.example {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
}

.sprite-pos()

A partial mixin. Generates the correct background-position property according to the position and grid. Useful in combination with the other sprite partial mixins.

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.

/* Usage: */
.example {
 .sprite-pos(2,3);
}
/* Example output: */
.example {
 background-position: -100px -150px;
}

.sprite-pos-sized()

Similar to the .sprite-pos() partial mixin above, but includes the ability to set the size of the element.

.sprite-pos-sized(<@x>, <@y>, <@width>, <@height>);

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @width: The width of the image.
• @height: The height of the image.

.sprite-pos-sized(<@x>, <@y>, <@size>);

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @size: The width of the image.

/* Usage: */
.example {
 .sprite-pos-sized( 2, 3, 16px, 32px );
}
.example2 {
 .sprite-pos-sized( 2, 3, 16px );
}
/* Example output: */
.example {
 background-position: -100px -150px;
 width: 16px;
 height: 32px;
}
.example2 {
 background-position: -100px -150px;
 width: 16px;
 height: 16px;
}

Icons

The 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.

The exact output of all the icon mixins depends on the value of the @using-modernizer setting.

.prepend-icon()

Prepends an icon to the element it's called on.

.prepend-icon( <@icon-image>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]] );

• @icon-image: URL or data URI of an image to use for the prepended icon
• @width: Width of the image
• @height: Height of the image
• @nudge-left: (Optional) The value of the left property for the icon. Defaults to 0.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to 0.
• @pad: (Optional) Left-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px

/* Usage: */
.example {
 .prepend-icon( 'img/icon.png', 16px, 32px );
}
/* Example output: */
.example {
 position: relative;
 padding-left: 42px;
}
.example:before {
 position: absolute;
 display: block;
 content: ' ';
 background: url('img/icon.png') no-repeat 0 0;
 width: 16px;
 height: 32px;
 top: 0;
 left: 0;
}

.append-icon()

Appends an icon after the element it's called on.

.append-icon( <@icon-image>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]] );

• @icon-image: URL or data URI of an image to use for the prepended icon
• @width: Width of the image
• @height: Height of the image
• @nudge-right: (Optional) The value of the right property for the icon. Defaults to 0.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to 0.
• @pad: (Optional) Right-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px

/* Usage: */
.example {
 .append-icon( 'img/icon.png', 16px, 32px );
}
/* Example output: */
.example {
 position: relative;
 padding-right: 42px;
}
.example:after {
 position: absolute;
 display: block;
 content: ' ';
 background: url('img/icon.png') no-repeat 0 0;
 width: 16px;
 height: 32px;
 top: 0;
 right: 0;
}

.prepend-sprite-icon()

Prepends an icon taken from the sprite to the element it's called on.

.prepend-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @width: Width of the image
• @height: Height of the image
• @nudge-left: (Optional) The value of the left property for the icon. Defaults to 0.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to 0.
• @pad: (Optional) Left-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px
• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

/* Usage: */
.example {
 .prepend-sprite-icon( 1, 2, 16px, 32px );
}
/* Example output: */
.example {
 position: relative;
 padding-left: 42px;
}
.example:before {
 position: absolute;
 display: block;
 content: ' ';
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: -50px -100px;
 width: 16px;
 height: 32px;
 top: 0;
 left: 0;
}

.append-sprite-icon()

Appends an icon taken from the sprite after the element it's called on.

.append-sprite-icon( <@x>, <@y>, <@width>, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>[, <@sprite-image>[, <@sprite-grid>]]]]] );

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @width: Width of the image
• @height: Height of the image
• @nudge-right: (Optional) The value of the right property for the icon. Defaults to 0.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to 0.
• @pad: (Optional) Right-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px
• @sprite-image: (Optional) The sprite image to use. Defaults to the globally defined @sprite-image value.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

/* Usage: */
.example {
 .append-sprite-icon( 1, 2, 16px, 32px );
}
/* Example output: */
.example {
 position: relative;
 padding-right: 42px;
}
.example:after {
 position: absolute;
 display: block;
 content: ' ';
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: -50px -100px;
 width: 16px;
 height: 32px;
 top: 0;
 right: 0;
}

.prepend-sprite-icon-pos()

Adjusts the positioning of a prepended sprite icon.

.prepend-sprite-icon-pos( <@x>, <@y>[, <@nudge-left>[, <@nudge-top>[, <@sprite-grid>]]] );

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @nudge-left: (Optional) The value of the left property for the icon. Defaults to 0.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to 0.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

/* Usage: */
.example {
 .prepend-sprite-icon-pos( 1, 2 );
}
/* Example output: */
.example:before {
 background-position: -50px -100px;
}

.append-sprite-icon-pos()

Adjusts the positioning of a appended sprite icon.

.append-sprite-icon-pos( <@x>, <@y>[, <@nudge-right>[, <@nudge-top>[, <@sprite-grid>]]] );

• @x: The x coordinate of the desired image on the grid.
• @y: The y coordinate of the desired image on the grid.
• @nudge-right: (Optional) The value of the right property for the icon. Defaults to 0.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to 0.
• @sprite-grid: (Optional) The grid size used in the sprite. Defaults to the globally defined @sprite-grid value.

/* Usage: */
.example {
 .append-sprite-icon-pos( 1, 2 );
}
/* Example output: */
.example:after {
 background-position: -50px -100px;
}

.prepend-icon-setup()

A partial mixin to generate common properties for prepended icon mixins.

.prepend-icon-setup( [<@width>[, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]]]] );

• @width: (Optional) Width of the image. Defaults to not being set.
• @height: (Optional) Height of the image. Defaults to not being set.
• @nudge-left: (Optional) The value of the left property for the icon. Defaults to not being set.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to not being set.
• @pad: (Optional) Left-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px

/* Usage: */
.example {
 .prepend-icon-setup( 32px, 15px );
}
/* Example output: */
.example {
 position: relative;
}
.example:before {
 position: absolute;
 display: block;
 content: ' ';
 top: 0;
 left: 0;
 width: 32px;
 height: 15px;
}

.append-icon-setup()

A partial mixin to generate common properties for appended icon mixins.

.append-icon-setup( [<@width>[, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]]]] );

• @width: (Optional) Width of the image. Defaults to not being set.
• @height: (Optional) Height of the image. Defaults to not being set.
• @nudge-right: (Optional) The value of the right property for the icon. Defaults to not being set.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to not being set.
• @pad: (Optional) Right-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px

/* Usage: */
.example {
 .append-icon-setup( 32px, 15px );
}
/* Example output: */
.example {
 position: relative;
}
.example:after {
 position: absolute;
 display: block;
 content: ' ';
 top: 0;
 right: 0;
 width: 32px;
 height: 15px;
}

.prepend-icon-image()

A partial mixin to generate image-specific properties for prepended icon mixins. Likely to be used in combination with the .prepend-icon-setup() mixin above.

.prepend-icon-image( <@icon-image>[, <@width>[, <@height>[, <@nudge-left>[, <@nudge-top>[, <@pad>]]]]] );

• @icon-image: URL or data URI of an image to use for the prepended icon
• @width: (Optional) Width of the image. Defaults to not being set.
• @height: (Optional) Height of the image. Defaults to not being set.
• @nudge-left: (Optional) The value of the left property for the icon. Defaults to not being set.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to not being set.
• @pad: (Optional) Left-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px

/* Usage: */
.example {
 .prepend-icon-image( 'img/icon.png', 12px, 12px );
}
/* Example output: */
.example {
 padding-left: 22px;
}
.example:before {
 background: url('img/icon.png') no-repeat 0 0;
 width: 12px;
 height: 12px;
}

.append-icon-image()

A partial mixin to generate image-specific properties for appended icon mixins. Likely to be used in combination with the .append-icon-setup() mixin above.

.append-icon-image( <@icon-image>[, <@width>[, <@height>[, <@nudge-right>[, <@nudge-top>[, <@pad>]]]]] );

• @icon-image: URL or data URI of an image to use for the prepended icon
• @width: (Optional) Width of the image. Defaults to not being set.
• @height: (Optional) Height of the image. Defaults to not being set.
• @nudge-right: (Optional) The value of the right property for the icon. Defaults to not being set.
• @nudge-top: (Optional) The value of the top property for the icon. Defaults to not being set.
• @pad: (Optional) Right-padding (in addition to the width of the icon) to apply to the element. Defaults to 10px

/* Usage: */
.example {
 .append-icon-image( 'img/icon.png', 12px, 12px );
}
/* Example output: */
.example {
 padding-right: 22px;
}
.example:after {
 background: url('img/icon.png') no-repeat 0 0;
 width: 12px;
 height: 12px;
}

Arrows

The arrow mixins give the ability to create pure CSS 'arrows' for use in different contexts.

.arrow()

Turns an empty element into an arrow. This works best when applied to pseudo-elements so that you don't need to creating junk elements in the DOM.

.arrow( <@direction>, <@size>, <@bg-color> );

• @direction: Direction that the arrow should point in. Possible values: up, down, left, right.
• @size: Size (in pixels) of the arrow.
• @bg-color: The color of the arrow.

/* Usage: */
.example:before {
 .arrow(right, 10px, #F00);
}
/* Example output: */
.example:before {
 width: 0;
 height: 0;
 border: 10px solid transparent;
 border-left-color: #F00;
}

.arrowbox()

Adds an arrow pointer to a box, for use as a tooltip (or similar).

.arrowbox( <@direction>, <@size>, <@bg-color>[, <@offset>] );

• @direction: Direction that the arrow should point in. Possible values: up, down, left, right.
• @size: Size (in pixels) of the arrow.
• @bg-color: The background-color of the arrow and the box.
• @offset: (Optional) Position (in pixels) for where the arrow should be positioned along the side of the box. Defaults to the center.

.arrowbox( <@direction>, <@size>, <@bg-color>, <@border-width>, <@border-color>[, <@offset>] );

• @direction: Direction that the arrow should point in. Possible values: up, down, left, right.
• @size: Size (in pixels) of the arrow.
• @bg-color: The background-color of the arrow and the box.
• @border-width: The border width for the arrow and the box.
• @border-color: The border color for the arrow and the box.
• @offset: (Optional) Position (in pixels) for where the arrow should be positioned along the side of the box. Defaults to the center.

/* Usage: */
.example {
 .arrowbox(down, 10px, #000);
}
.example2 {
 .arrowbox(right, 10px, #000, 2px, #F00);
}
/* Example output: */
.example {
 width: 100px;
 height: 100px;
 position: relative;
 background: #000;
 margin-bottom: 20px;
}
.example:after,
.example:before {
 top: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}
.example:after {
 border-color: transparent;
 border-top-color: #000;
 border-width: 10px;
 left: 50%;
 margin-left: -10px;
}
.example2 {
 width: 100px;
 height: 100px;
 position: relative;
 background: #000;
 border: 2px solid #F00;
 margin-bottom: 20px;
}
.example2:after,
.example2:before {
 left: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}
.example2:after {
 border-color: transparent;
 border-left-color: #000;
 border-width: 8px;
 top: 50%;
 margin-top: -8px;
}
.example2:before {
 border-color: transparent;
 border-left-color: #F00;
 border-width: 11px;
 top: 50%;
 margin-top: -11px;
}

Grids

The 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.

Gutters 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.

Groups of columns need to be wrapped in a parent element with the appropriate .column-wrapper() or .inline-column-wrapper() mixin applied to them.

SETTING: @total-columns

The total number of columns for the top-level grid.

SETTING: @column-width

The 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.

SETTING: @gutter-width

The 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.

.column-wrapper()

Apply 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.

/* Usage: */
.example {
 .column-wrapper();
}
/* Example output: */
.example {
 width: 100%;
}

.inline-column-wrapper()

Apply to the parent element of the grid columns for inline-block grids.

.inline-column-wrapper();

/* Usage: */
.example {
 .column-wrapper();
}
/* Example output: */
.example {
 letter-spacing: -0.31em;
 word-spacing: -0.43em;
}
.ie7 .example {
 letter-spacing: normal;
}

.column()

When 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.

When 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.

.column( <@span>[, <@parent-grid-units>[, <@end-column>]] );

• @span: Number of grid columns to span.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
• @end-column: (Optional) Set to true if this column is the last one in a row.

.column( <@span>[, <@end-column>] );

• @span: (Optional) Number of grid columns to span.
• @end-column: (Optional) Set to true if this column is the last one in a row.

/* Usage: */
.example {
 .column();
}
.example2 {
 .column(2);
}
.example3 {
 .column(2,true);
}
/* Example output: */
.example {
 float: left;
 margin-right: 1.5873015873015872%;
}
.example2 {
 float: left;
 width: 11.11111111111111%;
 margin-right: 1.5873015873015872%;
}
.example3 {
 float: left;
 width: 11.11111111111111%;
}

.inline-column()

When 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.

When 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.

.inline-column( <@span>[, <@parent-grid-units>[, <@end-column>]] );

• @span: Number of grid columns to span.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.
• @end-column: (Optional) Set to true if this column is the last one in a row.

.inline-column( <@span>[, <@end-column>] );

• @span: (Optional) Number of grid columns to span.
• @end-column: (Optional) Set to true if this column is the last one in a row.

/* Usage: */
.example {
 .inline-column();
}
.example2 {
 .inline-column(2);
}
.example3 {
 .inline-column(2,true);
}
/* Example output: */
.example {
 display: inline-block;
 vertical-align: top;
 letter-spacing: normal;
 word-spacing: normal;
 margin-right: 1.5873015873015872%;
}
.ie7 .example {
 display: inline;
 zoom: 1;
}
.example2 {
 display: inline-block;
 vertical-align: top;
 letter-spacing: normal;
 word-spacing: normal;
 width: 11.11111111111111%;
 margin-right: 1.5873015873015872%;
}
.ie7 .example2 {
 display: inline;
 zoom: 1;
}
.example3 {
 display: inline-block;
 vertical-align: top;
 letter-spacing: normal;
 word-spacing: normal;
 width: 11.11111111111111%;
}
.ie7 .example3 {
 display: inline;
 zoom: 1;
}

.end-column()

Should 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.

/* Usage: */
.example {
 .end-column();
}
/* Example output: */
.example {
 margin-right: 0;
 float: right;
}

.inline-end-column()

Should 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.

/* Usage: */
.example {
 .inline-end-column();
}
/* Example output: */
.example {
 margin-right: 0;
}

.span()

A partial mixin for generating the width (and sometimes margin-right) property for columns (both floated and inline-block).

.span( <@span>[, <@parent-grid-units>] );

• @span: Number of grid columns to span.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.

/* Usage: */
.example {
 .span(2);
}
/* Example output: */
.example {
 width: 11.11111111111111%;
}

.pre-pad()

Adds the specified number of columns' worth of padding to the the left of the element.

.pre-pad( <@span>[, <@parent-grid-units>] );

• @span: Number of grid columns' worth of padding-left to add.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.

/* Usage: */
.example {
 .pre-pad(2);
}
/* Example output: */
.example {
 padding-left: 12.698412698412698%;
}

.post-pad()

Adds the specified number of columns' worth of padding to the the right of the element.

.post-pad( <@span>[, <@parent-grid-units>] );

• @span: Number of grid columns' worth of padding-right to add.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.

/* Usage: */
.example {
 .post-pad(2);
}
/* Example output: */
.example {
 padding-right: 12.698412698412698%;
}

.pre-push()

Adds the specified number of columns' worth of margin to the the left of the element.

.pre-push( <@span>[, <@parent-grid-units>] );

• @span: Number of grid columns' worth of margin-left to add.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.

/* Usage: */
.example {
 .pre-push(2);
}
/* Example output: */
.example {
 margin-left: 12.698412698412698%;
}

.post-push()

Adds the specified number of columns' worth of margin to the the right of the element.

.post-push( <@span>[, <@parent-grid-units>] );

• @span: Number of grid columns' worth of margin-right to add.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.

/* Usage: */
.example {
 .post-push(2);
}
/* Example output: */
.example {
 margin-right: 14.285714285714285%;
}

.post-push-end()

Should be used instead of the .post-push() mixin above when applied to the last column in a row.

.post-push-end( <@span>[, <@parent-grid-units>] );

• @span: Number of grid columns' worth of margin-right to add.
• @parent-grid-units: (Optional) For nested grids, the number of columns the parent element spans needs to be added here.

/* Usage: */
.example {
 .post-push-end(2);
}
/* Example output: */
.example {
 margin-right: 12.698412698412698%;
}

Some notes on usage and best practices

Using 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.

On using (Clear)Less responsibly...

Just 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!

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.

Optimising output using 'partial' mixins

The 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.

An example using the sprite mixins:

/* Using 'full' mixins - results in verbose generated CSS */
.social {
 a.twitter {
 .sprite-sized(0, 1, 16px, 16px);
 }
 a.facebook {
 .sprite-sized(0, 2, 16px, 16px);
 }
 a.youtube {
 .sprite-sized(0, 3, 16px, 16px);
 }
}
/* Output - poorly optimised, lots of repitition */
.social a.twitter {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: 0 -50px;
 width: 16px;
 height: 16px;
}
.social a.facebook {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: 0 -100px;
 width: 16px;
 height: 16px;
}
.social a.youtube {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 background-position: 0 -150px;
 width: 16px;
 height: 16px;
}
/* Using 'partial' mixins - results in more optimised generated CSS */
.social {
 a {
 .sprite-image();
 .size(16px);
 }
 a.twitter {
 .sprite-pos(0, 1);
 }
 a.facebook {
 .sprite-pos(0, 2);
 }
 a.youtube {
 .sprite-pos(0, 3);
 }
}
/* Output - much better! */
.socal a {
 background-image: url('/images/example-sprite.png');
 background-repeat: no-repeat;
 width: 16px;
 height: 16px;
}
.social a.twitter {
 background-position: 0 -50px;
}
.social a.facebook {
 background-position: 0 -100px;
}
.social a.youtube {
 background-position: 0 -150px;
}

As 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.

Doesn't Gzipping make bloated output a non-issue?

Gzip 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.

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.

Mixins or classes?

If 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.

You 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).

Neither 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.

Credits

ClearLess is maintained and documented by Mark Perkins. For any queries, questions or bug reports you can ping him on twitter or open an issue in the Github issue tracker.

Many of the mixins, styles and other parts of this library were shamelessly poached from other open-source projects, including Mark Otto's Preboot and the HTML5 Boilerplate. Thanks for being awesome!

Text Box

Lato is free web-font designed by Lukasz Dziedzic from Warsaw.

Here you can feel the color, size, line height and margins between paragraphs. Don’t forget to underline your links, they are important visual marker for user.

Also, to attract attention you can mark some important words using bold weights.

Jekyll

By Tom Preston-Werner, Nick Quaranto, and many awesome contributors!

Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile or Markdown and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.

Getting Started

Diving In

Runtime Dependencies

• Classifier: Generating related posts (Ruby)
• Directory Watcher: Auto-regeneration of sites (Ruby)
• Kramdown: Markdown-superset converter (Ruby)
• Liquid: Templating system (Ruby)
• Maruku: Default markdown engine (Ruby)
• Pygments: Syntax highlighting (Python)

Developer Dependencies

• RDiscount: Discount Markdown Processor (Ruby)
• RedCloth: Textile support (Ruby)
• RedGreen: Nicer test output (Ruby)
• RR: Mocking (Ruby)
• Shoulda: Test framework (Ruby)

License

See LICENSE.

Overview

Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications. By way of example, we've included a simple email client demo (browse the source code) built over the Flight framework.

Flight uses ES5-shim and jQuery. Additionally you will need to include an AMD implementation such as require.js or loadrunner. Please read the Flight documentation for installation instructions.

Tweet

Why Flight?

Flight is distinct from existing frameworks in that it doesn't prescribe or provide any particular approach to rendering or providing data to a web application. It's agnostic to how requests are routed, which templating language you use or even if you render your HTML on the client or the server. While some web frameworks encourage developers to arrange their code around a prescribed model layer, Flight is organized around the existing DOM model with functionality mapped directly to DOM nodes.

Not only does this obviate the need for additional data structures that will inevitably influence the broader architecture, but by mapping our functionality directly onto the native web we get to take advantage of native features. For example, we get custom event propagation for free by piggy-backing off DOM event bubbling, and our event handling infrastructure works equally well with both native and custom events.

How does it work?

Flight enforces strict separation of concerns. When you create a component you don't get a handle to it. Consequently, components cannot be referenced by other components and cannot become properties of the global object tree. This is by design. Components do not engage each other directly; instead, they broadcast their actions as events which are subscribed to by other components.

Why events?

Events are open ended. When a component triggers an event it has no knowledge of how its request will be satisfied or by whom. This enforced decoupling of functionality allows the engineer to consider each component in isolation rather than having to reason about the growing complexity of the application as a whole.

By making DOM node events proxies for component events, we let the web work for us:

• we get event propagation for free
• a component can subscribe to a given event type at the document level or it can choose to listen only those events originating from within a specified DOM Node
• subscribing components do not distinguish between custom events from other components (e.g. dataMailItemsServed) and native DOM node events (e.g. click), and process both types of event in an identical fashion

Mobility and Testing

Each component is a module, which aside from a minimal set of standard dependencies (relevant Flight utilities and mixins), has no reference to the outside world. Thus a given component will respond to a given event in the same way, regardless of environment. This makes testing both simple and reliable — events are essentially the only variable and a production event is easy to replicate in testing. You can even debug a component by triggering events in the console.

Mixins

A mixin defines a set of functionality that is useful to more than one object. Flight comes with built-in support for functional mixins, including protection against unintentional overrides and duplicate mixins. While classical JavaScript patterns support only single inheritance, a component (or other object) can have multiple mixins applied to it. Moreover mixins requires a fraction of the boilerplate required to form traditional classical hierarchies out of constructor-prototypes hybrids, and don't suffer the leaky abstractions of the latter ('super', 'static', 'const' etc.)

Documentation and Demo

Our GitHub page includes full documentation as well as a sample app in the form of an email client:

Future Work

Flight is an ongoing project. We’re planning to add a full testing framework as well as making available more of the utilities that we use for the Twitter website frontend. We also look forward to your contributions and comments. We know we haven’t thought of everything and with your help we can continue to improve Flight for the benefit of everyone.

Acknowledgements

Flight was a group effort.

The following folks contributed to the project: Angus Croll (@angustweets), Dan Webb (@danwrong), Kenneth Kufluk (@kpk) and the members of the Twitter web team.

Thanks also to Tom Hamshere (@tbrd) for his work on the README.md and Nicolas Gallagher (@necolas) for general contributions to this site.

On behalf of the Web Core team,
—Angus Croll, Engineer (@angustweets)

Usage

1. Link to the JavaScript dependencies.

<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.js"></script>

2. Initialize the tour

var tour = new Tour();

3. Add steps

tour.addStep({
 element: "", /* html element next to which the step popover should be shown */
 title: "", /* title of the popover */
 content: "" /* content of the popover */
});

You can add as many steps as you want, but not too much or your users will fell asleep!

4. Start the tour

tour.start();

Options

Useful Methods

Bootstrap Tour saves the current step and will not display the tour again to users who have already completed it.

If, for some reasons, you want to force the tour to be displayed, pass true to the start() method.

tour.start(true);

Sometimes you want to end the tour prematurely:

tour.end();

Or skip to the next step:

tour.next();

Or go back to the previous step:

tour.prev();

Or skip to a specific step:

tour.showStep(i); // i is the position of the step in the tour, starting from 0 for the first step

Or restart the tour after it ended:

tour.restart();

Or verify if the tour ended:

tour.ended();

Initialization Options

Default options:

var tour = new Tour({
 name: "tour",
 keyboard: true,
 useLocalStorage: false,
 afterGetState: function (key, value) {},
 afterSetState: function (key, value) {},
 onStart: function (tour) {},
 onEnd: function (tour) {},
 onShow: function (tour) {},
 onHide: function (tour) {}
});

name

This option is used to build the name of the cookie or localStorage item where the tour state is stored. You can initialize several tours with different names in the same page and application.

keyboard

This option set the left/right arrow navigation. The default is true.

useLocalStorage

You can choose to save the tour state with localStorage instead of cookie. If you decide, you can safely remove the jquery.cookie plugin from the dependencies

afterGetState and afterSetState

You may want to do something right after Bootstrap Tour read or write the state. Just pass functions to afterGetState or afterSetState.

Your functions can have two parameters:

key

Contains the name of the state being saved. It can be current_step (for the state where the latest step the visitor viewed is saved) or end (for the state which is saved when the user complete the tour). Note that Bootstrap Tour prepends the key with tour_ when saving the state.

value

The value of the state been saved. Can be the index of the current step if the key is current_step, or yes if the key is end.

A simple example if to send a post request to your server each time there is a change:

var tour = new Tour({
 afterSetState: function (key, value) {
 jQuery.post("/some/path", value);
 }
});

onStart

Function to execute when the tour starts.

onEnd

Function to execute when the tour ends.

onShow

Function to execute right before each step is shown.

onHide

Function to execute right before each step is hidden.

Step Options

Default options:

tour.addStep({
 path: "", // string
 element: "", // (required) jQuery selector
 placement: "right", // string|function
 title: "", // string|function
 content: "", // string|function
 next: 0, // number
 prev: 0, // number
 animation: true, // boolean
 onShow: function (tour) {}, // function
 onHide: function (tour) {} // function
});

path

Path to the page on which the step should be shown. this allows you to build tours that span several pages!

element

HTML element on which the step popover should be shown.

placement

How to position the popover - top | bottom | left | right.

title

Step title

content

Step content

next

Index of the step to show after this one, starting from 0 for the first step of the tour. -1 to not show the link to next step. By default, the next step (in the order you added them) will be shown.
This option should be used in conjunction with "prev".

prev

Index of the step to show before this one, starting from 0 for the first step of the tour. -1 to not show the link to previous step. By default, the previous step (in the order you added them) will be shown.
This option should be used in conjunction with "next".

animation

Apply a css fade transition to the tooltip.

onShow

Function to execute right before the step is shown. It overrides the global onShow option.

onHide

Function to execute right before the step is hidden. It overrides the global onHide option.

options

(Object) Extend the options for one step.

reflex

(Bool) Enable the reflex mode : you can click on the element for continue the tour.

Contributing

Bug reports and pull requests are much needed!

License

Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0. Well, the same licenses as Bootstrap. We are lazy! ;)

Responsive Patterns

A collection of patterns and modules for responsive designs.

Mostly Fluid Column Drop Layout Shifter Tiny Tweaks Main column with sidebar 3 column 3 column v2 2 equal-width columns 3 equal-width columns 4 equal-width columns 5 equal-width columns 6 equal-width columns Top Left Right Left and Right Bottom Table Cell Flexbox AppendAround List with Thumbnails List with Thumbnails 2 List with Thumbnails and Summary 4-up Grid Block Double-Wide v1 Double-Wide v2 Double-Wide v3 Double-Wide v4 With Title Sections Equal Height Rows Irregular Grid Blocks Responsive Table Definition List to Table Pie Chart to Table Priority Columns Link to Full-Table Horizontal Overflow Header Orientation Flip

Toggle Footer Anchor Select Menu Left Nav Flyout Left Nav Flyout w/ 'off-nav closing' Priority+ Top Links Stacked Top Links Horizontal Overflow Overlay Multi-Toggle Multi-Toggle v2 Multi-Toggle v3 Multi-Toggle with Active Parent Links Multi-Toggle with Active Parent Links - Pure CSS The Ol' Right-to-Left The Skip the Subnav The Carousel+ Across the Top Breadcrumbs Dropdown Last-One Only

Basic Fluid Image Picturefill Server-side Image Grid

Fluid Video Fluid Map Maintaining Aspect Ratio Adaptive Maps

Form with Left Labels Fluid Search Form Login Form

3-up Carousel 3-up Touch Carousel Fluid Carousel Fluid Accordion to Full Accordion To Tab Vertical to Horizontal Slide-Down Notification Bar Overlay Conditional Lightbox