Star

Grid

Barebones includes a responsive and semantic grid system. It allows you to target given components – for example, a sidebar – without littering your HTML with helper classes and unnecessary DIVs.

Grid Settings

First, you need to specify global grid settings in your settings file. If nothing is specified, default values are applied.

Setting Default Description
columns 12 Specifies the number of columns in your grid.
breakpoint 720px The point at which columns should expand to 100%. This only gets used for the generic helper classes.
gutter 1/4 Gutters are created using margins, expressed as a fraction of a column width (e.g. 1/8, 1/4 or 1/2).

Containers

Containers are used to center and restrict content width on the page. They are fluid, and the width is limited using the max-width property. They also clear floated columns.

Create a new container using the container($max-width) function.

.container {
	@include container(600px);
}
.container {
	zoom: 1;
	margin: 0 auto;
	max-width: 600px;
}

.container:before, .container:after {
	content: "";
	display: table;
}

.container:after {
	clear: both;
}

Columns

Columns can be created using either the span($columns, $position, $gutter) mixin, or the span($columns) function. The former does more work for you and allows you to specify various options, whilst the latter simply returns the element width based on the given number of columns.

Span Mixin

The CSS generated is viewport-agnostic. To create different widths at different breakpoints, combine this with the media query mixins.

Options
$columns Number of columns the component spans, of the total number defined in your settings file (by default this is 12).
$position (optional) If the column is the last one, pass in the 'last' keyword to remove the margin-right property and float the column to the right.
$gutter (optional) Change the default gutter by passing in a size (e.g. 1/2), or remove it altogether.
$offset (optional) Offset the container by a given number of columns.
.sidebar {
	@include if-above(device-medium) {
		@include span(4); // Creates a column that spans 4 colums above this size.
	}
}

.content {
	@include if-above(device-medium) {
		@include span(8, $position: last); // Creates a column that spans 8 colums above this size.
	}
}
.sidebar {
	width: 30.43478%;
	margin-right: 4.34783%;
	float: left;
}
.content {
	width: 60.21739%;
	margin-right: 0;
	float: right;
}

Span Function

The span($columns) only returns a width value for the container - nothing else.

.example-span {
	width: span(4);
}
.example-span {
	width: 56.1%;
}

Offset

You can offset a container by a given number of columns by passing in an argument for the $offset value.

.sidebar {
	@include span(8, $offset: 4);
}

Galleries

Galleries are made up of elements that repeat across multiple lines. It works in a similar way to the span mixin, with the only difference being that the right margin is removed from the last item of the row, based on the number of items per row.

If you want to specify different grid sizes at different breakpoints, the mixin needs to be called within a media query context to avoid nth-item collisions.

.photo-gallery {
	@include clearfix; // Clears the floats.
}

.photo-gallery-item {
	@include gallery(3);
	// Creates a gallery with each item taking up 3 columns of your grid
	// (on a 12 grid-layout, this would be 4 items). This will be the case at every screen size.
}

.photo-gallery-item {
	@include if-between(device-x-small, device-medium) {
		@include gallery(6);
	}
	@include if-above(device-medium) {
		@include gallery(4);
	}
	// Creates a gallery with each item taking up 3 columns of your grid
	// (on a 12 grid-layout, this would be 4 items). This will be the case at every screen size.
}
.photo-gallery {
	@include clearfix; // Clears the floats.
}

.photo-gallery-item {
	width: 22.85714%;
	margin-right: 2.85714%;
	float: left;
}

.photo-gallery-item(:nth-child: 3n + 1) {
	width: 22.85714%;
	margin-right: 0;
	float: right;
}