Styleguide Template Guide

I created an simple single-page styleguide Styleguide Templates to get started with theming and/or documenting your styles.

The main goal of this project was to find a way that a set of color patterns and fonts could be generated very quickly without needing to change too many things from one project to the next.

Each page follows the same basic principles

• There is a light variation and an inverse dark variation.
• Each set of colors has a base color, plus a lighter, and darker variation.
• Besides from light and dark, there are also full-color designs
• For each full-color theme there is
  • a variation with only white or black typography
  • a variation that uses the theme color for the text that uses the darkest and lightest color variation to produce good contrast.

In the example below I only choose 3 colors to test with but this produced 6 theme templates in the end.

Each of the themes only needs to be set with a single css class at the main section container for each page as well.

This was my first attempt at automating themes and styleguide. For a more advanced version of this see charrismatic/hugo-styleguider

A Pen by Matt Harris on CodePen.

See the Pen Styleguide Template Template by Matt Harris (@super_thalamus) on CodePen.

Source