Understanding our theming framework

Article author
John Smith

Some ready-made theme attempt to provide layout and styling options through the use of theme settings, but this approach doesn’t come close to addressing the countless possibilities that exist. The result: Help Centers that look very similar.

We recognize that although themes give you an excellent starting point, customizing them to meet your company’s brand or an existing set of style guidelines can take a lot of time and effort without the right tools. We provide those tools.

Framework

To close the gap between design and reality we’ve developed a comprehensive theming framework comprising:

  1. Theme settings allow you to configure certain aspects of the theme’s appearance, like theme colors, images and fonts. Sass variables give you complete control over everything else. You can update the default color palettes or create new ones, change responsive breakpoints, define sizing scales, fine-tune utilities and elements and more!

    Base styles are applied to HTML elements based on your chosen settings, which utilities, elements and patterns then build upon.

  2. Utilities have a specific, often singular role and can be used for everything from minor tweaks to building entire page layouts. For example, text alignment utilities provide control over the alignment of text within an element and can be combined with other utilities to quickly and easily change the appearance of an element or even the entire page.

    Our framework adopts an atomic or utility-first approach to styling which allows for rapid prototyping of ideas, make your code easier to maintain and scale, ensures that changes are made consistently and in accordance with your chosen settings and provides the ability to copy-and-paste elements and patterns from other themes or our Pattern Library.

  3. Elements are reusable parts of a page that can be used in a variety of different contexts.

    For example, buttons and lists are elements that feature throughout our themes. Although each has their own basic look-and-feel, they can be used in a variety of ways both alone and as parts of larger patterns.

    Elements can be thought of as collections of utilities that, due to being used in many places throughout the Help Center, have been consolidated into one or two class names. They can, as a result, easily be modified by adding utilities to achieve a unique look-and-feel. When creating novel layouts and designs, we recommend starting with utilities and creating new elements once repeating combinations start to emerge.

  4. Patterns are collections of elements and utilities which, as a result of being compositions of more fundamentals parts of the framework, can be copied and pasted between themes or directly from our ever-growing library.

    For example, we provide numerous category list patterns that demonstrate different ways of presenting categories. Some make use of elements like cards and list groups, while others are built largely from utilities. These and other patterns can be used as-is or customized through the use of elements or utilities.

Because all of our themes are built using this framework, elements, patterns and even entire pages can be copied from one theme to another. This makes branding and customization faster, allows for rapid prototyping of ideas and ensures that changes are made in a consistent way based on the parameters decided by you when configuring top-level settings.

Of course if one of our themes already meets your requirements, you can simply import it into Guide without making any changes at all!

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Be the first to write a comment.