Basic Grid

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.

Usage

Use either the post processed distribution version as is, process your own with your variables, or drop the source into a postcss-cssnext workflow.

Markup

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.

<div class="row">
	<div class="col-12"></div>
</div>

Padding

Default padding is written in rem units, making the assumption that the base font size on the document is 16px.

Breakpoints

This grid currently only has two breakpoints. Padding and max width is variable at these breakpoints

Mobile First Screen Resolution < 700px

/*Gutters*/
--gridGutterSizeMobile: 0.9375rem; /*15px gutters*/

Normal Screen Resolution >= 700px

/*Gutters*/
--gridGutterSizeNormal: 1.875rem; /*30px gutters*/

/*Max container width*/
--gridMaxWidthNormal: 1140px;

/*Media Query*/
@custom-media --view-grid ( width >= 700px );

Large Screen Resolution >= 1680px

/*Gutters*/
--gridGutterSizeWide: 2.5rem; /*40px gutters*/

/*Max container width*/
--gridMaxWidthWide: 1400px;

/*Media Query*/
@custom-media --view-grid-wide ( width > 1680px );

Custom Selectors

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*/
@custom-selector :--row .row;

/*Column Classes*/
@custom-selector :--column-0 .col-0, .column-0;
@custom-selector :--column-1 .col-1, .column-1;
@custom-selector :--column-2 .col-2, .column-2;
@custom-selector :--column-3 .col-3, .column-3;
@custom-selector :--column-4 .col-4, .column-4;
@custom-selector :--column-5 .col-5, .column-5;
@custom-selector :--column-6 .col-6, .column-6;
@custom-selector :--column-7 .col-7, .column-7;
@custom-selector :--column-8 .col-8, .column-8;
@custom-selector :--column-9 .col-9, .column-9;
@custom-selector :--column-10 .col-10, .column-10;
@custom-selector :--column-11 .col-11, .column-11;
@custom-selector :--column-12 .col-12, .column-12;

/*Common and Special Classes*/
@custom-selector :--columnClass [class*="col"], [class*="column"];
@custom-selector :--columnPull [class*="col"].pull, [class*="column"].pull;
@custom-selector :--columnCentered [class*="col"].centered, [class*="column"].centered;
@custom-selector :--columnInline [class*="col"].inline, [class*="column"].inline;

Nesting

Nested rows are simply decendents of their parent column, but don't need to be direct children.

<div class="row">
	<div class="col-9">
		<p>Some content or markup</p>
		<section ="some-section">
			<div class="row">
				<div class="col-6"></div>
				<div class="col-6"></div>
			</div>
		</section>
	</div>
	<div class="col-3"></div>
</div>

Centering

Centered columns must be the only column within that parent row.

<div class="row">
	<div class="col-8 centered">
	</div>
</div>

Pulling

Add .pull to float a column right, but be first when stacked in smaller viewports.

<div class="row">
	<div class="col-8 pull"></div>
	<div class="col-2"></div>
</div>

Special Columns

col-0

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.

<div class="row">
	<div class="col-0"></div>
</div>

inline

This columns display property is set to inline-block. It's useful for things like tiles, icons etc.

<div class="row">
	<div class="col-0 inline"></div>
</div>