hamlim / future-grid

A grid system for the future (and the past)

Future-Grid

Future-Grid is (yet) a(nother) css grid system. The difference between this system and those found in Bootstrap or Foundation or [your favorite css framework here] is that Future Grid is built to stand the test of time.

Future-Grid is really three seperate grid systems all in one css file. The reason there are three separate grid systems is for graceful degradation, so for browsers IE9* - Edge 12 it relies on inline block and font-size: 0 hacks. For browsers Edge 12 and up, as well as other evergreen browsers it uses Flexbox, and finally for super evergreen browsers it uses the CSS Grid.

That probably makes it the first css grid framework to use css grid.

What does the HTML look like?

First off a small warning, because the gutter variant of the grid uses padding for spacing out the columns, you might need to wrap your markup that you use in each column with a wrapping element that you use the Grid-item and u-sizeNof12 classes on.

<div class="Grid Grid--withGutter">
  <div class="Grid-item u-size3of12">
    [ ... Sidebar markup ]
  </div>
  <div class="Grid-item u-size9of12">
    [ ... main content markup ]
  </div>
</div>

Frequently Asked Questions? (I guess)

Whats with the asterisk on IE9?

There are two lines of css that break IE8 compatibility by using rem. You can however search and replace the rem with the root font-size (in px! not %/em) of your website and you will be able to use the Future-Grid in IE8.

Unfortunately because IE7 doesn't support inline-block, but I really hope you don't have to support IE7 anymore.

Why isn't flexbox used on IE11?

IE11 has a really bad track record with the flexbox spec. It has implemented an older version of the spec that has a ton of bugs currently.

The hack to get around using flexbox on these browsers that support it is to wrap it in an @supports block. Because IE11 doesn't support this in css it ignores the flexbox styles and uses the fallback.

Why should I be adopting CSS Grid?

Well besides the fact that the major browser vendors by the middle of this year will all support Grid, it took most CSS developers many years to start using Flexbox, and I personally would like to see many of us adopt these new standards.

I thought CSS Grid was supposed to be really custom!

It is! A grid framework is really only the barebones. If you feel the need to build full layouts and customize them then remove this css and start writing your own grid system using CSS Grid. I fully believe that with CSS Grid we will no longer need these kind of frameworks.

How can I use this in my website/project?

Easy! Just grab the css, modify as needed and add it to your website. The only thing I ask is that you leave a css comment attributing me and this repo. Nothing public facing, just within the source code itself.

How do I customize this?

Well you can grab the raw source and manually edit it to your hearts content, or you can grab the scss file and modify it, or grab the postcss file and modify it from there.

Found a bug?

File an Issue!

Todos / Planned Updates:

• Postcss source file
• scss source file
• minified css file
• Css modules definition of the grid system (for importing into react/whatever)
• Github Pages to explain the grid features
• React Grid and Column modues

future-grid's Issues

[Feature] - Enable support for CSS Modules

Many CSS Modules systems do not allow -'s (dashes) in classnames, this feature request is to add a variant of the grid.css file that will support CSS Modules and their build systems.