Theme styles

The stylesheet for each theme is a compiled version of the Sass source files contained within the scss/ directory. Sass is a preprocessor that lets you use features that don’t exist in CSS yet like variables, nesting, mixins and inheritance and can make writing custom CSS much faster.

Editing styles

There are two ways to go about making changes to your theme’s stylesheet:

1. You can update the style.css file directly, either through the Zendesk Theming Center or locally using your favourite code editor. Any changes made will be immediately reflected in your Help Center without the need to take any further steps.

2. You can update the Sass source files in the scss/theme/ folder. This could include specifying new values for framework Sass variables, adding your own custom declarations or taking advantage of the functions and mixins that are included with the framework. If you take this approach you will need to re-compile the stylesheet once you’ve made your changes.

Using Sass

The Sass source files are organized into folders, representing their role in the framework:

theme/
└── scss/
  ├── framework/
  │   ├── base/
  │   ├── elements/
  │   ├── utilities/
  │   ├── functions/
  │   ├── mixins/
  │   ├── _variables.scss
  │   └── index.scss
  ├── theme/
  │   ├── _variables.scss
  │   └── index.scss
  └── index.scss

• The framework/ folder contains framework-wide styles and variables.

  • The base/ folder contains base styles that apply to HTML elements and provide a solid foundation for the styles that come later.

  • The elements/ folder contains element styles that are reusable blocks of UI which can be combined to create patterns.

  • The utilities/ folder contains utility classes that are single purpose styles that can be used to change the look-and-feel of an existing element or pattern, or create entirely new layouts from scratch.

  • The functions/ folder contains all Sass functions used by the framework.

  • The mixins/ folder contains all Sass mixins used by the framework.

• The theme/ folder contains styles and variables specific to the current theme.

Updating variables

Framework and theme-specific Sass variables are contained within their respective _variables.scss files. If you wish to override an existing variable or add a new one, we recommend doing so in the theme/_variables.scss file.

Theme settings are also included as variables within both the Sass files and style.css stylesheet, but have a different naming convention. Theme settings use underscores as separators (for example, $color_primary) whereas standard Sass variables use a hyphen (for example, $color-gray-100).

Compiling Sass

Our themes all include a simple Ruby script for handling the Sass compilation step, which can be found in the bin/ folder.

The script requires both Ruby and the sassc gem to be installed, so to recompile the stylesheet:

1. Install Ruby on your computer by following these instructions.
2. Install the sassc gem using the shell command gem install sassc.
3. Compile your Sass files by running the shell command ./bin/compile.rb from your theme directory:

The first two steps only have to be performed once.

This will take all the .scss files inside the scss/ and create a new style.css file that is then used by Zendesk Guide.