Responsive.less - Create responsive websites super fast!

Posted by

    One of my private labs projects here at Enonic has resulted in this collection of Less-mixins. They enable you to create a responsive website in a fraction of the time it normally takes.

    Faster responsiveness

    Instead of writing tedious media queries, you just use simple mixins that create them for you.

    How to use them

    Define a row in the grid by applying the .row() mixin and define columns with the .span(@span) mixin, where @span is the number of columns you want the element to span.

    Having an element span 4 columns as a standard, but span the entire grid on mobile devices you will simply apply the two mixins .span(4) and .span-small(12). Not even a single media query.

    Have a look at the following demo. It has three elements that are all responsive and span different amount of columns as the window shrinks.

    The entire less code for the demo is below:

    Configuration

    Responsive.less works out of the box, but you can change the variables at the top of the file to customize both grid and break points.

    Easier to read and maintain

    Since the mixins makes responsive code shorter and easier to read, your projects will be a lot easier to maintain.

    Give it a try

    Go to the Github page and get started!

    Comments