twenty twelve grid system

Tithus,

I’ve been looking for much the same thing. I’ve been using grids for a few years now, but I’m not sure what would be the best one for use with Twenty Twelve. Let us know if you find one, and I’ll report back the same.

— Lee

If I understand you correctly, most of what you are looking to do would just be customizing the CSS and creating custom widget boxes for any content you need.

And if I recall correct, Twenty Twelve is set at 960px.

Web era,

It’s a little more complicated than just customizing the CSS, though you can create your own grid system by doing so. What Tithus is talking about is employing a complete grid system that has taken into account ratios among all typographic, visual, and layout elements. Bootstrap, for example, has its own grid system, but there are other stand-alone ones, like 960Grid, that can be incorporated into projects. I’m just curious whether anyone has had any experience yet incorporating a grid system like 960 into Twenty Twelve.

— Lee

I see. Not sure if anyone has created a grid system for this Theme, but I would just build it from the ground up. Not too difficult.

I would like to design my homepage with the same proportions than the pages and articles on 2012 theme.

IT seems like it’s working with percentage in an single article with sidebar:
65.104166667 for primary
26.041666667% for secondary

So if I want 3 columns block on my homepage presenting 3 projects as portfolio.
What are the good proportions and margin of each <div>?
For example:

26% | 11% | 26% | 11% | 26% |
div 1 | margin | div 2 | margin | div 3 |
customer 1 | | customer 2 | | customer 3 |
pix | | pix | | pix |

From what I see, the proportion of content/sidebar of 2012 is not something systematic, it seems like its designer just use whatever feel good.

960-(625+250)=85 = the gutter (margin) between content and sidebar, and the padding left right of the whole 960 is 40 on each, so you got 1040 total.

Taking 1040 and 960 and 625 and 250 and 85 and 40 into account, I can not see that 2012 is grid based in the same way as any grid system out there, it just use the feel good numbers.

So I don’t think you can or should take the content/sidebar proportion of 2012 to be a base for your 3 cols homepage, just divide 960 by 3 and adjust 2 gutters until it feels right (equal or close to 40 which is the padding of the whole 960).