Matt Varone Creative Designer

— When you regularly work on similar projects, you often find yourself typing the same code over and over. That’s the reason why many of us use code templates and base style sheets. For example, it’s very common to have a base CSS style sheet with browser resets styles to use as a start point. This practice surely is a great and handy way to speed up our workflow.

I found that its also a great addition to include what I like to call helpers. By this I mean reusable classes that do common stuff like floating elements, adding a border, indenting text, etc. The idea might seem simple and the classes even a bit silly but I can assure you that once you have them incorporated they will surely speed up your coding process.

The Classes:

I have compiled below some I found myself using lately in almost every project.

/* HELPERS
/////////////////////////////*/

.float-left   { float:left }
.float-right  { float:right }

.align-left   { float:left; margin: 0 15px 0 0 }
.align-right  { float:right; margin: 0 0 0 15px }

.clear        { clear:both }

.center       { margin: 0 auto }

.margins      { margin:15px }
.push-top     { margin-top:15px }
.push-right   { margin-right:15px }
.push-bottom  { margin-bottom:15px }
.push-left    { margin-left:15px }

.border       { border:10px solid #eee }

.text-left    { text-align:left }
.text-right   { text-align:right }
.text-center  { text-align:center }
.text-justify { text-align:justify }

.underline    { text-decoration:underline }
.highlight    { background-color:#ffc }

.indent       { text-indent:15px }
.no-indent    { text-indent:0 }

Usage example:

<img src="pic.gif" alt="Pic" class="align-right border"/>
<p class="text-justify">Lorem ipsum dolor sit..</p>

As a simple example you could use helpers to justify a paragraph and align an image with a border to the right of it.

I Hope you find them useful!. Feel free to leave your own reusable classes on the comments!