Foundation CSS

A lightweight, atomic-first CSS framework for building fast, accessible, and maintainable web interfaces.

Get Started View on GitHub
⚡

Lightweight

Only 19KB gzipped. Import only what you need with modular SCSS architecture to reduce even more.

♿

Accessible

Built with accessibility in mind. Semantic HTML, keyboard navigation, and screen reader support.

📱

Responsive

Mobile-first approach with consistent breakpoints. Works perfectly on all devices.

Philosophy

🔗

Created in 2019 and now open source, Foundation CSS was born from a simple frustration: existing CSS frameworks were either too heavy, too opinionated, or not flexible enough.

Inspired by Stacks and BBC GEL guidelines, Foundation CSS follows atomic design principles where every class is an independent, composable building block.

Our goal is to help you create beautiful, readable interfaces quickly that adapt correctly to all devices and are accessible to all people. Whether you're building a simple website or a complex web application, Foundation CSS provides the foundation for consistent, scalable design systems.

Atomic CSS vs Components

🔗

Foundation CSS excels at rapid prototyping and one-off styling, but it doesn't prevent you from creating traditional CSS components for repeated elements. Here's when to use each approach:

✅ Use Atomic Classes

  • • Quick prototypes and layouts
  • • One-off styling needs
  • • Responsive adjustments
  • • Spacing and typography
  • • Utility styling (colors, borders, etc.)

🏗️ Create Components

  • • Repeated UI elements (buttons, cards, forms)
  • • Complex interactions and animations
  • • When atomic classes become too verbose
  • • Brand-specific styling
  • • Performance-critical components

Installation

🔗

NPM Package

npm install @enodo/foundation-css

Full Usage

@use "@enodo/foundation-css";

CDN (for quick testing)

<link rel="stylesheet" href="https://unpkg.com/@enodo/foundation-css@latest/dist/index.css">

Modular Imports

Import only what you need to optimize your bundle size:

@use "@enodo/foundation-css/spacing-units";
@use "@enodo/foundation-css/colors";
@use "@enodo/foundation-css/typographies";
@use "@enodo/foundation-css/cursors";
// Import only the modules you need

Customization

Customize the framework by overriding variables:

