FAQ (Frequently Asked Questions)

Compatibility: which browsers are supported by PocketGrid?
Should I use PocketGrid instead of Twitter Bootstrap or other grids?
When blocks do not have the same height, my layout is broken: why?
I don't like Media Queries, can I use mobile device detection instead, or something else?
Can I change the 'block' and 'block-group' class names?
Can I avoid using an extra <div> for block groups?
Can I use HTML5 tags instead of <div> tags?

Compatibility: which browsers are supported by PocketGrid?

PocketGrid is compatible with most browsers (not only modern browsers):
IE6+, Firefox, Chrome, Safari, Opera
and mobile browsers (iPhone, iPad, Android, Windows Phone, BlackBerry...)

By default, PocketGrid is IE8+ compatible.
For IE6 and IE7 compatibility, you will need a polyfill for "box-sizing" compatibility:

Box-sizing polyfill (IE6 and IE7 only):
Christian Schaefer created a box-sizing polyfill but the latest version does not seem to handle correctly the subpixel rounding problem. So I wrote my own version of this polyfill.
To use it, download it and put it on your site (in a "js" folder for example),
then add these CSS styles (changing the path to the "boxsizing-pocketgrid.htc" file):
```
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
  *behavior: url(/js/boxsizing-pocketgrid.htc); /* change the path */
}
```
Note: Don't forget the star (*) before "behavior": it ensures that only IE6 and IE7 will see this line.

Some optional polyfills can also be useful (and are used in some documentation examples):

For Media Queries (optional, for IE6, IE7 and IE8): Respond.js
An example of use can be found here: basic-layout-responsive example
For 'nth-child' selector compatibility (optional, for IE6, IE7 and IE8): Selectivizr
An example of use can be found here: nth-child example

Note: these 2 polyfills require your CSS to be in an external file (<link rel="stylesheet" href="stylesheet.css" />), not in an inline <style> tag.

Should I use PocketGrid instead of Twitter Bootstrap or other grids?

Well, first, you can use both!
Indeed, PocketGrid is compatible with any other framework such as Twitter Bootstrap or Zurb Foundation (because it does not use 'grid', 'row' or 'col' classes which are used by too many grid systems).
For example, you could use PocketGrid for your layout positioning, and use Twitter Bootstrap for styling, tabs or special components...

Moreover, PocketGrid has many nice features:

PocketGrid is really lightweight, so you can use it in all your projects at no cost (Twitter Bootstrap is about 200x bigger, even minified!)
Twitter Bootstrap 2's grid has only 1 breakpoint (like many grid systems), whereas with PocketGrid you can define as many breakpoints as you want!
Twitter Bootstrap breakpoints are hard-coded and limited, whereas PocketGrid breakpoints are free and unlimited!
Twitter Bootstrap has only 12 columns, whereas PocketGrid columns are unlimited!
PocketGrid is one of the very few semantic grids (especially pure CSS grids!): you don't have "span4" or "small-6 large-2 columns" classes everywhere in your HTML: column size should be defined in the stylesheet, not in the HTML! That's the PocketGrid philosophy!
Percentage sizing is more natural and more precise than using a number of columns
(how can you make 5 columns in a 12 or 16-columns system? It's impossible! With PocketGrid, just put "width:20%" on your blocks, easy!)
PocketGrid does not require a CSS preprocessor such as LESS or SASS (but you can use one if you want).

If you want to use a complete CSS framework like Twitter Bootstrap, it's dangerous to use it for ALL your site structure because when you upgrade this framework (e.g. upgrading Bootstrap 2 to Bootstrap 3), all your layout will be broken because their grid has evolved and is not backward compatible.

Using a separate grid for your layout (such as PocketGrid!) allows you to upgrade safely your CSS framework (buttons, tabs, carousel...) without breaking your layout!

When blocks do not have the same height, my layout is broken: why?

This important question has been included in the documentation: you can see the answer here.

I don't like Media Queries, can I use mobile device detection instead, or something else?

Yes! Contrary to frameworks like Twitter Bootstrap (where Media Queries are hard-coded!) PocketGrid lets you completely free for device detection.
Instead of writing a Media Query like @media (min-width: 40em) { /* Tablet version */ } you could detect the device type with any other technique (parsing the User Agent for example, or using WURFL or 51Degrees...), and put a CSS class on the <body> or <html> tag using some javascript or during server rendering:

<html class="tablet">

Then, instead of using Media Queries, you can prefix your block classes with the corresponding device classes:

/* Tablet version */
.tablet .header { width: 100%; }
.tablet .menu { width: 100%; }

/* Desktop version */
.desktop .header { width: 70%; }
.desktop .menu { width: 30%; }

/* TV version */
.tv .header { width: 50%; }
.tv .menu { width: 50%; }

Some CSS class name suggestions:

"mobile", "tablet", "desktop", "tv"...
"small", "medium", "large"...
"S", "M", "L", "XL", "XXL"...
or even breakpoint sizes like "bp320", "bp768", "bp1024"...

With PocketGrid, you're completely free!

Can I change the 'block' and 'block-group' class names?

Yes!
You may prefer 'grid' or 'row' and 'col'?
No problem! PocketGrid is so tiny that it's trivial to customize: in your favorite text editor, first do a 'replace all' for the 'block-group' name (with 'grid' or 'row' for example), and then do a 'replace all' for the 'block' name (with 'col' for example).
Do it in that order (because the 'block-group' contains 'block').
Note: Twitter Bootstrap already defines classes like 'container' or 'row', so if you want to use PocketGrid with Twitter Bootstrap, avoid using the same class names! ;)

Can I avoid using an extra `<div>` for block groups?

Yes! You can put the block-group class directly on the <body> tag:

<body class="block-group">
  <div class="header block">Header</div>
  <div class="nav block">Nav</div>
  <div class="main block">Main</div>
  <div class="links block">Links</div>
  <div class="footer block">Footer</div>
</body>

Can I use HTML5 tags instead of `<div>` tags?

Yes! You can use any tag you want!
For example:

<body class="block-group">
  <header class="header block">Header</header>
  <nav class="nav block">Nav</nav>
  <section class="main block">Main</section>
  <aside class="links block">Links</aside>
  <footer class="footer block">Footer</footer>
</body>

PocketGrid