By the time you read this insight, the idea of atomic design will probably be commonplace. But right now, in 2014, atomic design is fundamentally changing how we conceive of and create websites. So, what is atomic design, and if you’re not a web designer or developer, why should you care? Atomic Design is the concept that when we create website, we are no longer designing “pages.” We’re creating a design system that is made up of a variety of different parts, or components, that can be reused, remixed, and repurposed to create an infinite variety of design options for a website.
In short, we start with atoms, such as a headline, a block of text, a button, an image—and ultimately a combination of these things. From those atoms we can create what web designers and developers call molecules and organisms (i.e. an article preview within a page or a row in a list of publications in a resource center). And those inflexible page tempaltes we’re no longer creating? We’re building them out of these different combinations of molecules or organisms.
Sounds more complicated, right? Well, it is a lot to manage, especially for web developers. And that’s where the idea of Atomic Docs comes in. Atomic Docs are a new tool that manages your design system’s components (and their underlying code)—and automatically generates a front-end style guide. We’ve been putting the idea to the test put it to the test to see how it would impact my workflow. Here’s what we learned
Atomic Docs are Easy to Set Up
Atomic Docs was very easy to get started with. I set up a WordPress site with our distro and starter theme. Then, I downloaded the source files from github and moved them into the root of my theme. That’s pretty much it. I simply needed to change the destination CSS file path in our gulpfile.
Atomic Docs Makes Naming Things Easy
One of the hardest and most important tasks of a frontend developer is naming things such as classes, IDs, field names, filenames, etc. The names we choose must convey meaning to other developers, designers, and site admins and the choices are endless. Atomic Docs makes this task much simpler. The user interface is intuitive and easy to use and you can easily rename your components and categories, saving you from needing to go into many different places in your project to manually change names. The best part is, it generates all the SCSS and PHP partials you need for development, and puts them in organized folders and in the proper order. The extra head space Atomic Docs provides allows you to focus on what your components will be called, rather than where they will live and if they’re in the right place in your folder structure.
Atomic Docs Encourage Design-Driven Development
As the name suggests, Atomic Docs is a great tool for the Atomic Design process or Style Guide Driven Development. Atomic Docs isn’t limited to these processes though. The practice of developing and designing your user interface separate from backend technology can benefit any team. You can also deliver a living style guide to your client and design team for future use.
BEMr’s Beware
When using Atomic Docs, it’s important to remember to name categories and components the same way you would manually. Most importantly, do not use spaces, as filenames with spaces are obviously invalid. This is not a major fault, however, it wasn’t clear initially that there was a one-to-one correlation between the generated filename and the name you assign it in the tool. This is also worth noting if you use BEM naming conventions. Filenames have the potential to get a little confusing when you get down to the Modifier level as you can see in the screenshot above.
As we’ve been working atomic design into our design and development process, all we can say is that having something like Atomic Docs to help manage the process awesome! It delivers a great developer experience for creating and managing SCSS partials and makes it easy to create a living style guide. Curious to learn more about how to incorporate atomic design into your nonprofit’s website strategy? Get in touch!
