Getting started
CSS
Components
JavaScript
SCSS

Grid system

Hubble uses a powerful 12 column grid system for building layouts to fit any screen or size.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Hubble grid system works:

  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns.
  • Predefined grid classes like .row, .col-4 and .gutter-xs are available for quickly making grid layouts.
  • Gutter classes can be used to create gaps between column content via padding.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-4.
  • You can make column widths device-screen specific. e.g. .col-12 .col-md-3 will be full width at small screens and 25% on medium screens.
  • Look to the examples for applying these principles to your code.

Columns

Below is a list of the classes made available when implementing layouts using columns.

Class Options Example Behavior
.row n/a .row Wraps around floated children, clearfixes and spans full width.
.col n/a .col Floats the column left
.col-* 1-12 .col-6 Uses available space defined by column number.
.col-*-* xs,sm,md,lg,xl and
1-12		 col-sm-3 Uses available space defined by suffix(1) breakpoint and suffix(2) column number. Will be used for any larger breakpoints unless overridden specifically.
.col-12
.col-6
.col-6

Gutters

Gutters apply a padding size on the sides of columns. Below is a list of the classes made available when implementing layouts using gutters.

Class Options Example Behavior
.gutter-* xs,sm,md,lg,xl .gutter-md Applies a padding gutter to both sides of the column.
.gutter-* l, r .gutter-r Applies a left or right gutter only.
.gutter-*-* xs,sm,md,lg,xl and
xs,sm,md,lg,xl		 .gutter-xs-sm suffix(1) defines the breakpoint, suffix(2) defines the gutter size.
.gutter-*-* xs,sm,md,lg,xl and
l, r		 .gutter-xs-l suffix(1) defines the breakpoint, suffix(2) defines the gutter side (left or right).
.col-12 .gutter-sm
.col-6 .gutter-sm .gutter-r
.col-6 .gutter-sm .gutter-l

Roofs & Floors

Roofs apply a padding-top while floors and a padding-bottom. Below is a list of the classes made available when implementing layouts using roofs and floors.

Class Options Example Behavior
.floor-* xs,sm,md,lg,xl .floor-md Applies a padding to the bottom of the column or element.
.floor-*-* xs,sm,md,lg,xl and
xs,sm,md,lg,xl		 .gutter-xs-sm Suffix(1) defines the breakpoint. Suffix(2) defines the floor size.
.roof-* xs,sm,md,lg,xl .roof-md Applies a padding to the top of the column.
.*-*-roof xs,sm,md,lg,xl and
xs,sm,md,lg,xl		 .gutter-xs-sm Suffix(1) defines the breakpoint, Suffix(2) defines the roof size.
.col-6
.col-6
.col-6
.col-6

Push & Pull

You can use the .push-r and .push-l classes to push columns left or right.

Class Options Example Behavior
.col-*-push-* 1-12 and
r,l		 .col-5-push-r Offsets the margin of a column by the specified column number in the direction specified.
.col-*-*-push-* xs,sm,md,lg,xl and
1-12		 .col-xs-5-push-r Pushes offsets the margin of a column by the specified column number at the specified breakpoint and above.
.col-4 .col-4-push-r
.col-4 .col-4-push-l

Responsive breakpoints

Because Hubble is mobile first, all screen-size specific grid classes will be applied to the breakpoint and above. For example a .col-sm-12 class will apply to smaller screen sizes and above, but not to extra small.

Class Options Example Behavior
.row-* xs,sm,md,lg,xl .row-md Produces a row at the given breakpoint and above.
.col-*-* xs,sm,md,lg,xl and
1-12		 .col-12 col-sm-3 Uses available space defined by suffix(1) breakpoint and suffix(2) column number. Will be used for any larger breakpoints unless overridden specifically.
.col-12
.col-12 col-sm-6
.col-12 col-sm-6