Five points to make easy-to-use style guide

ByDave Crosby

I listed the components and modules on the page when deciding the website designStyle guideIt is convenient to share information with developers and other designers. So how do you use the style guide successfully? So, ZURB University has summarized it into five points.

ZURB University | 3 Minute Lessons
http://zurb.com/university/library/31

◆ 1: Include enough information to build the site

ByNoëmie Haffner

It is important to include the components sufficiently and to write guidelines and patterns of coded UI, so that anyone can take charge of creating web pages from scratch. Because it is difficult to explain everything, let's use HTML and CSS with pre-built components to make the content consistent.

◆ 2: Include code samples


To make the content consistent and reduce the work afterwards, put a code sample in the style guide. One sample per item, including HTML and CSS, is basically so that web designers can easily copy and paste components.

◆ 3: Make a style guide after coding of all pages is completed

ByIvan Dervisevic

Since the design changes many times during development, when you start writing a style guide when you are not done coding, you will rewrite the guide over and over again. For that reason, it is recommended that site design and motion approval start writing after both team and client have come down. Based on the style guide, you can also tell the client exactly all the points of the content page.

◆ 4: Write for people who are not familiar with the website


It is easy to think that you cover all of the site design. But those who are familiar with designs are more likely to make careless mistakes. When copying sample code from each page carefully, make it easy for beginners to use.

◆ 5: Create checklist

ByGreat Beyond

Use a checklist for style guides to avoid careless mistakes. Elements may vary depending on the project, but basically it is OK to check "grid" "structure of code" "color" "typography" "button" "form" "pattern".