index.html

---
layout: default
---



<header class="masthead">
  <div class="masthead-inner">
    <h1 class="header-divider">Preboot</h1>
    <p>A collection of LESS mixins and variables for writing better CSS from <a href="http://twitter.com/mdo" target="_blank">@mdo</a>.</p>
    <ul class="list-unstyled header-divider">
      <li><a href="https://github.com/mdo/preboot/archive/master.zip">Download Preboot</a></li>
      <li><a href="https://github.com/mdo/preboot" target="_blank">View project on GitHub</a></li>
    </ul>
    <p class="social-buttons">
      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&repo=preboot&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe>
      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&repo=preboot&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
      <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://getpreboot.com/" data-count="horizontal" data-via="mdo">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </p>
  </div>
</header>



<div class="container">

<section id="introduction">
  <h2 class="header-divider">Introducing Preboot</h2>
  <p class="lead"><a href="http://github.com/mdo/preboot" target="_blank">Preboot</a> is a comprehensive and flexible collection of <a href="http://lesscss.org" target="_blank">LESS</a> utilities. Its original variables and mixins became the precursor to <a href="http://getbootstrap.com" target="_blank">Bootstrap</a>. Since then, it's all come full circle.</p>
  <p>After a two-year hiatus, Preboot has been reborn with many of the LESS variable and mixin improvements from Bootstrap, along with some new enhancements, too. It's one of the lightest and most powerful tools for CSS development without any prebuilt components.</p>
  <p>Need something more powerful? Use <a href="http://getbootstrap.com" target="_blank">Bootstrap</a>.</p>
  <p>
    <a href="https://github.com/mdo/preboot/archive/master.zip" class="btn">Download Preboot 2</a>
    <a href="https://github.com/mdo/preboot" class="btn" target="_blank">GitHub project</a>
  </p>
</section>



<section id="table-of-contents">
  <h2 class="header-divider">What's included</h2>
  <p class="lead">Here's the rundown of what you can find in Preboot. Jump to a section for some lightweight documentation and code snippets.</p>
  <div class="row">
    <div class="grid-4">
      <h3><a href="#variables">Variables</a></h3>
      <ul class="toc">
        <li><a href="#variables-colors">Color</a></li>
        <li><a href="#variables-scaffolding">Scaffolding</a></li>
        <li><a href="#variables-links">Links</a></li>
        <li><a href="#variables-typography">Typography</a></li>
      </ul>
      <h3><a href="#grid-system">Grid system</a></h3>
      <ul class="toc">
        <li><a href="#grid-variables">Variables</a></li>
        <li><a href="#grid-mixins">Mixins</a></li>
        <li><a href="#grid-example">Example usage</a></li>
      </ul>
    </div>
    <div class="grid-4">
      <h3><a href="#vendor-mixins">Vendor mixins</a></h3>
      <ul class="toc">
        <li><a href="#mixins-box-sizing">Box sizing</a></li>
        <li><a href="#mixins-rounded-corners">Rounded corners</a></li>
        <li><a href="#mixins-box-shadow">Box shadows</a></li>
        <li><a href="#mixins-transitions">Transitions</a></li>
        <li><a href="#mixins-transformations">Transformations</a></li>
        <li><a href="#mixins-opacity">Opacity</a></li>
        <li><a href="#mixins-placeholder">Placeholder</a></li>
        <li><a href="#mixins-columns">Columns</a></li>
        <li><a href="#mixins-gradients">Gradients</a></li>
      </ul>
    </div>
    <div class="grid-4">
      <h3><a href="#utility-mixins">Utility mixins</a></h3>
      <ul class="toc">
        <li><a href="#mixins-clearfix">Clearfix</a></li>
        <li><a href="#mixins-centering">Horizontal centering</a></li>
        <li><a href="#mixins-sizing">Sizing helpers</a></li>
        <li><a href="#mixins-resizable">Textarea resize</a></li>
        <li><a href="#mixins-truncating">Truncating text</a></li>
        <li><a href="#mixins-retina-images">Retina images</a></li>
      </ul>
    </div>
  </div>
</section>



