Learning the Web Using Atomic Design

Posted on

As many of you web designers and developers know, my brother Brad Frost’s book Atomic Design has recently been released into the wild. As many of you may also know, I work with him. What many of you don’t know is the way I learned web design was through Atomic Design. After packaging up tons of Atomic Design books over the past month and a half, I have realized how important it is to developers and designers.

The way you learn HTML, CSS, and JavaScript is not by jumping into processes like atomic design, but learning the actual languages first, which is what I did. After learning the languages via codacademy and Brad’s tips here and there, I only worked on one small project without atomic design before learning the process of it. I put it to use in the website for my sister-in-law’s jewelry company Frost Finery. Since then, I feel like most of my projects (both websites and design systems) have dealt with some sort of breakdown of components into the categories of atoms, molecules, organisms, templates, and pages. I have definitely grasped the benefits of what it has meant for me early on in my web designer/developer career.

Benefits of Learning Through Atomic Design

Although it is perfectly acceptable to learn web design in many different ways, I feel atomic design has a lot of benefit. The way I learned was through Pattern Lab, an easy-to-use prototyping tool that you can clone from GitHub. I use the mustache version because that was one of the only versions before the new version of Pattern Lab and I feel like it’s the easiest to understand for a beginner. You can also use the Node.js versions (using Grunt or Gulp). Pattern Lab helps paves the way for easier web development.

Without further adieu, here are the benefits of learning atomic design early in your career:

  • It organizes your components from small to large, making it easier to understand the structure of your site’s contents
    1. Here are some examples of each:
      • Atoms = Button
      • Molecules = Search input containing that button
      • Organisms = Header containing that search form
      • Templates = Homepage with that header at the top (“wireframey”)
      • Pages = Homepage with that header at the top but with the data and actual images included on the site
    2. I spent my early days of atomic designing (weird to say that) components caring too much about whether a certain form is a molecule or organism. Answer is, it doesn’t matter as long as your team agrees that the component’s location makes sense. No need for 500 stand-ups to decide where each component goes.
    3. Within atoms, molecules, etc., we also add additional folders in our recent projects (forms, blocks, messaging, etc.) to compartmentalize components by type. This also helps with trying to find the correct pattern in your directory.
      Screen Shot 2017-02-03 at 7.41.34 PM
  • Adds consistency across your site by reusing components.
    1. Atomic design is based on reusability. Say you build a button in your atoms folder. You can place that same button on another page or within a header and still have the same class name. This will keep a consistent theme across your entire site.
    2.  You can add a modifier class like .button--blue to .button (using BEM CSS syntax) to give the button a different background color instead of specifying where exactly the button is located in your HTML.
    3. If you are building a design system for a giant corporation like we just did, you can add theming into your CSS a lot easier by targeting less patterns since most of your base styling takes place within one class instead of multiple classes.
    4. The brand of your company’s site or client’s site can be represented across the board by keeping with consistency.
  • With reusability comes thinking about reusability
    1. Atomic design allows the designer/developer to think about each pattern and how it will get used within other components or pages in the site
    2. You can easily code a button on each page with different class names. However, if you think about how you are using the buttons you can consolidate these buttons into 1 class name and a handful of modifiers. Less CSS = better performance.
    3. You can learn more about the structure of the code with each pattern, rather than building it and then setting it and forgetting it (in the wise words of world- renowned Ron Popeil).
  • With thinking about reusability comes thinking about CSS structure
    1. CSS is another area that can turn into a rats nest if you bury a lot of class names within one another via Sass. I don’t suggest breaking each Sass partial into atoms, molecules, organisms, templates, and pages (although you could do that I guess). You should break down each Sass partial by component name (the same goes for JS before concatenation). That way it is easier to navigate to where you need to change CSS.
    2. Being that your HTML is based on component, you can do that with your CSS with classes. Start off with your base .button component. Then you can say, “Hey! I like headers and I like the color blue. Let’s put a blue button within the header.” You open up button.scss and you can either:
      • Make a modifier class called .button--blue if you use the button in more than just the header for example.Screen Shot 2017-02-07 at 10.27.16 AM
      • Or you can add a parent selector to the base button element. Using a parent selector like this allows you to focus on the button itself, rather than going to the header.scss Sass partial and sifting through all of the nested items before finding your button. It’s organized a a lot better since nesting child elements can get out of hand So the code would look like this:<code><a href="https://ianfrostweather.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-07-at-10.20.45-AM.png">
        Screen Shot 2017-02-07 at 10.26.38 AM
    3. And remember, commenting is a wonderful thing. It’s an annoying task to do, but it is totally worth it when it comes to comprehension. We just finished a big company’s design system, and I will tell you that commenting on our CSS allowed two of our colleagues to write documentation on components that were mostly built by Brad and me.
  •  Atomic design stretches its hand out to visual designers
    1. If there’s one thing that helps a lot with a project is a visual designer who knows how to code. Atomic design (and specifically Pattern Lab) allows a designer who wants to code the ability to learn it without the intimidation of a large mass of code. I know a couple folks who are visual designers at heart but know how to code and have used Pattern Lab to help out with projects.
    2. If you know how to code as a designer, you can just go straight into Pattern Lab and prototype what you would’ve comped out in Sketch or in a PSD. It decreases the amount of time it takes to go from image to code.
  • Pattern Lab is designing in code. Once prepped, it’s ready to bake.
    1. Once you have your templates and pages built with all of your components in Pattern Lab, you can import the code into your WordPress project or Drupal project and tweak the PL code to fit whatever language you are using for your CMS.

Atomic design is a great method to pick up (I swear Brad did not tell me to say that). It’s easy to learn it whether you are 10 years into creating the web or 2 years into it. The web is becoming a more and more modular place to work in and less so about big “pages.” We literally went to a JavaScript workshop the other day that taught similar aspects of using a modular workflow to organize JavaScript. There’s a reason I packed and shipped a bunch of Atomic Design books across the world. Atomic design is a great thing and will only get better with the help of all designers and developers out there!