Site designer

Styling your site using CSS and Sass

When your HTML grid has been set up and configured using layout blocks, all the remaining styling and design is done using three complementary parts of the TwentyThree design engine:

Cascading Style Sheets is an integral part of all web development, and is used for transforming the markup in HTML into well designed websites. If you want to learn more about CSS, Mozilla's reference is a good place to start.

When you want to set up your own design for TwentyThree, you will be using CSS to change the look and formatting of the overall grid of pages.

The CSS editor in TwentyThree is available through Site DesignerCSS & JavaScript to site administrators. The editor opens to take over the full browser window and supports code highlighting, common shortcuts and more.


TwentyThree supports the writing of style rules in Sass as well as CSS. Sass is an extension to normal CSS that allows for the implementation of more advanced styling rules such as the use of variables, nested style rules, re-usable styles through mixins and control directives and expressions such as if, for and each. All of this allows developers to write styles that minimise redundancy and are easier to maintain.

We chose Sass because it's widely used and has a large community. For more information visit the Sass homepage or read through the technical documentation.

Can't find what you're looking for?