Style Guide for the Open Social Blue theme

Open Social is a Drupal 8 distribution for building social communities and intranets.

A Style Guide is a set of standards to ensure a consistent design and identity. Additionally, from a development point of view it serves to improve the speed and ease of code deployment. A style guide consolidates the front-end code while comprehensively documenting the visual language, such as color palettes and fonts. To ensure it is always up-to-date, this style guide is automatically generated from comments in the Sass files.

The goals for creating this style guide are:

  1. Streamline the workflow for designers and developers
  2. Maintain a consistency of the theme styles and components
  3. Create a focal point for our Design and User Experience work, both for ourselves and for the community

This theme is built upon Drupal Bootstrap, which means Bootstrap is used as the base theme. Furthermore it is enhanced with a default brand styling and extra components. For the extra components mostly Material Design principles are used.

Organisation

Design components are reusable designs that can be applied using just the CSS class names specified in the component. We categorize our components to make them easy to find.

Base
components/01-base — The default “base” components apply to HTML elements. Since all of the rulesets in this class of styles are HTML elements, the styles apply automatically.
Atoms
components/02-atoms — Smallest building blocks for our components.
Molecules
components/03-molecules — Small reusable components. Usually consists of smaller atoms.
Organisms
components/04-organisms — Organisms are larger blocks to can be placed in a template and do now rely on other components.
Templates
components/05-templates — Templates consist mostly of groups of organisms put together.
Libraries
components/06-libraries — External libraries that can be used by the other components.

In addition to the components, our component library also contains these folders:

Configuration
components/00-config — This Sass documents the colors used throughout the site and various Sass variables, functions and mixins.
Style guide helper files
components/styleguide — The files needed to build this style guide; includes some CSS overrides for the default KSS style guide
Generated files
assets — location of the generated CSS, images and javascript; don't alter these files directly