If you’re not already using LESS, you should be and I advise you start now or else. As you’ll know developing responsive websites involves taking the desired pixel value dividing it by its parent contextual value and then multiplying by 100 to get the desired percentage. I used to use a calculator back in the day before I discovered LESS.
I realised a few developer friends of mine were still doing it the hard way, so I thought I’d share some mixin functions I created and incorporate into my LESS workflow. These could perhaps be merged into one super function, but in responsive development I only ever use percentage widths and margins/paddings left and right values so this works better for me and is for flexible.
Calculating responsive widths:
.pwidth(@target, @context: 960px) {
width: 100% * (@target/@context);
}
Example usage: .pwidth(220px); // Will generate a width of 220px in percentage form based on the parent context
Responsive margin-left
.lmargin(@target, @context: 960px) {
margin-left: 100% * (@target/@context);
}
Example usage: .lmargin(10px); // Will generate a margin-left of 10px in percentage form based on the parent context
Responsive margin-right
.rmargin(@target, @context: 960px) {
margin-right: 100% * (@target/@context);
}
Example usage: .rmargin(10px); // Will generate a margin-rightof 10px in percentage form based on the parent context
Responsive padding-left
.lpadding(@target, @context: 960px) {
padding-left: 100% * (@target/@context);
}
Example usage: .lpadding(10px); // Will generate a padding-left of 10px in percentage form based on the parent context
Responsive padding-right
.rpadding(@target, @context: 960px) {
padding-right: 100% * (@target/@context);
}
Example usage: .rpadding(10px); // Will generate a padding-right of 10px in percentage form based on the parent context