<section id="variables">
  <h2 class="header-divider" id="variables">Variables</h2>
  <p class="lead">Variables still don't exist in CSS, but they do in LESS and other CSS preprocessors. Preboot includes a several groups of meaningful and useful variables for any project.</p>

  <h3 id="variables-colors">Colors</h3>
  <p>Easily make use of two color schemes included in Preboot: grayscale and semantic. Grayscale colors provide quick access to shades of black (in increments of 10%) while semantic includes various colors assigned to meaningful values.</p>
  <div class="color-swatches">
    <div class="color-swatch black-10"></div>
    <div class="color-swatch black-20"></div>
    <div class="color-swatch black-30"></div>
    <div class="color-swatch black-40"></div>
    <div class="color-swatch black-50"></div>
    <div class="color-swatch black-60"></div>
    <div class="color-swatch black-70"></div>
    <div class="color-swatch black-80"></div>
    <div class="color-swatch black-90"></div>
  </div>
{% highlight css linenos %}
@black-10: darken(#fff, 10%);
@black-20: darken(#fff, 20%);
@black-30: darken(#fff, 30%);
@black-40: darken(#fff, 40%);
@black-50: darken(#fff, 50%);
@black-60: darken(#fff, 60%);
@black-70: darken(#fff, 70%);
@black-80: darken(#fff, 80%);
@black-90: darken(#fff, 90%);
{% endhighlight %}

  <div class="color-swatches">
    <div class="color-swatch brand-primary"></div>
    <div class="color-swatch brand-success"></div>
    <div class="color-swatch brand-warning"></div>
    <div class="color-swatch brand-danger"></div>
    <div class="color-swatch brand-info"></div>
  </div>
{% highlight css linenos %}
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;
@brand-info:    #5bc0de;
{% endhighlight %}

  <p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
{% highlight css linenos %}
// Use as-is
.masthead {
  ...
  background-color: @brand-primary;
  ...
}

// Reassigned variables in LESS
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}
{% endhighlight %}

  <h3 id="variables-scaffolding">Scaffolding</h3>
  <p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
{% highlight css linenos %}
// Scaffolding
@body-background: #fff;
@text-color:      @black-50;
{% endhighlight %}

  <h3 id="variables-links">Links</h3>
  <p>Easily style your links with the right color with only one value.</p>
{% highlight css linenos %}
// Variables
@link-color:       @brand-primary;
@link-color-hover: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-color-hover;
    text-decoration: underline;
  }
}
{% endhighlight %}
  <p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>

  <h3 id="variables-typography">Typography</h3>
  <p>Easily set your type face, text size, leading, and more with a few quick variables. Preboot makes use of these as well to provide easy typographic mixins as well.</p>
{% highlight css linenos %}
// Typography

// Font stacks for easy inclusion and customization
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

// Generate a straightforward type scale
@font-size-base:          14px;
@font-size-large:         @font-size-base * 1.25; // ~18px
@font-size-small:         @font-size-base * 0.85; // ~12px
@font-size-mini:          @font-size-base * 0.75; // ~11px

// Baseline for the line-height of the body
// To be used in conjunction with @font-size-base
@line-height-base:        20px;

// Enable the option to customize headings
@headings-font-family:    inherit; // From @font-family-base
@headings-font-weight:    500;
{% endhighlight %}
</section>



<section id="grid-system">
  <h2 class="header-divider">Grid system</h2>
  <p class="lead">Generate semantic, mobile-first grid layouts with a few variables and mixins, all without superfluous markup.</p>

  <h3 id="grid-variables">Grid variables</h3>
  <p>There are three grid variables that Preboot uses to power the grid mixins.</p>
{% highlight css linenos %}
// Specify the number of available columns
@grid-columns:          12;
// Inner padding on each side of a column to create gutters
@grid-column-padding:   15px;
// Point at which the floats kick in and horizontally align columns
@grid-float-breakpoint: 768px;
{% endhighlight %}
  <p>Customizing these variables should automatically work with any of the grid mixins, so tweak away.</p>

  <h3 id="grid-mixins">Grid mixins</h3>
  <p>There are three available mixins for each part of a standard grid system:</p>
  <ul>
    <li><code>.make-row()</code> provides a wrapper for the columns to align their content via negative margin and clear the floats.</li>
    <li><code>.make-column(<em>n</em>)</code> is used to generate <em>n</em> number columns as a percentage of the available grid columns (set via variable to 12 by default).</li>
    <li><code>.make-column-offset(<em>n</em>)</code> pushes a column right by <em>n</em> columns via <code>margin</code>.</li>
  </ul>
  <p><strong>Heads up!</strong> These grid columns are mobile first, meaning by default they stack vertically. Floating only kicks in with viewports of 768px or higher.</p>
{% highlight css linenos %}
.make-row() {
  // Negative margin the row out to align the content of columns
  margin-left: -@grid-column-padding;
  margin-right: -@grid-column-padding;
  // Then clear the floated columns
  .clearfix();
}

.make-column(@columns) {
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    // Calculate width based on number of columns available
    width: percentage(@columns / @grid-columns);
  }
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Set inner padding as gutters instead of margin
  padding-left: @grid-column-padding;
  padding-right: @grid-column-padding;
  // Proper box-model (padding doesn't add to width)
  .box-sizing(border-box);
}

.make-column-offset(@columns) {
  @media (min-width: @grid-float-breakpoint) {
    margin-left: percentage(@columns / @grid-columns);
  }
}
{% endhighlight %}

  <h3 id="grid-example">Example usage</h3>
  <p>Using these mixins to generate columns is easy. <strong>Here's the HTML and CSS of an example implementation.</strong></p>
{% highlight html linenos %}
<div class="wrapper">
  <div class="content-main">
    ...
  </div>
  <div class="content-sidebar">
    ...
  </div>
</div>
{% endhighlight %}
{% highlight css linenos %}
.wrapper {
  .make-row();
}
.content-main {
  .make-column(8);
}
.content-sidebar {
  .make-column(3);
  .make-column-offset(1);
}
{% endhighlight %}
  <p><strong>Need another example?</strong> Our table of contents at the top of the page uses a custom grid as well. In the source docs.less file you'll find its super lightweight implementation:</p>
{% highlight css linenos %}
.row { .make-row(); }
.grid-4 { .make-column(4); }
{% endhighlight %}
  <p><strong>That's it.</strong> No need for additional classes as we just don't need them in this simple of a site.</p>
</section>



<section id="vendor-mixins">
  <h2 class="header-divider">Vendor mixins</h2>
  <p class="lead">Write more efficient CSS by writing single-line mixins instead of multiple lines of prefixed properties.</p>

  <h3 id="mixins-box-sizing">Box-sizing</h3>
  <p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
{% highlight css linenos %}
.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}
{% endhighlight %}

  <h3 id="mixins-rounded-corners">Rounded corners</h3>
  <p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
{% highlight css linenos %}
.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}
{% endhighlight %}

  <h3 id="mixins-box-shadow">Box (Drop) shadows</h3>
  <p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the mixin to pick up the required <code>-webkit</code> prefix.</p>
  <p>Be sure to use RGBA colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
{% highlight css linenos %}
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}
{% endhighlight %}

  <h3 id="mixins-transitions">Transitions</h3>
  <p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
{% highlight css linenos %}
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
     -moz-transition-delay: @transition-delay;
       -o-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
     -moz-transition-duration: @transition-duration;
       -o-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
{% endhighlight %}

  <h3 id="mixins-transformations">Transformations</h3>
  <p>Rotate, scale, translate (move), or skew any object.</p>
{% highlight css linenos %}
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y);
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
  -webkit-backface-visibility: hidden;
}
.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
     -moz-transform: translate3d(@x, @y, @z);
       -o-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}
{% endhighlight %}

  <h3 id="mixins-opacity">Opacity</h3>
  <p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
{% highlight css linenos %}
.opacity(@opacity) {
  opacity: @opacity;
  @opacity-ie: @opacity * 100;
  filter: ~"alpha(opacity=@{opacity-ie})"; // IE8
}
{% endhighlight %}

  <h3 id="mixins-placeholder">Placeholder text</h3>
  <p>Provide context for form controls within each field.</p>
{% highlight css linenos %}
.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder            { color: @color; } // Firefox 4-18
  &::-moz-placeholder           { color: @color; } // Firefox 19+
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}
{% endhighlight %}

  <h3 id="mixins-columns">Columns</h3>
  <p>Generate columns via CSS within a single element.</p>
{% highlight css linenos %}
.content-columns(@width, @count, @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}
{% endhighlight %}

  <h3 id="mixins-gradients">Gradients</h3>
  <p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
{% highlight css linenos %}
#gradient > .vertical(#333, #000);
#gradient > .horizontal(#333, #000);
#gradient > .radial(#333, #000);
{% endhighlight %}
  <p>You can also specify the angle of a standard two-color, linear gradient:</p>
{% highlight css linenos %}
#gradient > .directional(#333, #000, 45deg);
{% endhighlight %}
  <p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
{% highlight css linenos %}
#gradient > .striped(#333, #000, 45deg);
{% endhighlight %}
  <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
{% highlight css linenos %}
#gradient > .vertical-three-colors(#777, #333, .25, #000);
#gradient > .horizontal-three-colors(#777, #333, .25, #000);
{% endhighlight %}
  <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
