Shouldn’t our goal be to build a library of plug-and-play components that we can use for various pieces? This idea requires a new way of thinking when looking at web pages. For those who have built blogs, or have used other CMS’s; components of this will be extremely familiar and you may use some of these ideas already.
This idea really falls in line with methodology of of "Atomic Design" that Brad Frost talks about. Atomic design is a methodology for creating design systems, focused across five levels:
The era that we are currently in, is one that is quickly moving in the direction of an atomic design pattern. Putting this type of approach into practice can be a challenge, especially if you have a larger team. However, by crafting a toolkit that is geared towards your teams process and approach, you can not only become a more efficient developer but also create a maintainable, well-documented design system.
In February, I had the chance to speak at the jQuery Conference in San Diego and then again at CodepaLousa in Louisville, KY about a toolkit and workflow that I've developed. This toolkit is focused on creating reusable atomic pieces and using them to create a living style guide.
Over the course of this series, we'll go over the different pieces that work together in the toolkit and also dive in-depth. By the end, you should understand the toolkit itself (which will be up on GitHub during the course of this series) and also be ready to extend it or build your own custom toolkit for your team.
Before the next post, take a minute to install Node.js if you haven't already. Once that's done, you can get Grunt up an ready by running
npm install -g grunt-cli from the command line.
The instructions above are from a Mac perspective. Sorry for Windows users, I'm not sure everything involved with getting these pieces set up easily.