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.
We recommend only editing Sass files within the scss/theme/
folder. You can add your own custom declarations or overwrite framework settings by adding variable overrides in the theme/_variables.scss
file.
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.