@use "@enodo/foundation-css" with (
  $backgrounds: (
    size: (
      auto,
      cover,
      contain,
    ),
    repeat: (
      repeat,
      no-repeat,
      repeat-x,
      repeat-y,
    ),
    position: (
      center,
      top,
      bottom,
      left,
      left-top,
      left-bottom,
      right,
      right-top,
      right-bottom,
    ),
    attachment: (
      fixed,
      local,
      scroll,
    ),
  ),
  $borders: (
    xs: 3px,
    sm: 5px,
    md: 8px,
    lg: 16px,
    xl: 24px,
  ),
  $box-shadows: (
    none: none,
    sm: (
      0 1px 2px hsla(0deg, 0%, 0%, 0.05),
      0 1px 4px hsla(0deg, 0%, 0%, 0.05),
      0 2px 8px hsla(0deg, 0%, 0%, 0.05),
    ),
    md: (
      0 1px 3px hsla(0deg, 0%, 0%, 0.06),
      0 2px 6px hsla(0deg, 0%, 0%, 0.06),
      0 3px 8px hsla(0deg, 0%, 0%, 0.09),
    ),
    lg: (
      0 1px 4px hsla(0deg, 0%, 0%, 0.09),
      0 3px 8px hsla(0deg, 0%, 0%, 0.09),
      0 4px 13px hsla(0deg, 0%, 0%, 0.13),
    ),
    xl: (
      0 10px 24px hsla(0deg, 0%, 0%, 0.05),
      0 20px 48px hsla(0deg, 0%, 0%, 0.05),
      0 1px 4px hsla(0deg, 0%, 0%, 0.1),
    ),
  ),
  $breakpoints: (
    sm: 600px,
    md: 1008px,
    lg: 1280px,
  ),
  $colors: (
    light: (
      "main": #fff,
      "025": #f9f9f9,
      "050": #f1f2f7,
      "075": #eaecf2,
      "100": #e1e3e8,
      "200": #c8c8d5,
      "300": #a9a9bf,
      "400": #8b8da8,
      "500": #6b6e94,
      "600": #4f517d,
      "700": #30336b,
      "800": #27294f,
      "900": #181a34,
    ),
    green: (
      "main": #4bdc9f,
      "100": #e8f8f2,
      "200": #d1f1e5,
      "300": #9ee6c7,
      "400": #4bdc9f,
      "500": #2bc885,
      "600": #1a8f5f,
    ),
    red: (
      "main": #ff855c,
      "100": #ffe8e0,
      "200": #ffd1c2,
      "300": #ffb399,
      "400": #ff855c,
      "500": #ff6b33,
      "600": #e54d1a,
    ),
    orange: (
      "main": #ffb55c,
      "100": #fff4e6,
      "200": #ffe9cc,
      "300": #ffd699,
      "400": #ffb55c,
      "500": #ff9f1f,
      "600": #e6850a,
    ),
    yellow: (
      "main": #ffd749,
      "100": #fffce6,
      "200": #fff9cc,
      "300": #fff299,
      "400": #ffd749,
      "500": #ffcc1a,
      "600": #e6b800,
    ),
    blue: (
      "main": #4a90e2,
      "100": #e6f2ff,
      "200": #cce5ff,
      "300": #99ccff,
      "400": #4a90e2,
      "500": #2e7ce6,
      "600": #1a5bb3,
    ),
    purple: (
      "main": #da93f3,
      "100": #f4e6ff,
      "200": #e9ccff,
      "300": #d399ff,
      "400": #da93f3,
      "500": #c266e6,
      "600": #a633cc,
    ),
    pink: (
      "main": #ff92b9,
      "100": #ffe6f0,
      "200": #ffcce1,
      "300": #ff99c2,
      "400": #ff92b9,
      "500": #ff66a3,
      "600": #e6337a,
    ),
    teal: (
      "main": #20c997,
      "100": #e6faf5,
      "200": #ccf5eb,
      "300": #99ebd7,
      "400": #20c997,
      "500": #1aa085,
      "600": #147a66,
    ),
  ),
  $cursors: auto, default, pointer, wait, move, not-allowed, help, text, grab, grabbing,
  $displays:
    block, grid, inline-grid, inline, inline-block, flex, inline-flex, none, table, table-cell,
    table-row, unset,
  $pointer-events: auto, none,
  $user-selects: auto, none,
  $user-drags: auto, none,
  $list-styles: disc, decimal, inherit,
  $list-positions: inside, outside,
  $object-fit: contain, cover, fill, none,
  $opacities: (0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100),
  $opacities-hover: (0, 5, 50, 80, 100),
  $opacities-focus: (100),
  $positions: absolute, fixed, relative, static, sticky, unset,
  $spacing-units: (
    1: 4px,
    2: 8px,
    3: 12px,
    4: 16px,
    5: 20px,
    6: 24px,
    7: 32px,
    8: 40px,
    9: 48px,
    10: 56px,
    11: 64px,
    12: 72px,
    13: 80px,
    14: 120px,
    15: 160px,
    16: 200px,
  ),
  $su-full: 1008px, // 996
  $su-step: math.div($su-full, 12),
  $font-families: (
    sans: (
      system-ui,
      -apple-system,
      "Segoe UI",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "Noto Sans",
      "Liberation Sans",
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji",
    ),
    mono: (
      "SFMono-Regular",
      "Consolas",
      "Liberation Mono",
      "Menlo",
      "Courier",
      monospace,
    ),
  ),
  $base-font-size: 16px,
  $font-sizes:
    atlas, elephant, imperial, royal, foolscap, canon, trafalgar, paragon, double-pica, great-primer,
    body-copy, pica, long-primer, brevier, minion,
  $font-weights: 300, 400, 500, 600, 700, 800, 900,
  $font-styles: normal, italic, unset,
  $text-aligns: left, center, right, justify, unset,
  $text-decorations: none, underline, line-through,
  $text-transforms: capitalize, lowercase, uppercase, none, unset,
  $white-spaces: normal, nowrap, pre, pre-wrap, pre-line, unset,
  $word-breaks: normal, break-all, keep-all, inherit, initial, unset,
  $overflow-wraps: normal, break-word, inherit, initial, unset,
  $word-wraps: break-word,
  $hyphens: none, auto, unset,
  $vertical-aligns: baseline, bottom, middle, sub, super, text-bottom, text-top, top, unset,
  $z-indexes: (
    hide: -1,
    base: 0,
    selected: 25,
    active: 50,
    dropdown: 1000,
    popover: 2000,
    tooltip: 3000,
    banner: 4000,
    nav: 5000,
    nav-fixed: 5050,
    modal-bg: 9000,
    modal: 9050,
  )
);

