Grid system

[tristen]

We're going to build our grid system using Flexbox. Mostly because it happily does what you'd expect: containers of variable heights flow evenly. I'm just going to get started using it for our column rules!

The goal is to create something like this:

In a clean and efficient way using base. Establish a grid, be able to break out of the grid and still line up evenly against columns in the container.

Notes

Naming cols, col-2

A parent container cols defines the Flexbox properties how immediate child columns should operate. each column container has col- followed by the number it takes up.

Gutters cols-gut-10

Gutters provide proper spacing between the content within containers. If a gutter is defined it should create the spacing in-between each column and still be flush to the left and right of the parent container. Frameworks typically use negative margins to get around this. I'll look into other possibilities but will probably use a margin right with nth-child(Nn+N) selector to zero out margins on last elements.

Limiters

limiter name should be explicit by pixel width (i.e limiter-1500 where width is 1500px). There should be a handful of limiter widths we can use.

Breakpoints

Breakpoints supported are: mobile, tablet, & wide. Adapting to the number of columns you should see for each of these breakpoints should be explicit and to the choice of the content creator by a class naming convention like col-mobile-4.

[davidtheclark]

@tristen What are the .col-mar- classes for? Are those to offset columns (e.g. I only want a 1/3-width column in the last third of the row)? If so, what do we think about just asking people to use empty divs for such spacers? Are you opposed to that?

[tristen]

Ahhh I'm not really into the idea of using empty containers to represent spacing. Not only does it look awkward in HTML it's strange If you're doing something like document.createElement('div') to insert nodes.

Instead of .col-mar- what if we named it .col-offset-?

[davidtheclark]

Instead of .col-mar- what if we named it .col-offset-?

👍

[tristen]

This is in a good place. Closing out!