{"id":242889,"date":"2016-06-17T06:54:46","date_gmt":"2016-06-17T13:54:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=242889"},"modified":"2017-04-10T17:45:17","modified_gmt":"2017-04-11T00:45:17","slug":"style-guide-driven-development-atomic-docs","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/style-guide-driven-development-atomic-docs\/","title":{"rendered":"Style Guide Driven Development with Atomic Docs"},"content":{"rendered":"
The following is a guest post by Nick Berens<\/a>, a senior front-end developer at wisnet.com<\/a>. Nick and his team have been building websites through custom style guides for years. Over those years, Nick has been building and evolving a tool to help with this process. I’ll let Nick explain both the philosophy and the tool.<\/em><\/p>\n <\/p>\n I bet you\u2019ve heard about style guides. Perhaps you’ve heard about style guide driven development (SDD)?<\/p>\n I’m a front end developer at wisnet.com<\/a>, an agency specialising in PHP and WordPress development. This is a brief intro into style guides and our team\u2019s experience with style guide driven development.<\/p>\n Over last 2 years I have been practicing SDD with a tool I wrote called Atomic Docs<\/a>, a front-end style guide generator and Sass partial manager. I’d like to introduce Atomic Docs and some of it\u2019s features that have made SDD a simple and essential part of our workflow.<\/p>\n There are two types of style guides we work with at wisnet. A static design style guide and a more dynamic front end style guide.<\/p>\n Our design style guides are static Photoshop (PSD) files cataloging a project’s global design elements. They document a project\u2019s colors, fonts, headings, button states, link states, lists etc.<\/p>\nWhat is a style guide?<\/h3>\n
Design style guides<\/h4>\n