The “Flower Power” Component Style Guide

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:

• Documentation of the CSS classes needed to style the project.
• Testing of the CSS using a Continuous Integration process and a testing framework.
• Focusing the front-end developer so they can visualize a design component as it is implemented.
• Debugging an already-implemented project.

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.

• Video: https://austin2014.drupal.org/session/managing-complex-projects-design-components
• Slides: http://www.slideshare.net/JohnAlbin/managing-design

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 README.md.