Site Builder Markup

See Avoiding Site Builder CSS for more information on what you should avoid when adding your own custom styles.

Markup Details

Page

A page is a grid of modules that are grouped into rows, columns, and positions.

  • "Columns Area" contains "Rows"

  • "Rows" which contain "Columns"

  • "Columns" contain "Modules"

Columns Area

This is the main "Site Builder" zone that contains all the rows, columns and modules that you can added to a page

<div class="columns" class="columns-inner clearfix">

Rows

These are block-level elements that are stacked on top of each other

<div class="sb-row">

Columns

These are percentage-width elements that are floated left within a Row

<div class="sb-col" style="width:50%">
  ...
</div>
<div class="sb-col" style="width:50%">
  ...
</div>

Modules

These are the individual modules that contain the content added to the page

<div id="sb-module-<module_id>" class="sb-module sb-<modulename>">
</div>

Last updated