-
Notifications
You must be signed in to change notification settings - Fork 27
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Grid system #11
Comments
@tristen What are the |
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 Instead of |
👍 |
This is in a good place. Closing out! |
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 hascol-
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 likecol-mobile-4
.The text was updated successfully, but these errors were encountered: