This is a sample web page edited with the template “gridpage”, you can edit a similar web page or click on the “XML” button to see its source content

This “gridpage” template is a curiosity based on the Bootstrap library. The page is divided into cells. The template supports content editing and grid layout editing with a styling menu.

This is an experimental template that was born from a challenge : how to merge content editing and grid layout editing in an XTiger XML template ?.

This template is experimental, however we plan to improve it as we improve the AXEL library: the first step will be to enable a detachable styling menu triggered by clicking on its icon, and not just when mousing over. The next step will be to devise higher level styling parameters for non CSS-knowledgable users.

The cells below reproduce the cell composition of the home page of this site

Big Title

A first cell 12 units large. Note that the sum of widths of cells and of cell shifts in a row may not go over 12, otherwise the last cell starts a new row.

Each cell content is similar to the “webpage” demonstration template content, it is a simple HTML content.

Smaller Title

  • a second cell 7 units large
  • and a bottom margin of 1em

Smaller Title

A third cell 5 units large

News

Finally another 12 units large cell. It is used to display the news at the bottom of the page. It starts a new row since the previous row is filled by the two cells with smaller title that sum up to 12 cells unit width.

About the styling menu

The menu appears when mouse is over the “S” letter at the top right of each cell. Note that menu labels are a mix of French and English words.

  • Largeur : width of the cell in grid units (12 units per row)
  • Décalage : cell shift to the right in grid units
  • Clear : force a cell to have no other cell on its left (when set to left), on its right (when set to right) or on neither side (when set to both)
  • Hauteur : impose a cell's height using CSS units (ex : 1 em)
  • Float : move a cell to a side, usually used together with a fixed height (see above) to create lateral columns
  • Alignement : text alignment
  • Cadre : draw a border around a cell using CSS syntax (ex : solid 2px green)
  • Padding : internal cell spacing using CSS syntax and units (ex : 0 2em)
  • Marge basse : bottom margin with CSS units

The styling menu is a quick and dirty prototype, some parameters are related to CSS properties hence it is targeted at HTML developers.

Styling menu