Atomic Design

Atomic Design Methodology

Overview

Atomic Design is a methodology composed of five distinct levels:

Atoms
Molecules
Organisms
Templates
Pages

1. Atoms

The basic building blocks of matter. Applied to web interfaces, atoms are:

Examples:

HTML Elements

<!-- Button Atom -->
<button class="btn-primary">Click Me</button>

<!-- Input Atom -->
<input type="text" class="input-field" />

<!-- Label Atom -->
<label class="form-label">Username</label>

Characteristics:

HTML tags
Form labels
Input fields
Buttons
Color palettes
Typography
Animations
Layout variables
Grid systems

2. Molecules

Groups of atoms bonded together, functioning as a unit.

Example:

<!-- Search Form Molecule -->
<form class="search-form">
  <label for="search">Search</label>
  <input type="text" id="search" placeholder="Enter search term..." />
  <button type="submit">Search</button>
</form>

<!-- Card Header Molecule -->
<div class="card-header">
  <img src="avatar.jpg" alt="User avatar" />
  <h3 class="title">Card Title</h3>
  <span class="date">Posted on: 12/02/2024</span>
</div>

Common Molecules:

Search forms
Navigation menus
Card headers
Media objects
Input groups

3. Organisms

Groups of molecules joined together to form relatively complex, distinct sections.

Example:

<!-- Header Organism -->
<header class="site-header">
  <div class="logo">
    <img src="logo.svg" alt="Site Logo" />
  </div>
  <nav class="main-nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  <form class="search-form">
    <input type="search" placeholder="Search..." />
    <button type="submit">Search</button>
  </form>
</header>

<!-- Product Card Organism -->
<article class="product-card">
  <div class="card-header">
    <img src="product.jpg" alt="Product Image" />
    <h2>Product Name</h2>
  </div>
  <div class="card-body">
    <p class="description">Product description goes here...</p>
    <div class="price">$99.99</div>
  </div>
  <div class="card-footer">
    <button class="btn-primary">Add to Cart</button>
    <button class="btn-secondary">Save for Later</button>
  </div>
</article>

Common Organisms:

Headers
Footers
Product cards
Blog posts
Comment sections
Feature sections

4. Templates

Page-level objects that place components into a layout and articulate the design's underlying content structure.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog Template</title>
</head>
<body>
    <!-- Header Organism -->
    <header class="site-header">
        <!-- Header content -->
    </header>

    <main class="content-area">
        <div class="container">
            <!-- Article Grid -->
            <section class="article-grid">
                <!-- Article Card Organisms -->
            </section>

            <!-- Sidebar -->
            <aside class="sidebar">
                <!-- Sidebar content -->
            </aside>
        </div>
    </main>

    <!-- Footer Organism -->
    <footer class="site-footer">
        <!-- Footer content -->
    </footer>
</body>
</html>

Characteristics:

Page layouts
Content structure
Component placement
Grid systems
Responsive behavior

5. Pages

Specific instances of templates that represent the actual content.

Example:

<!-- Home Page -->
<header class="site-header">
    <h1>Welcome to TechBlog</h1>
    <nav><!-- Specific navigation items --></nav>
</header>

<main>
    <article class="featured-post">
        <h2>Latest in AI Technology</h2>
        <p>Specific content about AI...</p>
    </article>
    
    <section class="recent-posts">
        <!-- Actual blog post content -->
    </section>
</main>

File Structure Example

src/
├── components/
│   ├── atoms/
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Typography/
│   ├── molecules/
│   │   ├── SearchForm/
│   │   ├── NavigationMenu/
│   │   └── CardHeader/
│   ├── organisms/
│   │   ├── Header/
│   │   ├── Footer/
│   │   └── ProductCard/
│   └── templates/
│       ├── BlogPost/
│       ├── ProductPage/
│       └── Homepage/
└── pages/
    ├── Home/
    ├── About/
    └── Contact/

Best Practices

1. Component Organization

Keep atoms as simple as possible
Maintain clear documentation
Use consistent naming conventions
Create reusable components
Implement proper props structure

2. Design System Integration

Maintain a style guide
Use CSS variables
Implement consistent spacing
Define breakpoints
Create component variants

3. Development Workflow

Build from atoms up
Test components in isolation
Document component usage
Consider accessibility
Maintain responsive design

4. Version Control

Track component changes
Maintain changelog
Use semantic versioning
Document breaking changes
Provide migration guides

PreviousStudents (Winter 2024)NextPen-Project-People

Last updated 6 months ago