In my Design Systems Crash Course I talk about two of the most effective ways to gain control back on your projects: front-end code and living / coded styleguides.
In theory, this might sound good. However, it can be difficult to understand the benefits, without seeing a live in the wild example.
Here is an example of the home page of my work in progress on Marcus’ redesign:
Now this page acts as a table of contents of sorts.
Here is a section-by-section breakdown:
- What this is and who created it (that’s me). “Design Systems Engineering by James Stone Consulting”
- Templates and how to use them. “HTML front-end code – click for live version”
- iFrame based mini preview thumbnails so you can see a visual representation of the template. This is great when you have to refer back frequently.
- 6 templates showing the main patterns and variations for the site
- The name of each template, so you can find it in the git repo.
- A link to the coded / living styleguide. Along with a description of what it is. “developer documentation for HTML + CSS modules”
Now, this is just the tip of the ice berg. Tomorrow I will talk about the underlying git repo and how the project is organized.
