Should help serve as a starting point for grid based layouts. It requires the elements be using box-sizing. It does not assume box sizing is available on all elements. This is a mobile first design, so the floats don't kick in unless there is a min-width reached on the viewport.
*Remember this isn't Bootstrap! It's just a basic grid that helps you maintain consistent gutters and max content widths, don't expect a bunch a mobile column options. If you need that you should probably already be using an inline-block or flex-box layout instead.
Use either the post processed distribution version as is, process your own with your variables, or drop the source into a postcss-cssnext workflow.
Very simple container markup, with just rows and columns (no container). Max-width is set on the rows. We should be able to do this since we are working on a flexible grid, not a grid with static widths at specific breakpoints.
Default padding is written in rem units, making the assumption that the base font size on the document is 16px.
This grid currently only has two breakpoints. Padding and max width is variable at these breakpoints
Mobile First Screen Resolution < 700px
Normal Screen Resolution >= 700px
/*Gutters*/--/*30px gutters*//*Max container width*/--/*Media Query*/@);
Large Screen Resolution >= 1680px
/*Gutters*/--/*40px gutters*//*Max container width*/--/*Media Query*/@);
The default classes are .row and .col, .column. You can change these custom selectors to your liking.
cssnext aims to stick with future css syntax, thus the lack of automation on this. Convert it to a SASS style sheet if you need that much flexibility.
/*Row class*/@/*Column Classes*/@@@@@@@@@@@@@/*Common and Special Classes*/@@@@
Nested rows are simply decendents of their parent column, but don't need to be direct children.
Some content or markup
Centered columns must be the only column within that parent row.
Add .pull to float a column right, but be first when stacked in smaller viewports.
This column has width auto, margin auto and float none. This is useful when you need to maintain padding on an element, but wish to set a max width on it that doesn't scale down until the viewport is below your max width.
This columns display property is set to inline-block. It's useful for things like tiles, icons etc.