Atomic Design System architecture with SCSS, ITCSS
  • Introduction
  • Core principles
    • Atomic Design
    • ITCSS
    • Unifying ITCSS with ADS
    • Single Responsibility Principle (SRP)
    • Open / Close Principle (OCP)
  • Conventions
    • BEM : presentation
    • Our flavor of BEM
    • Prefixes
    • How to use the Modifier entity
    • How to use the Element entity
    • Media / responsives modifiers
    • General formatting
    • Declaration Orders
    • Comments
    • Naming things
    • File structure
    • Files names and block names
  • implementation guides
    • Settings and tools
    • Responsive and modularity rules
Powered by GitBook
On this page
  • A shared language
  • A bottom up approach

Was this helpful?

  1. Core principles

Atomic Design

PreviousIntroductionNextITCSS

Last updated 4 years ago

Was this helpful?

A shared language

Atomic design isn't a CSS architecture.

AD is a convention to organize the interfaces design patterns in a hierarchic system. It uses the Atoms / Molecules / Organisms allegory.

The goal is to share a language between designers, developers, stakeholders regardless of there technical background (technical teams, creative teams, stakeholders ...etc). AD was introduced by Brad Frost

A bottom up approach

ADS invite us to create the more global, smalls, atomics parts first and using them as building blocks for higher-level entities, and repeating the process to produce pages.

We will se later how we integrate ADS to our CSS architecture, and even slightly deviate from the original definition.

More informations about Atomic design :

a great article
the original documentation