Our Style Guide
I decided to create a Style Guide inspired by Anna Debenham’s “Front End Style Guides” even though I was more than half way through the process of creating the Digital Bliss website.
I have many reasons for doing so but mostly I wanted to investigate in practice how a Style Guide could become part of my process, its effect on the efficiency of the process and of course the end result especially in the context of a responsive, content and mobile first approach. In addition I was certain the process would help me in refactoring the CSS codebase for the better.
The first part of the process included me creating a static style guide that would include all the basic HTML elements of the website and their associated styling. I included everything on a single page and used .LESS as the CSS language of choice. This process took me about 20hrs but that was because the styling already had been done for the website so the whole process was mostly about refactoring the existing CSS.
The new structure now is as follows in order of inclusion:
- reset.css, sets the initial values of the page, this is a widespread common practice and there are many reset files available online. Should be reusable across websites.
- library.css, contains all mixins and utilities, again this should be reusable across any website.
- global.css, contains global styling variables such as colors and fonts, in theory overriding this file would change the color theme of the website. All LESS/SCSS variables go here.
- styleguide.css, the actual style guide file, it includes styling for all the elements and layouts used in the website.
In the second part and after I had finished a basic first version of the Style Guide I went back to the website code and worked on including the Style Guide as part of the process. As a result I managed to remove a lot of duplicate code and to update my boilerplate css templates to include the style guide.
Figure 2. show the new structure of the LESS code for this website. The first four files are the same as the style guide and serve as a good starting point for any project. File number 5 main.less contains the main styling of the website for elements that are used in more then one pages. The remaining files are section specific styling rules.
The most recent version of the code can be found here.