This plugin has been registered on Bower and will install the latest stable release. You can do so by running the following command.
bower install blueplate
Using Blueplate is simple and can be done in two ways. You can either include the SASS file in your project and compile accordingly or you can include the CSS file within your head tag. Doing the latter wont allow you to edit the options but the plugin is comprehensive and includes everything you need to get going.
<head>
<link href="css/blueplate.css" rel="stylesheet" type="text/css">
</head>
Once included you will have the ability to organize elements vertically and horizontally that will "respond" based on set media queries. It works on a basic row, span grid system and is completely editable. For the example below we use the default grid column limit of 12 and the classing method to achieve the layout.
<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>
From the example above you can see the span blocks occupy 2 columns widths of the full 12 column row resulting in 6 blocks all together.
In both implementations you have 3 main view types defined through preset media queries, large, fluid and small view. Large view is used for desktop sized screens, fluid for your more tablet sized and small for mobile sized screens.
| Name | Media Query | Explanation |
|---|---|---|
| Large View | @media screen and (min-width: 43.813em) | Anything above and including a 43.813em (701px base 16px) count will constitute a large view. Fluid view is included for a portion of the size as shown below. |
| Fluid View | @media screen and (max-width: $limit-width) | This view kicks in when the screen size is anything below the default $limit-width of 75em (1200px base 16px). In this scenario all limit elements will stop having a maximum width and snap to a 100% width instead. |
| Small View | @media screen and (max-width: 43.750em) | The smallest common denominator in terms of view sizes, used almost exclusively for mobile devices. In this case all span classes elements will stack vertically unless you class it with a small-span. |
The simplest and easiest approach is to use a series of predefined Blueplate classes to organise your layout. By classing elements you will be able to achieve a responsive layout pertaining to the above view types. All large view references below are inclusive of fluid view.
| Class | View Used | Explanation |
|---|---|---|
| .row | Large, Small | A row is the basic building block of Blueplate and needs to wrap any span elements. A row element will default to a 100% width of its container. |
| .span-[x] | Large | The span class sets the amount of columns an element will occupy ranging from 1 to the $column-limit (default 12). For example an element with the class span-3 will occupy 3 column widths of the default 12 equating to a width of 25%. |
| .span-large-[x] | Large | Aligns the element in large view. For example an element with class span-3 large-span-6 will occupy 50% of the row in large and fluid view while occupying 25% of the row in small view. |
| .span-small-[x] | Small | Aligns the element in small view. For example an element with class span-3 small-span-6 will occupy 25% of the row in large and fluid view while occupying 50% of the row in small view. |
| .offset-[x] | Large | If you offset an element then you push it out [x] amount of columns from the left. |
| .offset-large-[x] | Large | Will push an element by [x] amount of columns from the left in large view. |
| .offset-small-[x] | Small | Will push an element by [x] amount of columns from the left in small view. |
| .offset-r-[x] | Large | This class will push anything to the right of the element by [x] amount of columns |
| .offset-large-r-[x] | Large | Will push anything to the right of the element by [x] amount of columns in large view. |
| .offset-small-r-[x] | Small | Will push anything to the right of the element by [x] amount of columns in small view. |
| .hide | Large, Small | Hide an element. |
| .hide-large | Large | Hide an element in large view only. |
| .hide-small | Small | Hide an element in small view only. |
| .show | Large, Small | Show an element. |
| .show-large | Large | Show an element in large view only. |
| .show-small | Small | Show an element in small view only. |
| .limit | Large, Small | Assigns a maximum width to an element based on the $limit-width variable (default 1100px base 16px) and centers it. Once the screen size is below the limit the element will become fluid and adjust its width to a 100%. Used mainly to contain row elements. |
The following layout shows progress from a small view to a large view or a mobile first approach. In small view the span class is used to stack the middle and right blocks next to each other equally below the left block, while in large view we spread the blocks out horizontally.
HTML
<div class="class-example row">
<div class="span-12 span-large-2">Left</div>
<div class="span-6 span-large-8">Middle</div>
<div class="span-6 span-large-2">Right</div>
</div>
RESULT (Screen Width: px)
The ideal way for Blueplate to be used is through mixin implementation. Include the sass/blueplate.scss file via the @import function as per the SASS documentation and note that you will need a preprocessor.
| Variable | Default Value | Explanation |
|---|---|---|
| $column-limit | 12 | Sets the amount of columns (or spans) used within a row. |
| $spacing-limit | 10 | Sets the amount of padding and margin classes you want by pixel starting at 1. |
| $limit-width | 68.750em | Sets the limit width for the limit mixin, an optional fluid media query and a containing limit class. Equates to 1100px base 16px. |
A series of mixins are used in order to make any element responsive. Using these mixins within different media queries will allow your site to respond to the different conditions. Use the @include function to execute mixins within your file.
| Mixin | Explanation |
|---|---|
| row() | Turns an element into a row which is the basic building block of Blueplate and is needed to wrap any span elements. A row element will default to a 100% width of its container. |
| span($x) | Turns an element into a span which can occupy $x amount of columns within the $column-limit. For example @include span(6) will occupy 6 columns within the default 12 which equates to 50% of a containing row. |
| span-new($x) | Change the span to occupy $x amount of columns within the $column-limit. Apply to already spanned elements. |
| offset($x) | If you offset an element then you push it out $x amount of columns from the left (applied to span elements). |
| offset-r($x) | This mixin will push anything to the right of the element by $x amount of columns (applied to span elements). |
| respond-to($x, $y) | A mixin to generate media queries based on the preset Webplate view types or a custom value. The options for $x are large, fluid, small or an em/px value example respond-to(50em). Option $y can be min or max to set the min/max-width of the query. |
| show() | Show an element. |
| hide() | Hide an element. |
| limit() | Assigns a maximum width to an element based on the $limit-width variable and centers it. Once the screen size is below the limit the element will become fluid and adjust its width to a 100%. Used mainly to contain row elements. |
Below you will find a layout that changes according to custom set media queries. Resize your window to see it in action.
HTML
<div class="mixin-example">
<div class="left-col">Left</div>
<div class="middle-col">Middle</div>
<div class="right-col">Right</div>
</div>
SASS
.mixin-example {
@include row();
// Columns - mobile first
.left-col, .right-col, .middle-col {
@include span(12);
}
// Over 700px
@include respond-to(large) {
.left-col {
@include span-new(6);
}
.middle-col, .right-col {
@include span-new(3);
}
}
// Over 800px
@include respond-to(50em) {
.left-col {
@include span-new(12);
}
.middle-col {
@include span-new(9);
}
.right-col {
@include span-new(3);
}
}
// Over 900px
@include respond-to(56.250em) {
.left-col, .right-col {
@include span-new(2);
}
.middle-col {
@include span-new(8);
}
}
}
RESULT (Screen Width: px)
Blueplate includes a lightweight mixin library with an array of useful mixins ranging from layout to general styling. In order to use these mixins a simple import is required in your own SASS file as shown below.
@import "sass/blueplate.scss";
For a full list of the mixins available check out the Webplate documentation on SASS mixins as this contains all the references that you need.
Mixin DocumentationIncluded are some extra classes that allow for quick changes to floats, text, spacing, backgrounds and more. For a full list of the classes available check out the Webplate documentation on extra classes as this contains all the references that you need.
Extra Classes Documentation