Skip to Content

TwentyThree

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 theme and standard grids are built using a a small and simple toolbox to create a consistent foundation:

  • Bootstrap 3 to create fluid and responsive grids for elements in the page. Class names like .container, .row, .col-md-4 and so on are automatically included in the standard grid and layout blocks, but the entire markup can be edited to fit your needs.
  • html5shiv to add support for HTML5 elements to Internet Explorer.
  • Respond.js to add support for CSS3 Media Queries with min-width and max-width in Internet Explorer 6 through 8.

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: