Home

#responsive.less Documentation

responsive.less is a simple set of equations for faster responsive layout creation using LESS.

Currently it includes methods for converting pixel based widths/margins/padding into percentages. It uses Ethan Marcotte's method of target ÷ context = result. Read more here.

##Usage

###.width()

Convert px based width to %.

Example Here 480px is our desired element width and 960px is the context in which it sits, or it parent's width -

#div{ .width(960, 480); }

###.padding()

Convert px based margins to %.

Example

Here 10px (the usual 'top right bottom left' order applies) is our desired element's padding and 480px is the element width

#div{ .padding(480, 10, 10, 10, 10); }

Individual properties are also available e.g.

#div{ .padding-left(480, 10); }

###.margin()

Convert px based margins to %.

Example

Here 10px (the usual 'top right bottom left' order applies) is our desired element's margin and 480px is the context in which it sits, or it parent's width -

#div{ .margin(480, 10, 10, 10, 10); }

Individual properties are also available e.g.

#div{ .margin-left(480, 10); }