Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A minimal toolset for faster responsive layouts in LESS
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.txt
responsive.less
styles.less

README.txt

responsive.less
Author: Paul Mist
Twitter: @paulmist

EXAMPLE USAGE
-------------

--- Import to your .less styles ---

@import 'responsive.less';

--- .width() ---

Convert px based width to %
where 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 padding to %
where 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 margin to %
where 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);
}
Something went wrong with that request. Please try again.