TwentyThree is set up to work seamlessly with the Bootstrap HTML, CSS and JS framework.

Bootstrap is essentially a collection of reusable components commonly used to build websites, including but not limited to: navigations, tabs, breadcrumbs, paginations and carousels (the full list can be found here). The idea is that, in order to assist in the development of websites, these components can be used to provide a solid basis from which the developer can then customise the look and feel of their site to match their needs, reducing the amount of time spent rebuilding regularly used components and combatting well-known browser issues.

Bootstrap on TwentyThree

Enabling and Disabling the Bootstrap Library

Bootstrap is enabled by default on all of our new sites, if you feel that it might not be enabled for you or if you want to disable it completely you can do so on our Theme libraries page, which is accessible by going to:

yourdomain.com/presentation/libraries 

This will link you to the libraries page where you can control which of the default libraries which we support you can use on your site.

Note that jQuery is a required dependency of Bootstrap's JavaScript components.

Our Structure

Bootstrap is available in implementations for both the Less and Sass CSS precompilers. On TwentyThree we have opted to use the official Sass port of Bootstrap and you can read more about Sass in our documentation or on the official Sass site.

A feature of Bootstrap is that it customizable, in that the user can select which components they feel that they want to have available to them and include only the source files they require. This is great because it can reduce the overall filesize of the library but in the case of TwentyThree that would limit the potential options for our users, so in keeping with this thinking we have included all of the Sass and JavaScript components by default.

In addition to all of the standard Bootstrap components we have also included the extensive glyph library—Font Awesome—as well as some of our own custom components that we developed specifically for Video sites, these include the video thumbnail, video meta information, live banner, rating and comments among others.

All of our layout blocks, regardless of whether or not Bootstrap is enabled, have HTML markup that follows the standards and conventions outlined by Bootstrap by default.

Our Sass structure

Outside of our Bootstrap core we have exposed two key files in which you can develop your styles, both are accessible under Site Designer → CSS and JavaScript and are appended to either end of our core style library:

Theme variables file

The variables file in Bootstrap exists as the initial place from which to start developing your own theme and is prepended to the rest of the styles. Essentially it's good to use this file to set the values of Sass variables that you are going to use throughout the rest of your styles.

Bootstrap has a set of variables that it uses as default and we have included this default Bootstrap variables file in our core but these can be overwritten in your Theme variables file.

Theme stylesheet

The theme stylesheet is the file in which you want to specify all other style rules to achieve theme styling that can not be otherwise done by changing Bootstrap variables. This is appended to the end of the core before Sass compilation which allows for styles to be easily overwritten and customised.

Site CSS

The Site CSS file is an additional stylesheet that can be used to write styles that are kept separate from the rest of the compiled Sass styles. By default this will be empty, allowing you to add your own styling in a blank slate.

JavaScript

The entire of the default Bootstrap JavaScript components library is available on the platform.

Additional JavaScript can be added in the Site JavaScript section under Site Designer → CSS and JavaScript. Any JavaScript added here will be linked at the very bottom of the output page in a linked script tag just before the closing body tag of the page.

Reference

We chose Bootstrap because of it's browser support (down to at least IE8), wide usage and large developer community. For more information and further reference we recommend that you visit the official Bootstrap site.