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:
The Bootstrap grid
The column division divides the screen width in percent. For rows, however, the height is adjusted to the content.
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.
BOX: This is the primary (and therefore essential) component
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
Resize your columns by checking this box
This allows you to grab the borders of your elements to adjust their width