Layout

HTML

<!-- header -->

<header id="header" class="foo-header"> 
	<h1 class="foo-title-header">Website</h1>
</header>

<!-- main -->

<main class="foo-main foo-wrapper">

	<!-- content -->

	<article id="content" class="foo-content">
		<h2 class="foo-title-content">Headline</h2>
		<div class="foo-box-content">Box</div>
	</article>

	<!-- sidebar -->

	<aside id="sidebar" class="foo-sidebar">
		<h3 class="foo-title-sidebar">Headline</h3>
		<p class="foo-text-sidebar">Text</p>
	</aside>

</main>

<!-- footer -->

<footer id="footer" class="foo-footer">
	<div class="foo-box-footer">Powered by NCSS</div>
</footer>

CSS

/**
 * @tableofcontents
 *
 * 1. layout
 */

/** @section 1. layout */

.foo-main
{
}

.foo-content
{
}

.foo-sidebar
{
}