KISS your UI

Atomic Design for your components framework

Web dev nowadays

We are building apps!
(not websites)

Those apps have complex UIs

Those UIs agregates a lot of elements

How could we maintain
a high level of abstraction
to avoid code nightmares?

In a galaxy far, far away…

Designer (n.) :
One that produces wireframes, moodboards, concepts, using… Components

Frontend Designer (n.) :
One that build interfaces with semantics and CSS frameworks that are… Components Oriented

Frontend Developer (n.) :
One that creates business logics using separation of concerns patterns supported by… Components Frameworks

We even made a standard called… WebComponents!

Hey...Wait a minute!

At the (very) beginning, I’m a Chemist

Precisely, I’m a Micro-biologist

We should get inspired by other disciplines

by Brad Frost

Atomic Design details all that goes into creating and maintaining robust design systems, allowing your organization to roll out higher quality, more consistent UIs faster than ever before.

Why “Atomic”?

  • Modules architecture
  • Components oriented
  • Methodology
  • Manifesto & Systemic Design


  • Smallest available elements
  • Basic building blocks
  • e.g. a button, a logo, a title…


  • Agregates of atoms
  • Fundamental units of a compound
  • Have their own properties
  • e.g. a header, a banner, a form field…


  • Combines molecules and/or atoms
  • Distinct sections of the UI
  • e.g. a form, a nav, a footer…


  • Group of organisms
  • Backbone of pages
  • e.g. a blueprint, a galery page…


  • A specific instance of a template
  • Highest level available
  • e.g. a homepage…
OKay... Easy boy...

From the Code

We write components

    <p>Hello {{name}}!</p>
module.exports = {
    data () {
        return {
            name: 'John Doe'
p {
    font-weight: 700;

Semantics matters!

    <atom-avatar :alt="name">
    <p>Hello {{name}}!</p>
  • JSX
  • Pug
  • Nunjucks
  • Swig

Externalize your templates!

at least, make them accessible outside

Load/Inject at build

module.export = {
    template: require('./atoms/avatar.html')
    data () {
        return {
            name: "John Doe"

Avoid CSS Cascading Vortex!

Use controlled scoped styles

<p>Hello <span class="atom__name">{{name}}</span></p>
.atom__name {
    font-weight: 700;

Keep your stuff organized

├── atoms
│   ├── feedback
│   │   ├── alert.vue
│   │   └── date.vue
│   └── images
│       ├── avatar.vue
│       └── logo.vue
├── molecules
│   ├── blocks
│   │   └── hero.vue
│   ├── forecast
│   │   └── preview.vue
│   ├── indicators
│   │   ├── forecast.vue
│   │   └── movements.vue
│   └── navigation
│       ├── breadcrumb.vue
│       └── panel.vue
├── organisms

Exploit your toolkit 🧰

  • (Web)Components
  • Naming patterns
  • Templates
<div class="container" role="application">
    <organisms-header />
    <router-view />
import OrganismsHeader from '~organisms/common/header'
export default {
    name: 'pages-app'
    components: { OrganismsHeader }
@import "uikit"
    @extend %font-style-main
    background-color: $white

The Grand Final

Pattern Lab

  • Based on Node.js®
  • Organize your components library
  • Generates/Exports builds
  • Mocks template with fixtures
  • Shows states/variations

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.

Load external templates in Pattern Lab

Run components demos

Use Functional Programming patterns
to build Context less components


  • Style Guide Engine
  • Rely on CSS Comments
  • Import markups from templates
  • Support States/Variants
  • Jamstack compliant




Your Custom Styles Library
(use @extend a lot)

How to use it 💸? By hand

your work consistent

Keep in mind to:

  • Separate concerns
  • Use strong naming patterns
  • Automate guides generation
    (Styleguides, Components guides, Storybooks…)

Share elements across realms

Help your team mates
m4dz's avatar

Paranoïd Web Dino · Tech Evangelist

alwaysdata logo



m4dz, CC BY-SA 4.0

Interleaf images

Courtesy of Unsplash and Pexels contributors


  • Layout icons are from Entypo+
  • Content icons are from FontAwesome


  • Cover Title: Sinzano
  • Titles: Argentoratum
  • Body: Mohave
  • Code: Fira Code


Powered by Reveal.js

Source code available at