# Site Builder Markup

See [Avoiding Site Builder CSS](https://docs.devhub.com/themes-and-custom-templates/site-builder-markup/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

| Class or ID              | Type  | Description                                                                                                                      |
| ------------------------ | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
| `.sb-module`             | class | This is the same for all modules                                                                                                 |
| `.sb-<module_name>`      | class | This variable class is set based on the type of module (i.e. `.sb-formbuilder` or `.sb-content`)                                 |
| `#sb-module-<module_id>` | id    | This variable id is unique to this particular module - This will not be repeated on the same page or any other page on the Site. |

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