The basic grid uses percentage widths, with classes pre set for: 5%, 10%, 20%, 25%, 30%, 40%, 50%, 60%, 70%, 75%, 80%, 90% and 100%, as well as quarter, half, three-quarters, full, one-third and two-thirds.

However with the use of the mixin you can use any percentage width you like. Columns that exceed a total width of 100% will just flow onto the next line.

Grid classes are now turned off by default to encourage you to use flexbox and css grids.

Grid columns can also be reversed by using the `.grid-col-rev` class to make them float right.

Offset columns also use percentages and can be applied to both standard and reverse columns.

Grid columns can have different sizes for different breakpoints, and all grids gutters are responsive and adjust size depending on break points.

You can easily nest grids by including a new `.grid-row` and `.grid-col` set inside any other grid column.

To work cleanly grids do need to be placed inside a container. Containers are percentage widths and can be changed at any breakpoint. Fluid containers are always 100% of the screens width.

All type by default, and anything that uses ems & rems for sizes will be effected by the Fluid Type styles. This means that as the screen size increases, so does the font sizes.

Type blocks may also be wrapped with a `.reading-length` class to keep the line length from exceeding an acceptable length—roughly 30–40em's.

Text alignment can be changed at different break points. This text is left aligned as size XS, centre aligned and size MD, and right aligned at size XL.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Tables should be used for tabular data, so by default all tables will have basic styles that make them function better.

All tables are responsive and will collapse down into a list-like style on small screen sizes. To include a header for each cell add a title attribute to the td element.