Design Technologist & Engineer

Vanilla HTML Demo

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.

Notes

Note: To achieve optimal responsive media, do not place media elements (img, video, iframe, etc.) as direct children of rows.

Tables: It's a great idea to not use tables for grids, rows or columns, so great, in fact, NEVER do it. Just nest your tables inside a column and they'll play nice.