Heads up! Preboot 2 has been released. Read more »

Preboot

Preboot is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

What's Inside

Here's the rundown of what you can find in Preboot:

Mixins

Mixins are basically supercharged includes for CSS, allowing you to combine a set of rules into one. They're great for vendor prefixed properties like -webkit-box-shadow, gradients, and more.

Rounding Corners

Round the corners of an element with .border-radius. You can pass in a single value for all corners like so:

.border-radius(@radius: 6px) {
  -moz-border-radius: @radius;
  border-radius: @radius;
}

Or get fancy with it and selectively apply rounding to certain corners:

.border-radius(3px,3px,0,0);

Box (Drop) Shadows

Give any element some depth in all the best browsers with a single rule. Be sure to use RGBA colors in your box shadows so they blend as seamlessly as possible with backgrounds.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

Gradients

Take any two colors and turn them into a most bodacious gradient of awesome. They even work with preset variables (see below) and RGBA colors. You can use vertical or horizontal gradients with the following lines of code:

#gradient > .vertical(#333,#000);
#gradient > .horizontal(@blue,@red);

Two colors not enough? Go hog wild and add another color into the mix with a .three-color-gradient. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color. Donezo.

#gradient > .vertical-three-colors(#777,#333,.25,#000);
#gradient > .vertical-three-colors(@blue,@red,@purple);

Go easy on those three color gradients though—they can get out of hand quick. Also, if you're feeling a little bit crazy, go ahead and take the .vertical-three-colors and expand them to four and five colors. Just don't let it get out of hand.

Transitions

Elegantly transition elements in style with a single rule.

.transition(@transition: all linear .2s) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  transition: @transition;
}

Example transitions could include fading input elements on focus (instead of the default outline), animating logos on hover, and even animating link hovers.

Simple Clearfix

Forget adding .clearfix to all your divs and just add the mixin where appropriate.

.container {
  .clearfix;
}

Make Any Color Translucent

While RGBA is great, LESS only has a color conversion tool that changes any color to HSL. By doing so, it allows us to add an extra alpha layer (just like RGB to RGBA). Just call the mixin, select a color, and add the alpha transparency (a decimal value from 0 to 1).

.container {
  #translucent > .background(@blue, 0.5);
  div {
    #translucent > .background(#900, 0.5);
  }
}

Font Stacks

Style an element's text quickly and easily with flexible built-in serif, sans-serif, and monospace font stacks.

#font {
  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Georgia", Times New Roman, Times, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
    font-family: "Monaco", Courier New, monospace;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
}

Buttons

Generate buttons of any color with a single mixin that provides ultimate control while still providing a consistent family of buttons. Set the base color, the text color, text shadow, font size, padding, and border radius. More controls coming soon (I hope).

// Buttons
.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @rounded: 6px) {
  display: inline-block;
  .gradient(@color,darken(saturate(@color,10),10));
  padding: @padding;
  text-shadow: @textShadow;
  color: @textColor;
  font-size: @fontSize;
  line-height: 20px;
  .rounded(6px);
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
  .box-shadow(@shadow);
  &:hover {
    background-position: 0 -15px;
    color: @textColor;
    text-decoration: none;
  }
}

This mixin means you can quickly create a set of buttons like so:

a.button {
  .button();
  &.purple {
    .button(@purple,#fff,0 -1px 1px rgba(0,0,0,.4));
  }
  &.blue {
    .button(@blue,#fff,0 -1px 1px rgba(0,0,0,.4));
  }
}

Using just the base color of the buttons you can easily create a whole family of buttons with only a few lines of code.

Flexible Grid System

Love grids? Get yourself on the fast track to an awesomely flexible grid system. Set the number of columns, the column width, and the column gutter width. Do note though that these columns won't work in IE6—they're designed to use the minimum amount of CSS, meaning they employ :first-child and have no set container widths.

1 Col
2 Cols
4 Cols
1 Col
1 Col
1 Col
1 Col

The .container and .columns mixins do all the code generation for you, meaning all you need to do is add the markup and call the mixins. Here's the LESS code that's needed to make it all happen, followed by the above example's code.

// Grid System
@gridColumns:       16;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;
@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  display: inline;
  float: left;
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  margin-left: @gridGutterWidth;
  &:first-child {
    margin-left: 0;
  }
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}

And here's how you take that and create some sweet ass columns:

// Gimme a grid!
@gridColumns: 11;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
div.grid {
  .container;
  div.span1 { .columns(1); }
  div.span2 { .columns(2); }
  ...
  div.span11 { .columns(11); }
}

Boom, columns, baby! Also worth noting is the .offset mixin; with it you can build offset columns just like normal columns for more grid fun.

Miscellaneous helpers

A few helper methods that save time for common sizing and alignment patterns.

// Center-align a block level element
.center-block {
  display: block;
  margin: 0 auto;
}

// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
  height: @height;
  width: @width;
}
.square(@size: 5px) {
  .size(@size, @size);
}

Variables

Variables have never existed in CSS, but with LESS, they're all up in da club. Preboot includes a set of great colors perfect for just about any project as an example of how to use variables.

Easily style your links with the right color with only one value.

// Links
@linkColor:         #8b59c2;
@linkColorHover:    darken(@linkColor, 10);

Note that the @linkColorHover uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

Color Scheme

Get a jump on better color management within your code with these awesome variables. No more guessing hex values throughout a project.

// Grays
@white:             #fff;
@grayLighter:       #ccc;
@grayLight:         #777;
@gray:              #555;
@grayDark:          #333;
@black:             #000;

// Accent Colors
@blue:              #08b5fb;
@green:             #46a546;
@red:               #9d261d;
@yellow:            #ffc40d;
@orange:            #f89406;
@pink:              #c3325f;
@purple:            #7a43b6;

Baseline

Though not fully utilized within Preboot, @baseline will help simplify your line-heights and vertical rhythm in any project.

@baseline:          20px;

Using it is simple:

div#exampleBlock {
  margin-bottom: @baseline * 2; // 40px
  padding: @baseline; // 20px
  line-height: @baseline; // 20px
}

How to Use

Rolling Your Own

Getting up and running with LESS and Preboot is straightforward. Here's the 1-2-3 rundown to rolling your own install of Preboot.

  1. Download LESS and Preboot.
  2. Add the LESS javascript file in your head and create a new .less file that imports preboot.less.
  3. Start writing super awesome CSS!

That's it—all you need to do is include a javascript and less file and you're ready to rock. But wait, there's more!

All Prebooted

Looking for a simpler start? Look no further than this very page. It's included as a fully functional demo of what's possible with LESS and Preboot that you can play around with or use as a template for something more.

It's licensed under the Creative Commons, so you're set to do what you please with it so long as you give me a shoutout or a link back here (it's much appreciated, and thanks in advance!).

Download

Preboot is available for download right from GitHub, the best code hosting and version control service out there. Included in the zip are the latest version of LESS, Preboot.less, and a demo page.

Download Preboot.less or check it out on GitHub