How We Adapted Atomic Design

A couple of years ago I was perusing the web when I came across a thought-provoking article written by the one and only Brad Frost. It is a concept that has spread like wildfire in the development industry and rightfully so.

In a day where the majority of websites are built using a CMS (Content Management System), our websites are becoming more and more modular. Since the web is changing, the way we write code should adapt so that we deliver the best code that we can. We must understand that “we are not designing pages. We’re designing systems of components” (Stephen Hay).

Enter Atomic Design

The ideas and philosophies behind Atomic Design have been created with these ideas in mind. At the backbone, “Atomic Design is (a) methodology for creating design systems” (Brad Frost). This methodology is comprised of 5 parts:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

As we look at these 5 parts, especially the first 3, we see that Atomic Design’s methodology relates highly to chemistry. What it is doing here is it is relating the building blocks of the web to the building blocks of all living things. That’s a short intro into what Atomic Design is, and I don’t want to go any further in the explanation of it then that.

The reason that I don’t want to get into more details is because my goal here is not to explain to you every detail of what Atomic Design is, but instead to let you know of a time it fell short. To fully explain where it fell short, let me tell you my own story with Atomic Design.

The Problem

After I had read Frost’s amazing article my juices were pumping and I couldn’t have been more exited to take it back to my team of developers. The team of developers that I worked with at that time comprised of a very diverse set of people from all different countries. Therefore I was interested to see how they would react when I presented it to them.

The next day came and I logged on to work all excited thinking “these guys are going to love this as much as I do!” The only problem was that when I presented it to them for their feedback, they weren’t 100% sold, and for a viable reason. The terminology was to hard for some to grasp.

See they totally bought into the core concepts of Atomic Design but when it came down to what each of those components were called, it didn’t make sense to them. The reason it didn’t make sense to them was because they had not learned with chemistry. Thus for them, it was too hard to relate these different terms to the overall big picture.

The Solution

What I so respect about that particular team is that even though they couldn’t pick up on all the terminology, they didn’t throw the concept out the door. Instead we rallied together to transform it to work for us.  The way we made it work for us is by changing the 5 parts that make it up while still maintaining the overall concept. Our goal was to come up with terms that made sense to us and anyone we would on board in the future.

So we began spit balling ideas when we all of a sudden we landed on a set of terms that I in particular think are genius:

  1. Foundations
  2. Materials
  3. Rooms
  4. Templates
  5. Pages

As you can see what we decided was to draw analogies from the process of building a structure. What we found was that just by tweaking these terms slightly, everyone was able to understand the full concepts behind what we were trying to implement.

Let’s Get Real

At the end of the day I’m not going to say that these same terms will work for everyone or that Atomic Design is flawed. This is just what worked for us.

I think what I learned the most, and what I hope you learn from this, is that we shouldn’t throw away great ideas just because some people on our team don’t understand them. Instead if our team is struggling, we should morph the ideas until they catch the big picture, thus allowing us to make better websites.

Create. Stop. Be Creative.


REVISION:

When I initially launched this post the title was “Where Atomic Design Fell Short”. I will be the first to let anyone know that I am not perfect and that I make mistakes. I am continually learning from advice from those around me. On Designer News Justin Barber commented that he thought my title was misleading and, after reading his reasons, I totally agree with him. Therefore I changed my title to be more accurate.

Again I want to thank Brad Frost for spurring on these ideas!

Advertisements

Vertically Align Anything

For this first week I want to give total props to Sebastian Ekström over at zerosixthree.se. He wrote an amazing blog post that has spurred me on to share this snippet even more.  Shall we begin?

…… Dramatic Pause ……

I think so!

Have you ever been in a situation where you just wanted to vertically align an element in the center of something and didn’t want to write out a bunch of code to do so? A year ago I found one of the most helpful code snippets I have ever found. Sebastian Ekström zerosixthree.se wrote an amazing post that shows by using the power of transform: translateY, you can vertically center align the way you have always dreamed of … with three lines of code (plus vendor prefixes)!

To do this we write:

.awesome-element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

To take this a step further we can use the power of SASS and write it as a mixin.

@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Then the only step you need to make after that is to add this to it’s parent container (this keeps things crisp):

.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Again an even better way to do this would be to make it a mixin:

@mixin parent-vertical-align {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Taking it a step further:

If you are wanting to help reduce bloat within your code (which I highly advise), you could use the SASS placeholder selector like so:

%parent-vertical-align {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

%vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.incredible-parent-element {
@extend %parent-vertical-align;
}

.awesome-child-element {
@extend %vertical-align;
}

And that’s it folks!

Demo:

Create. Stop. Be Creative.

Learning to Follow

Some of the most valuable advice that I have ever been given is that if I want to lead, I must first learn to follow. I think that applies to all aspects of life, but today I want to highlight a few agencies / individuals (both recent and past) that I have been following due to my enormous respect for their work:

  1. Focus Lab / Design
  2. Elegant Seagulls / Design
  3. Pixel Peach / Design
  4. The X-Team / Development
  5. Chris Coyier / Development
  6. Allan Peters / Design
  7. Green Chameleon / Design
  8. Haraldur Thorleifsson / Development

Are you following anyone? I would love to know! Post it in the comments so everyone can check it out.

Create. Stop. Be Creative.

Get Off Your Butt (Part 1)

Over the last 8 years of my journey of being a web designer and developer I have had dreams of things I would love to do. The sad thing is I kept making excuses of why I couldn’t do them. Thoughts such as … “I don’t have the time” … “I’m not experienced enough” … “Why would anyone listen” … “If I’m going to start doing things, I have to do everything custom” … rolled through my head. And I’m writing this post to say enough is enough.

I have come to grips with the fact that I may never be an industry leader, but that shouldn’t stop me or any of us from sharing our thoughts. Our experiences. Our struggles. Our victories. We can all learn from one another, but not unless we accept that it’s ok to fail. Growth will never be an option if we stay in our own bubble. If we never share our minds.

Can you imagine what the possibilities could be if we started to open up? Can you imagine what could happen if we started to tell our stories. Can you imagine what could happen if we left our egos at the door? Can you imagine what could happen if we started to be critical of how things are instead of just giving each other high-fives over Dribbble (don’t get me wrong, I love a good high-five). The possibilities are endless.

Abraham Lincoln once said, “things may come to those who wait, but only the things left by those who hustle.” My desire is for myself and others to stop waiting around. For example I have heard so many complaints from fellow designers and developers that our industry is becoming to cookie cutter. Every website looks the same. The sad thing is that I don’t see those same people who are complaining, doing anything about it. Instead they give up or just sit around. Let us not be a generation that just waits around. If you aren’t happy about something start to try and change it. If you have an idea you have been holding onto, build it. We have no excuse for just sitting around when so many opportunities surround us.

Let us take our industry by the horns and begin to make new paths. We have to stop making the “some day” excuse. “Some day” really just means never. It’s time to make a difference.

Create. Stop. Be Creative.