Sections

Introduction

Base styles

Plugins

Styles

The complete set of styles for each theme is contained with the style.css stylesheet in the root directory of the theme.

Each theme’s stylesheet 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; all of which help to make writing CSS faster and more fun.

Source files

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

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

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

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

  • The /framework/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 theme/ folder contains theme-specific styles and variables.

Editing styles

When editing theme styles you can update the style.css file directly, either through the Zendesk Theming Center or locally using your favourite code editor. Alternatively, you can work with the Sass source files directly, which requires that you re-compile the styles once you have made your changes.

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. Once you have installed Ruby by following these instructions, you can install the sassc gem using the shell command gem install sassc.

You can now compile your Sass files by running the command ./bin/compile.rb from your theme directory, which will take all the .scss files inside the scss/ and create the style.css file that is consumable by Zendesk Guide.