Skip to content

Erick Jones

About Atomic Design and Web Components

Web Design has evolved pretty fast in the last years. I remember as if it was yesterday that we needed to cut 4 images to make rounded corners in web Elements. For those who think im speaking ‘greek’, take a look at this A List Apart article from 2003:

Ok, but thank god the border-radius saved us:

.myElement { border-radius: 3px; }

This is just a small Example of how the web was very restrict and how the professionals and students and researchers made the web a better place.

Every day somebody is studying and analysing the way we use the web and how to improve this. Now the web is not about a computer and which resolution we can use [ Yes, we did this. 800×600, 1024×768, which resolution can I use for my new project? I don’t feel pathetic when I remember this. Actually this makes me think that everything can be improved and technology can surprise us ]. Imagine if now with all sorts of devices we should think about all the possible existent resolutions… Not so productive, right? I think this will just get worst. Now we talk about components, modules and new forms to make pages and apps that are responsive, adaptative and smart.

Take a look at how Microsoft handle its internal processes and deliver content that is responsive and device independent in this article. For Dave Rupert, “Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.”. This insight is being noticed by many professionals and we should pay attention to what they are talking about.

As stated Stephen Hay: “We’re not designing pages, we’re designing systems of components .”

Brad Frost wrote a very interesting article about Atomic Design – A way to create systems from the ‘atoms’ till the organisms, delivering what is necessary and adapting when necessary. Modules, particles. For a device and user fractionated world, nothing makes more sense than a smart delivery.

Then comes in hand the Web Components. Something that already exist but hidden from your eyes in the Shadow DOM. To become more familiar with this concept I recommend the following talk from Zeno Rocha: A future called Web Components. A funny and interesting talk.

I am very optimistic about the present and the future of the web and how we are evolving to a more smart web. Is our mission to create and share our insights and help to make the web a better place. We can use Web components to bring to life things that we never thought before and this thing can become a standard like happened with the ‘accordion’, ‘select’, ‘date picker’, etc.

Let’s create, let’s use the abundant technology we have.

Further reading

CSS Tricks – A Guide to Web Components
Mozilla Hacks – The state of web Components