Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<body>
<section class="top" role="definition">
<div class="header">
<div class="frame">
<header></header>
<nav></nav>
</div>
</div>
</section>
<section class="main" role="main">
<div class="title">
<div class="frame">
<header>
<h1></h1>
</header>
</div>
</div>
<div class="body">
<div class="frame">
<article>
<time></time>
<p>Content...</p>
<cite>Author</cite>
<dialog>Comments...</dialog>
</article>
<aside>Sidebar</aside>
</div>
</div>
</section>
<section class="bottom" role="contentinfo">
<div class="footer">
<div class="frame">
<aside>Widgets</aside>
<footer></footer>
</div>
</div>
</section>
</body>
@lancejpollard

This comment has been minimized.

Copy link
Owner Author

lancejpollard commented Jul 12, 2010

Vertically, the page is divided into section blocks. The section has a div as children, with a class describing its function (title, footer, body, etc.). Each of those divs has one child, <div class="frame">. That 3-layer construct allows us to style the vertical section with colors/graphics that fill 100% width, and the frame centers our content in say a 960px width grid.

Then everything inside of the frame is the content of the page. Each can have a header, a footer, and any other tags in between.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.