Vanilla HTML

Pure Markup

Vanilla HTML is a framework built on the concept of not requiring extra markup or class attributes to attain a layout. Just write semantic HTML with some basic knowledge of Vanilla HTML and your layout is done. Seriously, now focus on the things that are actually important, like your design. Oh yeah and Vanilla HTML is 100% responsive.

Almost Magic

GRID: Start a grid by adding class="vanilla" to an element. This is the only CSS class in the API. For a simple layout all you need is <body class="vanilla">

ROWS: Elements that are direct children of class="vanilla" will become ROWS.

COLUMNS: Direct children of ROWS will be COLUMNS. Columns are weighted depending on the tag. header, section, nav, article, main, address, and footer tags produce a larger column when placed next to any other tag. Using this technique you can create an assortment of different column layouts.

View on GitHub

Three Equal Columns

Code Examples

Layout Syntax

<body class="vanilla">
<h2>Two Column Layout</h2>
<section>
<h3>This is column One</h3>
<aside>
    This is Column Two
</aside>
</section>
</body>

Output

Two Column Layout

This is Column One

Forms

<form class="vanilla">
<h5>Horizontal</h5>
<div>
<label>First Name</label>
<input type="text" />
</div>
<div>
<label>Email</label>
<input type="text" />
</div>
<div>
<input type="submit" />
</div>
</form>

<form class="vanilla">
<h5>Vertical</h5>
<label>First Name</label>
<input type="text" />
<label>Email</label>
<input type="text" />
<input type="submit" />
</form>

Column Variations

Browser Support

Brought to you in part by the National Science Foundation and Viewers like you!

Not really. It was built by Tyler Childs with the help of HTML5 Boilerplate, CodeKit, Less, Less Elements, and Normalize.