Quick Examples

🔗

Responsive Card Layout

<div class="d-grid grid__1 sm:grid__2 lg:grid__3 g4">
  <div class="bg-white bs-md bar-lg p4">
    <h3 class="fs-h3 fw-bold mb3">Card Title</h3>
    <p class="fc-light-700 lh-relaxed">Card content goes here.</p>
  </div>
</div>

Interactive Button

<button class="
  d-inline-flex ai-center jc-center
  bg-blue fc-white
  p3 bar-sm fw-500
  h:bg-blue-600 f:bg-blue-700
  t
">
  Click Me
</button>

Typography Scale

<h1 class="fs-canon fw-bold mb4">Main Heading</h1>
<h2 class="fs-trafalgar fw-600 mb3">Section Heading</h2>
<p class="fs-body-copy fc-light-700 lh-relaxed">
  Body text with optimal line height for readability.
</p>

Key Features

🔗

🎨 Design System Ready

  • • 16 Spacing Units for consistent rhythm
  • • 15 Typography sizes with semantic naming
  • • Comprehensive color system with variations
  • • Consistent border radius and shadows

📱 Mobile-First Responsive

  • • Breakpoints: 600px, 1008px, 1280px
  • • Conditional classes: sm:, md:, lg:
  • • Hover states: h: prefix
  • • Focus states: f: prefix

♿ Accessibility Focused

  • • Rem-based units for text scaling
  • • High contrast color combinations
  • • Keyboard navigation support
  • • Screen reader friendly

⚡ Performance Optimized

  • • Modular architecture
  • • Tree-shakeable imports
  • • Minimal CSS footprint
  • • No JavaScript dependencies

Creating Components

🔗

Create custom components using Foundation CSS variables for consistency: 

/* Use Foundation CSS custom properties */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--br-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: var(--su3) var(--su5);  /* 12px 20px */
}

.button__primary {
  background-color: var(--blue);
  color: var(--light);
}

.button__primary:hover {
  background-color: var(--blue-600);
}

.button__small {
  padding: var(--su2) var(--su3);  /* 8px 12px */
  font-size: 0.875rem;
}

.button__large {
  padding: var(--su4) var(--su7);  /* 16px 32px */
  font-size: 1.125rem;
}

This approach ensures consistency with your design system's spacing scale while creating reusable, maintainable components.

Next Steps

🔗

Conditional Classes

Learn about responsive breakpoints, hover states, and focus management.

Sizing Concepts

Understand spacing units, typography scale, and responsive design principles.

Color Palette

Understand the color system, accessibility, and customization principles.

Color Classes

Learn how to use color utility classes for text, backgrounds, and borders.

Typography

Discover the typography scale and semantic naming conventions.