About 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:
- Native CSS variables
- BEM (Block, Element, Modifier).
- grid and utility classes from Bootstrap.
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.
-
Block: an independent component that can be reused
(e.g., with class name
.topbar) -
Element: a child within a block that cannot be used
separately from that block (e.g., with class name
.topbar__link). -
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.
