Power Mode

The standard grid and its markup

Every part of the layout and markup on a TwentyThree can be changed to fit your exact needs. The markup of every template, page and layout can be customized, and you can upload your own graphics, stylesheets and scripts.

This document describes dependencies, grid concepts and the content of the main liquid template.

The page grid

The grid on every page is simple, generic and mirrors the areas available under Site Designer → Layout. The tree is structured this way:

html
  head
  body#page-name
    #container
      #header
      #main
        [#leftsidebar]
        #content
        [#rightsidebar]
      #footer

The two sidebar nodes will only be included if there is content within that sidebar area. The <body> element will be decorated with the CSS classes .has-nosidebar, .has-leftsidebar, .has-rightsidebar depending on context. Remember, that a grid can have both a left and a right sidebar simultaneously.

Included libraries and dependencies

The standard themes and standard grids though are build using a a small and simple toolbox to create a consistent foundation:

On top of this, some layout blocks and pages may require jQuery, Visualplatform.js, or GlueFrame in which case these libraries will be included in the liquid array, which is available in the master template:

Other content of <head>

Each page will have other meta information in the HTML header of the pages. This of course includes the title of the page -- but also additional information for search engine optimization:

Can't find what your are looking for?