Float Grid

We can pull in the default layout float grid (taken from foundation) by inserting the scss in the style.scss file @import “grid/foundation/foundation-grid”;

Documentation for this can be found on https://get.foundation/sites/docs/grid.html

Below are some of the basics and things to note in our implementation

.columns divs are contained in a .row div

Green columns cell, pink para: .columns .small-12 .large-6 .end

Green columns cell, pink para: .columns .small-12 .large-6 .end


to change a row max width (from 1440) you can use the following additional classes, these act like .alignwide, and .alignfull max widths

  • .row-normal
  • .row-wide
  • .row-full

row has class .row and .row-full

adding .expanded to the .row div will also do this

row has class .row and .row-wide

row has class .row and .row-normal

if you want a 1 column row use .row and .column in just one div

Nested Grids

8
8 Nested
8 Nested Again
4
4
4

Offsets

1
11
1
10, offset 1
1
9, offset 2
1
8, offset 3

Gutters

row has .row .medium-uncollapse .large-collapse

collapse is equal to no gutter

Default gutter are responsive 10px padding left and right on small, this is equal to the scss variable $padding-small, and 15px for Medium up which is equal to the variable $padding

default responsive gutter padding