Do you suffer from rigid grid syndrome? Wish your grids were a little more pliant? The key active ingredient in Extra Strength Responsive Grids is MQ (a.k.a media queries). Apply MQ to your grids today!
Have you tried responsive grids before? Did you run into issues where your ‘responsive’ grids weren’t responsive enough? Have you had a bad experience with a grid system that was afflicted with ’grid snap’? Extra Strength Responsive Grids are percentage-based, for smooth, non-snappy width adjustments. Are you frustrated when collapsing your grid into a single column seems to be your only option for small screens? And what about those pesky phablets?!
Extra Strength Responsive Grids can cure all1 your responsive layout problems!!
With Extra Strength Responsive Grids, you can take total control of your layouts.
Or take for example a content group with a header block...
and a main content area that goes to the right on large screens, but stacks on top of the sidebar on medium & small (via the .flow-opposite class - thanks foldy)
Go for it! (resize your browser to see it in action)
and a sidebar area
Do class names like .grid-6 and .grid-4 confuse you? Instead, try our simple to understand and easy to remember classes like .grid-half and .grid-third.
Do your grids suffer from bad alignment? Extra Strength Responsive Grids comes with padding classes so you can make sure all your boxes line up just right!
.padded
.padded (for grid gutter spacing)
.padded-inner (double padding for content)
.padded
.padded-inner-sides
(double padding only on the sides)
Do you like to nest your grids? With Extra Strength Responsive Grids, you can nest grids inside of grids that are nested within nested grids. Get crazy with it! Go bonkers! Fly your grid freak flag high!
Also you can use the .padded-reverse (or .row if you are used to twitter bootstrap) class to help with nested grids.
no .padded-reverse
no .padded-reverse
no .padded-reverse
.padded-reverse
.padded-reverse
.padded-reverse
Bonus Offer! Extra Strength Responsive Grids comes with a free copy of Equalize! Equalize the heights2 of your grids by adding the .equalize class to the parent grid container3.
Before Equalize
After Equalize
SASS-Enabled. Want to use an 18-column grid instead? Have your own ideas for modifications and features? This grid was built on top of SASS, so if you are a SASS enthusiast, you will find it easy to customize. All of the grid classes are created in a gridGenerator() mixin (see grid.scss and _grid.generator.scss).
Not into SASS? That’s ok. Just ignore or delete the grid.scss file and be on your merry way.
Self documenting. Expressive. Modular. Extra Strength Responsive Grids follows the approach of separating structural layout classes from content styling classes. In other words, let grid classes arrange content on the page, then for inner content, write your own classes to style everything else (color, typography, decorative styles, etc.). By keeping layout classes separate, it becomes easier to treat your content in a modular way.
No more searching through css to find and adjust the structure of the page. Once you become familiar with the Extra Strength Responsive Grids approach, you’ll be able to quickly look at the markup and know what it is doing. Simply add or change classes to make adjustments on the fly.
1 Well, maybe not all of your layout problems! Refer to the side effects listed below.
2 Refer to the source code at the bottom of this page for more info.
3 If you do not wish to use equalize, simply do not embed the equalize.min.js script
Try the Extra Strength Responsive Grid method today!
From John Polacek, maker of such other front end web remedies as SuperScrollorama, BigVideo.js and Responsivator. Follow @johnpolacek on Twitter to stay up-to-date. With contributions from Tim Svensen (@tsvensen) and Andrew Pulley. This is another open source project from the team at Draftfcb Chicago.
Caution: Extra Strength Responsive Grids (ESRG) is an opinionated Grid Framework treatment. Review the side effects below prior to usage. You may wish to look into other treatment options for Rigid Grid Syndrome such as Zen Grids or Profound Grid.
Side Effects: The use of ESRG may result in excessive container elements. If you are a developer who experiences adverse reactions to non-semantic container div classes, it is recommended that you avoid ESRG. Using in combination with horizontal margins may lead to side effects such as broken layouts and element collision. May cause headaches due to ‘grid inception’.
About border-box and IE: The use of ESRG requires the use of box-sizing:border-box;, which is unsupported natively in IE7. However, the good news is there is a boxsizing.htc file that can enable border-box for oldIE browsers. Caution: The use of this .htc file may cause lag, especially when border-box is applied with a wildcard (*). If you are concerned about legacy IE browser support, it is recommended to only use box-sizing:border-box; on the grid containers, and not on the content within (as it is on the page you are lookin’ at right now). More info about border-box
