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:
- CSS (or Cascading Style Sheets) lets you style any element on any page by setting position, colors, fonts, border, padding and much more. In addition to standard CSS, TwentyThree supports the Sass extension to CSS. This included the option of using variables, intuitive nesting of style declarations and more.
- Files is where you upload resource files needed for your design. These will usually be small graphics files such as logos or backgrounds, but you can upload any file type including ZIPs, PDFs and stand-alone CSS files.
- JavaScript is a way to write code modifying you page. Using DOM manipulation you can even modify the HTML grid or build new items into your grid. We do not limit your use of JavaScript and frameworks in any way.
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 Designer → CSS & JavaScript to site administrators. The editor opens to take over the full browser window and supports code highlighting, common shortcuts and more.
Sass
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.