Skip to content

HTML5 markup document structure

Jump to bottom Edit New page
Karin Taliga edited this page Apr 7, 2014 · 1 revision

This is the document structure of the Thematic theme, with the css classes introduces in 2.0 The widget areas are only visible when there are widgets in them.

<body {body_class}>
	<div class="site-wrapper">
		<header class="site-header">
			<div class="branding">
				<div class="site-title">{site title}</div>
				<div class="tagline">{site tagline}</div>
			</div>
			<div id="access" role="navigation">
				{mobile menu toggle button}
				{accessibility skip link}
				<nav class="menu">
					{primary menu location}
				</nav>
			</div>
		</header>
	
		<div class="site-main">
			<div class="content-wrapper">
				<div class="site-content" role="main">
					{main site content - the loop and comments section}
				</div>
			</div>
			{primary widget area}
			{secondary widget area}
		</div>
	
		<footer class="site-footer">	
			<div id="subsidiary">
				{1st subsidiary widget area}
				{2nd subsidiary widget area}
				{3rd subsidiary widget area}
			</div>
			<div id="siteinfo" role="contentinfo">
				{theme options footer text}
			</div>
		</footer>
	</div>
</body>
Add a custom footer
Add a custom sidebar
Clone this wiki locally