Generating living styleguides

What a living styleguide is, why you need one and how to generate one.

Martin Muzatko Written by Martin Muzatko
on

Hey there!

I was again able to share my knowledge about front-end development with K15t Software. In this talk, I explain in detail what existing styleguides do, what we can do to document our conventions, brand colors and components and how this helps the company culture to establish a common design language.

Why should you create a styleguide?

Do you ask yourself if it is worth the extra mile to document CSS? Why do we need to document CSS? I started out, that I had to update a big website project that consisted out of multiple classes and nobody knew what each class was doing, why we needed it, how it was used and if it was meant to be re-used. It was hard to tell if a selector was only here to style an element in the context of a page, or if it could stand on its own. To create pages that consist out of a collection of reusable components, not merely of style based on context, the first effort was to document, while recreating parts of the website as components. This helped me and the company to establish a better understanding of how elements are used and why.

Do you want to have a better understanding of your CSS? On my list, you will regularely get news how to establish that knowledge. You can learn how to create a living guide to document how to use and extend your websites components.

See other talks

Webpack


Talk

An overview of flexbox capabilities and how it works

Flexbox


Talk

An overview of flexbox capabilities and how it works

Riotjs


Talk

An overview of flexbox capabilities and how it works

See all Talks