Adding a living style guide to ThimbleCSS, our CSS Framework

June 1, 2016   |   Design, Front End
Agile League

The Agile League has been using our own CSS Framework, ThimbleCSS,¬†for awhile now. I use it on every WordPress template we build, and we’ve started using it in rails and elixir apps as well. It’s live on BongioviDPS, Copper Nickel, and WrenchMode’s app and blog. It’s lightweight, easy to use, and has recently been updated to SASS.

Our SASS overrides and settings stylesheet provides a great opportunity for the framework as a whole. Having a place to define colors and fonts, it would be a short hop to pull from these SASS variables to create an easy front-end way to track a site’s visual themes. With this in mind, we’re currently working on an html template to include with ThimbleCSS as a living style guide.

A living style guide will help a front-end developer or designer create and add additional pages, layouts, site modules, while conforming to already defined visual hierarchies. I like to think of them as the README.TXT of the design world. Often it’s a lot of work to put together a style guide page for each project you work on. Including it with ThimbleCSS is our way of making a modular style guide easier and quicker to define within our current toolset. Everything from colors, fonts, cards, form inputs, sidebars, etc., can be added, updated, and maintained with ease pulling from an already created and necessary stylesheet.

We’re looking for contributors and feedback as we add this simple template to our CSS framework. Feel free to head over to our git, or comment below with your thoughts and what you’d like to be included with this update.