The “Flower Power” Component Style Guide

The fully rendered Flower component

Design components are en emerging standard on how to build web sites and apps. By thinking about full “page” designs as a collage of independent design “components”, we can build leaner and more maintanable CSS. The “flower” component is a visual metaphor to more easily explain how to build a design component.

Using kss-node, the style guide for the flower component is auto-generated from comments in the source stylesheets (Sass, in this case).

Style guides like this should be used to aid front-end development of a website or app. They can aid in:

Video Presentation

The flower component is a main example used in the presentation, “Managing Complex Projects Using Design Components”. The full video of the presentation is available from the Drupalcon 2014 website.

Installation and Source Code

The source files used to generate this style guide are available in the Flower Power project on GitHub. Installation instructions for automatically building this style guide can be found in the