Nowadays, projects are becoming more and more complex. Especially when either taking over on a project or coming in on one that has already begun, it is extremely helpful to have solid documentation to get up-to-speed. A frequent tool for this is known as a style guide, a document that explains the branding and the color usage for a particular client or initiative.
But sometimes, that just isn’t as helpful as it could be. This is where I suggest that a living style guides come into play.
What is a living style guide?
A living style guide is simply a live version of a brand style guide. It allows for extra features than a printed brand style guide.
They allow you to come up with a good code base or maintainable code to use for your project. It also allows you to interact with it. Meaning that you can test code before actually putting it into the site/project and you can make sure your code is reusable and bulletproof.
Starting your own living style guide
When you’re ready to develop your living style guide, think about starting with a foundation. Your foundation should include commonly used elements (e.g. buttons, color usage, typography, links, forms, layout options and anything else that would be used globally).
What usually helps me is writing a list of those elements.
Now, remember to keep things flexible. Perhaps you have a class name of btn and that class has the basic styling of a button which would contain the width, height, padding, font-family, how it displays and so forth. In turn you can have modifier classes that would allow you to change things for particular use cases.
One more thing, always remember to review your code. Reviewing can help make sure you don’t have code or components that could potentially conflict one another.
Naming Conventions
When it comes to naming, remember to keep things simple yet descriptive. Simply use the KISS Principle – “keep it simple, stupid.”
So let’s go back to the example of the btn class. Btn is a simple name in that it refers to a global element of button. Now let’s say you’re on a page that has a certain call-to-action button. So we could essentially name that cta-button. Let’s see what that would like written in CSS.
/* Basic styling for buttons */
.btn {
display: block (this can be anything you need to be)
width: 200px;
height: 60px;
margin: 5px 10px;
padding: 10px;
font-family: 'Arial', sans-serif;
}Your modifier class(es) could be something like:
/* CTA Button */
.cta-button {
display: block
width: 400px;
height: 80px;
padding: 20px;
}
/* Modifier classes that can be added to allow for aesthetic changes*/
.red { background-color: #f0000; }
.rounded { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }I’m sure there are a bunch of different ways you can go about doing this. Remember this is just an example of what you could do.
Hand-developed over automated solutions
I’m aware that there are automated solutions out there that you could use. But in my opinion, creating this all by hand will give you better control over what you have developed. You’ll know the ins and outs better. And you’ll be able to do knowledge transfers a lot easier. And it will hopefully help you with organization.
But, if you’re interested in using the automated approach, here is a small list of sites you can use:
- KSS (http://warpspire.com/kss/)
- SC5 Style Guide Generator (http://styleguide.sc5.io/)
- Living Style Guide Gem (http://livingstyleguide.org/)
Keep in mind that the automated approach could result in you having a stricter set of rules. But that’s also not to say it could help you identify any flaws. So it may be worth a shot to give the automated approach a try.
Conclusion
In conclusion, living style guides are something that should be developed with every project. I’m sure you’re saying that budget may not allow for it or maybe even just not having enough time. It’s hard to say, but maybe it’s something that you could develop on your own time or whilst during development. I don’t know. But it’s something worth considering.
| Reference: | Night of the Living Style Guide from our WCG partner Keyhole Software at the Keyhole Software blog. |
