Goto main content

The Grid

About the grid


The site where the pages will be built. Extenso proposes to build a site using the concept of a grid and lockers (which contain information). To organize your page, there are four(4) types of elements that compose the grid of your page.

These elements are interlocked as follows:

  • The section (contain rows)
    • The rows (contain column)
      • The columns (contain widget)
        • And the widgets

The sections

This is used to delimit your work area. This represents the backdrop of the site. As you add items, the section will lengthen accordingly. A page can also contain several sections, one after the other. The section can be full width or have a fixed width.

The rows

They are used to organize the elements horizontally in the section. Several rows can be inserted in the same section. A row can also be full width or have a fixed width.

The columns

Like rows, columns are used to organize the elements, but this time vertically. Several columns can be inserted in the same row. We have a 12-columns model for our grid. The total number of columns must therefore be equal to 12. Ex .: (3 columns of 4 = 12 or 1 column of 7 + 1 column of 5 = 12)

Responsive website

Columns are also used to customize your content for different browsers (Tablet, mobile and computer) Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

The widgets

In any column, you can insert widgets. The widgets library is accessible by clicking on the status bar of a column. The library access icon will appear at the bottom of the column. (More details in the Widgets section)