Fixed/Fluid Box

For a site with a more fixed layout, you can use the .fixed-box class. Below 768px, the fixed-box will remain at 100% width. The breakpoints above 768px are 992px and 1200px. To have a full-screen layout, use the .fluid-box class.

The class you decide to use (whether it be fixed or fluid) will be the wrapping "container" for the rest of your grid, as is shown below in the example.

<div class="fluid-box">
	<div class="row">
		...
	</div>
</div>

Column Sizes

There are four different column sizes. Large, Medium, Small, and Extra Small. Barebones Grid is based off of a standard 12 column layout. To use the columns, simply give the class .{type}-{num} to the object. In the case of a medium sized column, if you wish the object to have half the container size, give the class .md-6.

Below is a table of the available types, their screen sizes, and class prefixes.

Extra Small Small Medium Large
Screen Sizes Less than 768px 768px to 991px 992px to 1199px 1200px and above
Class Prefixes .xs- .sm- .md- .lg-

Example

Here is an example of how to use the grid system, what it looks like, and how it behaves with resizing. (feel free to resize your screen larger and smaller to see) This is using the medium column class.

.md-1
.md-1
.md-1
.md-1
.md-1
.md-1
.md-1
.md-1
.md-1
.md-1
.md-1
.md-1
.md-8
.md-2
.md-2
.md-6
.md-6
.md-8 .md-offset-2

Below is the code for the example above.

<div class="row">
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
	<div class="md-1">.md-1</div>
</div>
<div class="row">
	<div class="md-8">.md-8</div>
	<div class="md-2">.md-2</div>
	<div class="md-2">.md-2</div>
</div>
<div class="row">
	<div class="md-6">.md-6</div>
	<div class="md-6">.md-6</div>
</div>
<div class="row">
	<div class="md-8 md-offset-2">.md-8 .md-offset-2</div>
</div>

Helper Classes

There are several helper classes provided for your convenience which help with bootstrapping your application.

Clear

The class .clear will allow you to easily clear a float.

Floating Elements

There are two classes used for floating elements left and right. These are .float-left and .float-right.