Improved default design

Version 2.0.0 is close to a final release. In mid-March, we released v2.0.0.pre.1. This version brings some updates in the default style of the rendered style guide. Two major goals are:

  • Nice and unobtrusive without configuration: A minimal design that works well with most website styles in a neutral color.
  • Easy to adjust: All Sass styling variables depend on each other. By setting one color, all others will match your corporate design.

Default style without configuration

It’s just black and white, only the code blocks and examples get a gray background.

Default fonts

In terms of font, helvetica neue, helvetica, sans-serif is used for text and andale mono, courier, courier new, monospace for code.

Not your cup of tea? Here’s how to change:

@style font: source sans pro, sans-serif
@style code-font: source code pro, monospace
@style base-font-size: 18px

Don’t forget to link them. If they are not available via your style sheet, you can easily add links:

@head {
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:400,700,400italic,700italic" rel="stylesheet" type="text/css">
}

Exampe stylings

Click on the examples to see all the setup needed for their invidual styling:

Default Pink Blue background Blue background, invers code Yellow with Georgia

Summary

Having the improved design, v2.0.0 is close to be released. The Homify Style Guide already makes use of the the latest v2 release in production. Let us know if it works for you or open an issue if you find anything.

gem install livingstyleguide