ptb/flexgrid

Next-generation CSS grid framework based on flexbox. Provides the same responsive 12 column fluid layout as Bootstrap 3 to most browsers. Even supports IE 6! Simple, fast, and easy.

ptb/flexgrid is a next-generation web page layout framework based on flexbox: the CSS Flexible Box Layout Module. It uses the same responsive 12 column grid and CSS class names as Bootstrap.

A customized version of Modernizr is used to detect support for flexbox. The flexbox layout is supported on Chrome, all versions of iOS, Safari 3+, IE 10+, Opera 12.10+, and Firefox 22+. Other browsers get the fluid Bootstrap 3 layout, except Internet Explorer 6 and 7 which use a fixed layout.

Documentation, a demo, and source code are available. Suggestions for improvement are welcome!

flexgrid's Issues

update class names for bootstrap 3

So Bootstrap no longer uses the span6, span8, etc names for the layout. Any plans on updating this?

Convert sass files to scss

I suppose this is primarily a style preference but scss seems to be more widely used and easier for non-sass or less users to get to grips with

edit: just came across this

Why not use Flexie.js to support IE6-9?

Have you thought about this?

How do I right justify a row?

In this Gist:
https://gist.github.com/seanwoods/89fafc5028d514407950

I want the "login" box to be right justified on the right hand side of the navbar. Currently it comes right after the navigation buttons.

If I apply text-align: right to the #login element it doesn't work; likely because the width of that element doesn't reach to the right side of the page.

In the "normal" world I would just float a div and be done with it; how can a similar effect be achieved with FlexGrid?

Thanks!

Add to bower registry

Requirement for custom modernizr build adds maintenance work

Why

I was pretty surprised to discover that to use this otherwise well-thought-out library, I needed to patch modernizer, or else it would not work in Firefox. In looking into it further, it appears to be completely unnecessary and could be remedied with a js file less than a few hundred bytes. While I'm sure the following portion describing an implementation is probably obvious to you, I mostly wanted to convince you that this is a good idea. While I can understand your desire to keep the requirements for flexgrid as small as possible, I believe that you have inadvertently gone the opposite direction by requiring a customized version of Modernizer:

1. This can potentially break other libraries that rely on the core modernizer tests working the standard way.
2. Any time in the future that a developer wishes to upgrade modernizer, they will need to have a portion of their workflow dedicated to patching it for flexgrid.
3. You already require 1 (or 2) javascript files in order for flexgrid to work, so it's not as if it's some sort of fundamental shift in the design philosophy of the library.

How

First of all, starting from a stock non-customized modernizer 2.8.3 release, the following changes appear to be unnecessary, as it's already implemented this way:

hgroup,nav → hgroup,main,nav
hgroup mark → hgroup main mark

Next, by changing flexboxlegacy → webkitbox and boxDirection → WebkitBoxFlex you've just completely removed one test and replaced it with a totally different one. I can't see how the old test interferes at all. The required javascript would be:

Modernizer.addTest('webkitbox', function() { return Modernizer.testAllProps('WebkitBoxFlex'); });

Finally, as for the flexWrap → flexDirection change, there is currently no supported way in modernizer to replace a core test, but the following javascript line would add a new test you could use instead:

Modernizer.addtest('flexboxflexgrid', function() { return Modernizer.testAllProps('flexDirection'); });

Make it Optional

It would already be possible to make flexgrid work without changing the css file and adding a small javascript file, if it were not for the fact that flexgrid relies on the different behaviour of the exiting test 'flexbox'. If you made your patched Modernizr add the new 'flexboxflexgrid' test and changed the css to test for it, it would allow for users to make use of flexbox without having to use a patched version of either modernizer or flexbox.
At that point, you could give users the option of either:

1. Using your very minimal, patched version of Modernizer
2. Using a standard version of Modernizer that has 'addTest' enabled, plus a minimal extra javascript file.

Docs site a bit outdated

Unfortunately, the candidate recommendation syntax will not be enabled by default until Firefox 22 in June 2013.

Welcome to the year 2015!