Blueplate Component

Getting Started

You can either download a copy of the source files or install Blueplate via Bower.

bower install blueplate

SASS Implementation

Start by importing the necessary file into your own SASS file and include the required mixins.

SASS

@import "blueplate/sass/import";

.example {
   @include row();
}
.left, .middle, .right {
   @include span(12); // 100% width
}
@include breakpoint(large) {
   .left {
      @include span-new(6); // 50% width
   }
   .middle {
      @include span-new(4); // 33.33% width
   }
   .right {
      @include span-new(2); // 16.66% width
   }
}

HTML

<div class="example">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

For more information on the available mixins read the detailed documentation.

CSS Implementation

Start by including the necessary files.

<head>
    <link href="blueplate/css/blueplate.css" rel="stylesheet" type="text/css">
</head>

Now class your HTML to manage your layout. For example:

<div class="row">
    <div class="span-2">Span 2</div>
    <div class="span-2">Span 2</div>
    <div class="span-2">Span 2</div>
    <div class="span-2">Span 2</div>
    <div class="span-2">Span 2</div>
    <div class="span-2">Span 2</div>
</div>

For more information on available classes read the detailed documentation.

Detailed Documentation

For a more detailed look into the available options, you can read the documentation at https://github.com/chrishumboldt/Blueplate