Build your site using BootstrapSite designer
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:
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.
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.
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
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.
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.
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.
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.