Provide StyleguidesThursday, June 25, 2015 5:15 AM
Good reasons why you should workout a styleguide
- Nice tool for making collaborating of multiple frontend developers easy
- Fast way of continuously testing your components visually
- Good documentation of your projects ecosystem of components and styles
For simplification, think of a button framework you've created for your website. There are solid colored buttons, buttons that can be rounded, buttons with just an underline and buttons with just a border. Each of this buttons can be used in 3 different sizes and you support a wide range of different colors for each of them. In addition each button has a selected and disabled state. In short: There are a bunch of variations that are pretty hard to overlook for others if they are not specified at a certain place.
The best way to show off what components are already existing and how they can be used is to create a styleguide for your teammates. The styleguide is just one simple static html file that covers all the different components of your website. From basics like typography, icons and text styling to custom components like teasers, sliders, buttons as well as the usage of your grid system.
Every time you are happy with a newly created component, simply add it to your styleguide. Your teammates will get a super simple, nice and easy introduction to the ecosystem of your website whenever they are new to the project and have to make changes.
On the other hand, styleguide driven development will help you to visually test your components continuously without the need of clicking through every single page of your website.
A basic example
A basic example of how a styleguide can look like can be found in the examples section.