Grid layout

Use of Web standards

WebAcappella uses the latest version of the Bootstrap framework and the powerful CSS3 FlexBox standard. A WebAcappella page features a simple and efficient grid system to organize the visual aspect of a web page. Like a construction set, it allows to design a website quickly and with few lines of code added.

Notion of grid

A grid is simply a division into cells of the same dimensions

The Bootstrap grid has 12 columns.

A grid is divided into rows (called “row” in Bootstrap) and columns (“col”), as in the following figure:

../../_images/grid_col_and_row.png

The Bootstrap grid

The column layout divides the screen width in percent. For the rows on the other hand the height will be adjusted to the content.

../../_images/grid_content.png

Organization of the grid

  • A grid is defined in WebAcappella by the button ” BOX ” which will contain as many lines as desired with always a width of 12 columns maximum per line.

  • A row in Bootstrap will contain elements (text, image, etc.).

The major components are the “BOX”, “COL” and “ROW”.

Note

BOX : This is the primary component (therefore essential)

Note

LINE: Component that allows you to include images, texts, a gallery, etc.

A row is divided into 12 columns (see bootstrap), a component like an image can have a minimum width of 1 column and a maximum of 12 columns.

WebAcappella Fusion Editor

You can drag and drop all the components into the working interface

../../_images/add_element.png

Resize your columns by checking this box

../../_images/resize_columns.png

This allows you to grab the borders of your elements to adjust their width

../../_images/resize_element.png