Skip to Content

The standard grid and its markup

Site designer

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:

Related articles

The code editor
The code editor in TwentyThree works in the browser and is used to manage all the code and style that makes up the...
Custom designed templates
Allow custom design to your log-in pages You are free to re-design and fully manage the look and feel of log in,...
Hosting of design files
In TwentyThree we do not only host the videos but also the full design of a video website and video player. This...
Introduction to Liquid
If you want full control over the layout of your TwentyThree site and styling using CSS and JavaScript simply is not...
Liquid Tags
As in most programming languages, you can control the logic of Liquid using tags. We currently support the following...
Liquid Filters
The following is a full list of the output block filters supported by the Liquid markup implementation used in...
Theme Options
Using Theme options, developers can turn simple designs into customizable themes where ordinary users can modify...
Working with layout blocks
When building your video website, you have full control of how your video content is presented. For styling, you...

Can't find what you're looking for?

Contact us