Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Michael Trilford
Michael Trilford
7,232 Points

Flex layout Grid w/ Float fallback for Legacy browsers - Work in progress

http://codepen.io/boostnewmedia/pen/kvtoF

I have combined my Flex w/ Float fallback to the 960º grid. There is more I can say about the grid aspect, but you can read the comments in my code if you are interested.

It is work in progress, as I will be adding media queries to serve a mobile layout.

James suggested to use Bourbon, so you can update the code accordingly. I tried to turn on bourbon in Codepen, didn't seem to work.

I might have done some weird things to get the Columns to float when Modernizr is turned off, but I think it is the only way I can do it at the moment. I dislike adding padding around every column item, as quite often I want an image or something to be flush left/right with the viewport/browser.

Sweet! I will be making this ten times better ( Slowly. )

1 Answer

Michael Trilford
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Bump

I have been updating this slowly. I have been refactoring the Sass code, and I think it is already looking a bit better. I have a few different layout options happening near the bottom.

Just need to do some x-browser tweaks tomorrow afternoon , but I can say it will work pretty great across all major browsers, as it has a pretty decent graceful degradation.

  1. Flexbox browsers will be served all the goodness!

  2. No-flexbox will be presented a floated layout, which has the already common theme of boxes not being equal height ( Unless you have that a JS plugin. )

  3. ie8 & below will be served a stacked layout ( Mobile layout ), which in my view is enough for these users. They are essentially already in a broken world.

Can't wait to start building a site with it, there will be tweaks once I use this in the real world, but that is always the case with anything.

I downloaded the zip from Codepen, and the .css file is 16kb. Not sure if that is very large? Thoughts? I have to say Codepen is such a handy tool, as it compiles a sweet .css file ready to use!

To see the Flex vs Float, just open up the JS drop down in Codepen and turn off modernizr.