HelpLess. A LESS library

0 Comments

As part of less-boilerplate I have written HelpLess. A full featured helper library to make your LESS coding even more of a breeze.

A few months ago I started developing with LESS. LESS by @cloudhead is an extension of CSS that adds dynamic behaviour to your stylesheet markup. LESS is completely backwards compatible with CSS, it adds variables, mixins, functions, nested declarations and more.

LESS needs to compiled with either the less.js client library, server side with node.js or if you use html5-boilerplate then you can use my less-boilerplate which will compile your LESS code to CSS as part of the build script. Read my post about less-boilerplate here

See below for a full overview of HelpLess

HelpLess logo

What is it?

HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language. Read more about LESS: http://lesscss.org/

HelpLess also comes bundled in less-boilerplate, which compiles LESS to CSS using the boilerplate build tool. I have tried to make HelpLess as all-encompasing as possible with support for dynamic grids and page starter themes as well as all the css3 features I could think of. HelpLess has an invisible footprint until you call a mixin so if you import HelpLess but don't use it, it will not increase your compiled file size.

Installing

Clone the repository or download the zip and include helpless in your main style.less file. Alternatively you can use less-boilerplate as mentioned above.

Compatibility

You will need less.js to compile LESS or one of the other compile tools available. See lesscss.org for more details

Getting Started

Importing

@import 'libs/helpless-x.x.x.less'; 
// Where x.x.x corresponds to the version number

Normalize To add normalize.css to your stylesheet call #hl.normalize() at the top of the document outside of any html elements.

#hl.normalize();

body {
    ...
}

Clearfix

body {
    ...

    .ul {
        #hl.clearfix();

        li {
            float: left;
            ...
        }
    }
}

Setting up a grid. I will use the following html structure as an example:

<html>
...
<body>
    <div id="main">
        <article>
            <div class="content">
                ...
            </div>
            <aside>
           ...
            </aside>
        </article>
    </div>
</body>
</html>

To add my grid to this html I would use:

body {
    ...

    #main {
        #hl.grid.960(); 
        // default 960 grid with 16 columns and a 10px gutter

        article {
            #hl.grid.row();

            .content {
                #hl.grid.col(10);
            }

            aside {
                #hl.grid.col(6);
            }
        }
    }
}

Themes Themes are a way of quickly styling the base elements of your page. They do not add any structural or layout based styling

body {
    #hl.ui.themes.light();

    ...
}

Typography There a number of different helpers for typography. If you want to quickly choose a serif style with the addition of a webfont you would:

body {
    #hl.typo.serif('Sorts Mill Goudy');      
    ...
}

or a sans-serif:

body {
    #hl.typo.sans('Droid Sans');
    ...
}

Lists To quickly remove the default bullet styling from a list:

ul {
    #hl.ui.list.subtle();
}

And a horizontal list, for example if you were creating a site nav that runs along the top of the page

ul {
    #hl.ui.list.horizontal();
}

Reference


BASICS

.reset

.normalize .clearfix .centered .border .opacity .round-all-corners .rounded-corners .transition .drop-shadow .inner-shadow .text-shadow .background-gradient .scale .scaleX .scaleY .rotate .rotateX .rotateY .skew .skewX .skewY .translate .translateX .translateY
.matrix


GRID

.grid
    .make
    .1200
  .1120
  .1040
  .960
  .880
  .800
  .720
  .640
  .560
  .480
  .400
  .320
  .240
  .row
  .col

TYPOGRAPHY

.typo
  .serif
  .sans
  .columns

IMAGES

.img
    .responsive
    .framed

USER INTERFACE

.ui
    .themes
    .light
     .dark
  .list
     .subtle
     .horizontal

So there you go This library will be constantly updated by myself and hopefully other so check the github repo for more info

-co Matt

blog comments powered by Disqus