Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hamlim/future-grid

A grid system for the future (and the past)
https://github.com/hamlim/future-grid

css css-grid css-grid-layout css-grids cssgrid flexbox framework grid ie8

Last synced: about 1 month ago
JSON representation

A grid system for the future (and the past)

Awesome Lists containing this project

README 

        
# 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.



```HTML



  


    [ ... Sidebar markup ]

  


  


    [ ... main content markup ]

  




```



## 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:



- [x] Postcss source file

- [x] scss source file

- [x] minified css file

- [ ] Css modules definition of the grid system (for importing into react/whatever)

- [x] Github Pages to explain the grid features

- [x] React Grid and Column modues