Flakes Frame & Navigation

A simple frame which splits the browser view into a navigation and a content container.

The Flakes layout is quite simple. The navigation is conveniently located to the left. The content is clearly seperated and easy to focus on. The content sits next to the navigation and is left aligned on the page. Just like a book. It's natural to read and use on every device.

Example Frame with navigation

Code example

<div class="flakes-frame">
	<div class="flakes-navigation">
		<a href="index.html" class="logo">
			<img src="../static/flakes/img/logo.png" width="120">
		</a>

		<ul>
			<li class="title">Navigation Sub Head</li>
			<li><a href="#">Nav Item 1</a></li>
			<li><a href="#">Nav Item 2</a></li>
		</ul>

		<p class="foot">
			Hello <b>John Doe</b><br>
			<a href="" class="example-link">Account</a> &bullet; <a href="" class="example-link">Logout</a>
		</p>
	</div>

	<div class="flakes-content">
		<div class="flakes-mobile-top-bar">
			<a href="" class="logo-wrap">
				<img src="../static/flakes/img/logo.png" height="30px">
			</a>

			<a href="" class="navigation-expand-target">
				<img src="../static/flakes/img/site-wide/navigation-expand-target.png" height="26px">
			</a>
		</div>

		<div class="view-wrap">
			Your content sits here
		</div>
	</div>
</div>