</section>



<section id="utility-mixins">
  <h2 class="header-divider">Utility mixins</h2>
  <p class="lead">Similar to vendor mixins, utility mixins provide useful and often repeated snippets of CSS in single lines.</p>

  <h3 id="mixins-clearfix">Clearfix</h3>
  <p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
{% highlight css linenos %}
// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}
{% endhighlight %}

  <h3 id="mixins-centering">Horizontal centering</h3>
  <p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
{% highlight css linenos %}
// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}
{% endhighlight %}

  <h3 id="mixins-sizing">Sizing helpers</h3>
  <p>Specify the dimensions of an object more easily.</p>
{% highlight css linenos %}
// Mixins
.size(@width, @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size, @size);
}

// Usage
.image { .size(400px, 300px); }
.avatar { .square(48px); }
{% endhighlight %}

  <h3 id="mixins-resizable">Resizable textareas</h3>
  <p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
{% highlight css linenos %}
.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}
{% endhighlight %}

  <h3 id="mixins-truncating">Truncating text</h3>
  <p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
{% highlight css linenos %}
// Mixin
.text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-truncate();
}
{% endhighlight %}

  <h3 id="mixins-retina-images">Retina images</h3>
  <p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
{% highlight css linenos %}
// Mixin
.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
{% endhighlight %}
</section>

</div>