Branding & Style Guide

Purpose

This guide is used to document, and serve as a reference of design initiatives on Karl Kaufmann Online. A coherent user-centered experience is vital to the success of online projects, regardless of focus. This extends well beyond aesthetic concerns, and helps reinforce the ethos of clarity, open communication, and consistent wayfinding. It permeates every aspect of the design, whether typography, tone of writing, color, or negative space. To further enhance the audience scope, accessibility is accounted for in the design, and structure, taking a ground-up approach—not added later.

Karl Kaufmann Online is built using Sass and component-based style elements. This front-end style guide documents the design components and the Sass variables, functions and mixins used to build the site. As this is a living document, periodic updates will be made, as the project grows and advances, as well as keeping up-to-date with online communication trends.

How this styleguide differs from many others: Beside the style guide-specific elements, such as the layout and organization of this guide, all styling and documentation contained within are actual code. Whenever there are changes and/or elements added, they will be automatically reflected in this guide.

Organization

CSS styles are categorized to make them easy to find and apply to HTML structures.

• Defaults: These are the default base styles applied to HTML elements.
• Layouts: The layout styling for major parts of the page that are included with the theme.
• Forms: Form components are specialized design components that are applied to forms or form elements.
• Components: Design components are reusable designs that can be applied using just the CSS class names specified in the component.
• Colors and Sass: Colors used throughout the site. And Sass documentation for mixins, etc.

While styles are organized as above in the style guide, our Sass files are organized in a file hierarchy like this:

• init: Sass needed to load variables, 3rd-party libraries and custom mixins and functions.
• base: default HTML styles
• components: component-based styles
• layout: component styles that only apply layout to major chunks of the page
• style-guide: some helper files needed to build this automated style guide

Notice

Since this is a living style guide, some elements may be incomplete, due to the iterative nature of components. Changes appear on a periodic basis, as is noted by the version number and build date.

Acknowledgements

Special thanks to the KSS Node team, the project framework this style guide is built upon.