Page Structure Overview

Unlike other CMS  or Website builders you know, AppDrag produces clean responsive code based on Bootstrap. Everything you visually produce generates clean source code that is automatically responsive! This is why we create pay layout structures using SECTIONS >  ROWS >  COLUMNS >  ELEMENTS.

SECTIONS
These are blocks of content within a page. They can have variable heights but span the width of the page. Rows, columns and elements are all nested within sections.

An example of a section, which we'll break down below

ROWS
A section contains one or multiple rows. They are used to create horizontal groups, with a grid of 12 slots.

Example of the first row within a section

---

COLUMNS
Columns share the space of a row. If we have two columns in the row if you want them to be equal size they will both take 6 slots of the grid. The important point is that the 12 slots are filled, it could be 3 slots and 9 slots, 4 slots and 8 slots, ...
Columns can be resized with your mouse from the right of the column you want to enlarge or make smaller.

On mobile, due to small device width, every column will take the full available width and the columns will be appended vertically.

 

---

ELEMENTS
Columns are filled with any kind of elements (Text, images, buttons, menus, logos, ...) vertically arranged (below each others) and taking the full width of the column. 

 

 

---

EXAMPLE



Let's have a look at this Section:

• Row 1
  • Column 1
    • Icon button
    • Text
  • Column 2
    • Image
• Row 2
  • Column 1
    • Icon
    • Title
    • Text description
  • Column 2
    • Icon
    • Title
    • Text description
  • Column 3
    • Icon
    • Title
    • Text description