Understanding the framework

Building themes for Zendesk help centers from scratch is not an easy project. The CSS approaches we use in our themes can handle this busy work and reduce the amount of code you need to write. 

Under the hood, we can use modern approaches:

CSS variables

They help DRY up your CSS. That is "Don’t Repeat Yourself." Custom properties can make code easier to maintain because you can update one value and reflect it in multiple places. 

CSS variables are now supported in all modern browsers. Other theme providers require you to use SCSS which leads to an extra build step for the code. This step means the CSS code is static, and you need to update the value of a variable at different points after the compilation process or set up a development environment locally.

It's not an issue in our themes. Just change a necessary variable in style.css.

BEM

BEM is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast, even with a complex UI, and allows the reuse of existing code without copying and pasting.

BEM makes naming things in CSS easier to read and maintain. If you use the BEM naming convention, it will become easier to see the relationship between your design components/blocks just by looking at the markup.

  1. Block: an independent component that can be reused (e.g., with class name .topbar)
  2. Element: a child within a block that cannot be used separately from that block (e.g., with class name .topbar__link).
  3. Modifier: a variation in the style of either a block or modifier (e.g., with class name .topbar--sticky).

We are using BEM for components that appear on more than one page.

Grid and utility classes

On the other hand, Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. It includes dozens of utility classes for showing, hiding, aligning, and spacing content.

Utility classes are self-descriptive, single-purpose CSS classes:

.lt-d-flex {
  display: flex;
}

Developers use these classes to build without writing additional CSS because if the style is in the library, you can use it over and over and over. Working with utilities massively increases the organization of your project and promotes predictability and consistency for developers and end users.

We support the following utility classes:

Note: we use lt- prefix for classes to avoid naming conflicts with your styles.

Extensions Bundle

Get 6 most popular extensions for your help center with a total price of $1,218 for $699 only.

  • Side Navigation
  • Prev Next Buttons
  • Table of Contents
  • Community Hot Posts
  • Alerts
  • Server Status
Learn More
Did this answer your question?
Still can’t find what you’re looking for?

Hire an expert

Our consultants and developers are Zendesk Guide certified.
Free up your time for your business while we take care of your help center.

Get a Quote

Ask a question

Not sure how something works or how to make changes?
Don’t worry, we’ll answer all your questions.

Contact Us