“We began to refer to this living document as “a toolkit built in style guide form.” This achieved our goal to communicate our work…”
– Mark Otto, creator of Bootstrap Framework
- A comprehensive reading list for young designers
- Magic of CSS
- [tool] Unminify code. Helpful when customizing plugins
Style Guides are Important but Often Ignored
Recently at work, one of our websites was redesigned to be mobile responsive. It was developed by an outside company not using Bootstrap and so I knew I needed some documentation in order to update the site going forward.
Previously, the old site had no style guide and had 10 years of CSS styles written by various designers and developers.
So I asked for documentation. But it made me think back to all of the sites and projects I have built over the years. Guess how many style guides I have created or referenced? Zero. But why?
I think this was neglected because often projects are built so quickly there is no time left for documentation… especially if it is not a priority.
But I now realize any project that needs to last more than a year needs a style guide.
This shift in focus will cause your projects to take more time and be slower to update but will ensure long term quality. The challenge will be explaining to business executives and clients why projects are more expensive and take longer to update.
Some style guide examples:
Bootstrap 4 Quick Start Update
So far this month I have completed the FontAwesome Icon Reference and began the Components Visual Reference. Both of these will help you quickly work with Bootstrap classes and components without having to go to the website for reference. You can download a sample of each below.
Please let me know what you think of them.
The icons are listed in the same order found on the Bootstrap 3 documentation page. This will help you make a quick 1:1 comparison in finding the right icon for your project.
Quickly learn component names and some common ways you could use them.