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 effective grid system to arrange the visual appearance of a web page. Like a construction set, it allows you to design a website quickly and with few added lines of code.

Concept of a 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 division divides the screen width in percent. For rows, however, the height is adjusted to the content.

../../_images/grid_content.png

Organisation of the grid

  • A grid is defined in WebAcappella by the button ” BOX ” which will contain as many lines as desired with always a maximum width of 12 columns 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 (and therefore essential) component

Note

LINE: Component that allows the inclusion of 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