The basic HTML structure that is needed to work with empty as a plugin is pretty simple. Empty outputs HTML in a bootstrap like fashion with small differences to increase compatibility and enhance the user experience.

Use the container setup described below to write your own templates and custom content for empty. 
The page builder automatically creates HTML content with the described structure.

Basically every page consists of at least four stacked containers. 
Those are

  • a .wrap container
  • a .row container
  • a .row-inner container
  • and innermost one or multiple .col containers

You can think of the wrap as a container wrapping all the page's content – it will adapt padding values which are set as page paddings and therefore has to be the outermost container.

Think of rows (+ .row-inner) as logical separators of content divided into vertically aligned chunks which contain columns that might be stacked from left to right next to each other depending on the viewport.

When creating your own template files from scratch you might want to know that rows (+ row-inner) can also be nested into columns to create more complex layouts.