12 column grid using flex box & scss
Super simple, straight forward 12 column grid implementation. Check out the demo.
- Responsive, mobile first approach
- Define specific colum size or use a flex column (a column that grows to fill space)
- Define offset to push column a specific number of columns.
Just @import the _flexgrid.scss file as a partial or rename (_flexgrid.scss -> flexgrid.scss) if you'd prefer it to be compiled independently.
Use the generated classes to build your layout. I prefer to keep my markup clean and @extend the grid classes onto my elements so I don't have to muck around in html for style edits but whatever floats your boat.
.row: Flex box container, use this to wrap columns..col-(namespace): This creates a column that will grow/shrink depending on available space in the defined namespace..col-(namespace)-(number): This creates a column that span the specific number of columns in the defined namespace. Valid numbers are 1-12..off-(namespace)-(number): This will offset a column by a specific number of columns in the defined namespace. Valid numbers are 1-11.
Valid namespaces are xs, sm, md, lg. The xs namespace is default and uses no media queries.
Plan on doing a proper demo. Stay tuned.Demo hereI want to abstract out the namespaces into proper variables so that people can easily create whatever breakpoints they might need.Namespace overriding possible now, huzzah!- Dunno, considering ideas.
- Heavy use of sometimes not often used Sass @ directives, be sure and consult the Sass docs if something looks foreign.
- This is for personal use, if you like and want to use it, great! But I want to keep it simple so if you have an idea feel free to add an issue but don't be upset if I don't accept a pull request. ❤️ (That's what forks are for!)
- This doesn't account for any browser prefixes, be sure and use Autoprefixer.