Can someone explain the TwentyTwelve Structure??

I just don’t seem to be able to understand the basic framework and how it scales, like I could in the previous version.

Twenty12 is not a new version of Twenty11, they are different one entirely. The layout of both themes are responsive. Twenty11 is desktop first, mobile later. Twenty12 is mobile first, desktop later.

So to be able to customize Twenty12 layout, you have to understand responsive design in general and the mobile first thing.

Search the forum, there are several topics on how to customize Twenty12 in particular with example codes.

Thanks for your reply Paulwpxp,

I think I understand the basics of responsive design and think it’s really essential, though I don’t know much about how this impact design for mobile devices yet – but keen to learn.

I’ve spent a few hours reading different forum threads (and am already working with my own child theme for twentytwelve) and none really tackle this issue. So what I can’t get my head around is how they relate…

ie; in 2011 theme:
– the primary is the page width with a negative margin to float it off the left-hand side,
– then the content area was 100% and held everything else in the primary page, like the container (in % and a margin to allow for a sidebar) + sidebar area,
– when added together (the container + sidebar area) was > 100%, and this gave the %age for the primary margin, so it didn’t get pushed out of the container.

So, all good, but in 2012 theme, I seem to have to change both .site and #page to affect a change of width, and I can’t find its negative margin either. So that’s why I’m finding it hard to relate to I guess.

So any pointers would be really helpful, especially relating to the responsive box model like in 2011 theme.

Many thanks.

That’s one of the CSS layout techniques to arrange columns.

2011 uses this system called HolyGrail (I think that’s what it’s called.)
https://alistapart.com/article/holygrail

2012 just floats the columns.

To customize 2011’s layout, you only need to be aware of those number you add and make sure you take out the same amount.

IMHO, 2011 layout is perfectly used as is, I would just take out some white space, and take out the outter most padding in small screen.

Hi paulwpxp,

Thanks for the info. I spent ages working through various tutorials like the HolyGrail one to understand it.

Don’t suppose you know of a similar tutorial for 2012 theme, so I can really understand how the floats work, and which bit sits inside of another, or is dependent on another, as that’s what I can’t understand yet? Or perhaps some codex that lists what each div etc does in 2012??

Cheers.

The column layout in 2012 is nothing more special than floating in general.

<div class="site">
	<header role="banner"></header>
	<div id="main">
		<div class="site-content"></div>
		<div class="widget-area"></div>
	</div>
	<footer role="contentinfo"></footer>
</div>

This to control the max width.

.site { max-width: 960px; }
footer[role="contentinfo"] { max-width: 960px; }

This in media query to float 2 main divs

.site-content { float: left; width: 65.1042%; }
.widget-area { float: right; width: 26.0417%; }

Thanks paulwpxp, great clear explanation! Just one final thing – what is the difference between the .site and the #page, as they appear to affect the same thing?
Cheers.

So we have this

<div id="page" class="hfeed site">

id is referenced in CSS with # (hash tag) and class with . (dot). In general, we use class to style element, never use id unless necessary.

To override parent theme’s style in child theme, we first see what selector parent theme uses to target that element and we use the exact same selector. This is to preserve its “specificity” leaving room for other thing to override it if needed.

Thanks so much for your patient explanation – getting to grips with it now and feeling more confident of “taming it” in my child theme!

Much appreciated!