Building Responsive Websites With LESS

RWD concept is a very popular topic and web developers and designers should know the basics behind it. It is easy to select one of the many frameworks that make the build process easier, but before that, we have to understand how to hand code responsive websites.

When building a RWD website you use math to convert the number in percentages or relative units (ems). So take out the calculator from school years and start punching in numbers or use the LESSpercent file bellow that does that for you. Before you plunge into coding I would recommend reading the book that started the RWD movement - Responsive Web Design by Ethan Marcotte. The book explains how percentages and ems work and how to use them.

LESSpercent file

For the ones that already know the basics I created a LESS file that calculates the values for you. It takes pixel values and converts them to percentages. I saw a similar solution for ems on IFDattics website and decided that it would be useful to create one that does the same for percentages.

The file is hosted on GitHub and you are encouraged to contribute to the project if finding a better solution.

Download Example

Getting started with the LESSpercent file

Download the file and @import it into your main stylesheet. Values are calculated with the help of LESS Namespaces. You can combine a number of mixins or variables inside a “function”, which is then called inside the main stylesheet. The name used in the LESSpercent file is #pxtofluid.

/* Converting the width and height */
pxtofluid {
  .width( @target: @value, @context: @value ) {
    width: (@target / @context) * 100%;
  }
  .height( @target: @value, @context: @value ) {
    height: (@target / @context) * 100%;
  }
}

Changing the base font size

At the beginning of the file there is a variable @basefont. Change it to the default value that is used inside the body tag. The default setting in the file is 14px.

/* Size of your font in the body tag without px. */
@basefont: 14;

Setting the font size and height is easy:

/* The font size is 14px and the line height 21px */
body {
  #pxtofluid > .font-size( @basefont );
  #pxtofluid > .line-height( 21, @basefont );
}

Using mixins

The basic formula for calculating the ratio between elements is @target / @context. The target is the value of the element that we style, while the context is the parent element. It is very important to know in which context we are, because we have to use its values.

The mixins that can be used are the following:

.element {
  #pxtofluid > .width( @target, @context );
  #pxtofluid > .height( @target, @context );
  #pxtofluid > .padding( @target, @context );
  #pxtofluid > .margin( @target, @context );
  #pxtofluid > .margin-top( @target, @context );
  #pxtofluid > .margin-right( @target, @context );
  #pxtofluid > .margin-bottom( @target, @context );
  #pxtofluid > .margin-left( @target, @context );
  #pxtofluid > .padding-top( @target, @context );
  #pxtofluid > .padding-right( @target, @context );
  #pxtofluid > .padding-bottom( @target, @context );
  #pxtofluid > .padding-left( @target, @context );
}

Styling an element is easy:

.navigation {
  float: right;
  #pxtofluid > .width( 400, 1000 ); /* value is 40% */
  #pxtofluid > .margin-top( 20, 1000 ); /* value is 2% */
  #pxtofluid > .padding-right( 10, 400 ); /* value is 2.5% */
}

The CSS output is:

.navigation {
  float: right;
  width: 40%;
  margin-top: 2%;
  padding-right: 2.5%;
}

You have to be careful when determining the context with margins and paddings. With margins the context is the width of the element’s container whereas with padding the context is the width of the element itself.

I hope you’ll find the LESSpercent file valuable. For more details on how to use it open up the DEMO or look at the files on GitHub.