Today I received a style guide from the designer in our project team. I have not done anything like this before. So in this post I will explain what a style guide is and my thoughts on what I’ve learned about style guides.

TL;DR

Thoughts of a front-end developer on following a style-guide.

A style guide provides a common language for designers, developers, product managers, marketing and external agencies. It helps companies to be consistent across all their products and media contents. It includes everything

It includes everything starting from primary and secondary colors, different text color, font-family, font-size to even design on very commonly used components in applications such as buttons, navigation, tables, pop-up modals etc.  As a front-end developer, I have never built an application following a specific style guide. I have always used the most commonly used styling library, Bootstrap. But from this internship I have learned quite a bit about Google’s Material design and have using Material design practices in the application I am building. But a style guide is what I believe sets an application apart from just any other application that uses the common styling library like Bootstrap, or any Material design libraries. That is why it is important to choose a library that is heavily customizable. Since my company follows Material Design practices, I chose Materialize library, and I have not regretted my decisions as this library is very customizable.

What I liked most about having a style guide is that I don’t need to spend much time thinking about what color looks best on the submit button, or should the button be round-edged or rectangular and spend more time building the application. It saves you a lot of time as you can rely on your designer. But it does not have to be set in stone. If you don’t like the end product of a specific feature after following the style guide, you should definitely communicate that to your designer.