EmeraldCSS v2

EmeraldCSS v2 Documentation

A utility first css-framework with comprehensive container system and 12-column grid.

Quick Tip:This page is a perfect example of how to build beautiful interfaces using only EmeraldCSS v2 utility classes!

About `emerald-v2.css`

  • File Size: 27.0 KB (normal), 5.6 KB (gzipped)
  • Lines of Code: 1001 lines
  • CSS Reset: Minimal reset with box-sizing, margin, padding, and list styling
  • Variables: 100+ CSS custom properties
  • Utility Classes: 200+ utility classes for layout, typography, colors, and components

Benefits

  • Zero custom CSS - Pure utility-first approach
  • Responsive design - Built-in responsive classes
  • Grid system - 12-column grid with responsive breakpoints
  • Framework validation - Proves completeness of EmeraldCSS v2, comparable to bootsrap and tailwind

Page Structure

EmeraldCSS v2 follows a semantic HTML structure that's compatible with Tabler and Bootstrap patterns.

Semantic HTML Structure

<main>
  <header>  <!-- Navigation header (white background) -->
    <nav>
      <a href="#">Brand</a>
      <ul>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
  </header>
  <div>  <!-- Page wrapper (light gray background) -->
    <section>  <!-- Page header (content header) -->
      <h1>Page Title</h1>
    </section>
    <section>  <!-- Page body (main content) -->
      <p>Content goes here</p>
    </section>
  </div>
</main>

Framework Comparison

Tabler Structure (Class-based)

<div class="page">
  <div class="navbar">
    <div class="container">
      <a class="navbar-brand">Brand</a>
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link">Link</a></li>
      </ul>
    </div>
  </div>
  <div class="page-wrapper">
    <div class="page-header">
      <div class="container">
        <div class="row">
          <div class="col">
            <h1 class="page-title">Page Title</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <p>Content goes here</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap Structure

  • .container → .row → .col
  • .navbar (separate from main content)

EmeraldCSS v2 Structure (Two Forms)

Form 1: Tabler-like with Classes
<main class="page">
  <header class="navbar">
    <div class="container">
      <a class="navbar-brand">Brand</a>
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link">Link</a></li>
      </ul>
    </div>
  </header>
  <div class="page-wrapper">
    <section class="page-header">
      <div class="container">
        <h1>Page Title</h1>
      </div>
    </section>
    <section class="page-body">
      <div class="container">
        <p>Content goes here</p>
      </div>
    </section>
  </div>
</main>
Form 2: Semantic Class-less Structure
<main>
  <header>
    <div class="container">
      <a>Brand</a>
      <nav>
        <ul>
          <li><a>Link</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div>
    <section>
      <div class="container">
        <h1>Page Title</h1>
      </div>
    </section>
    <section>
      <div class="container">
        <p>Content goes here</p>
      </div>
    </section>
  </div>
</main>
Structure Breakdown
  • Main Container: main (or main.page)
  • Navigation: header (or header.navbar)
  • Page Wrapper: div (or div.page-wrapper)
  • Page Header: section:first-child (or section.page-header)
  • Page Body: section:not(:first-child) (or section.page-body)
CSS Selector Logic
  • main > header - Navigation header styling
  • main > div - Page wrapper (light gray background)
  • main > div > section:first-child - Page header (content header)
  • main > div > section:not(:first-child) - Page body (main content)

Color Scheme

  • Navigation Header: White background with border-bottom
  • Page Wrapper: Light gray background (var(--color-light))
  • Page Header: Transparent background
  • Page Body: Transparent background

Spacing

  • Page Header: Margin-top only (var(--rem-8))
  • Page Body: Margin top and bottom (var(--rem-8))

Root Variables

EmeraldCSS v2 uses CSS custom properties (variables) for consistent theming and easy customization.

Total Variables: 49 variables across 6 sub-sections

  • Colors: 13 variables
  • Typography: 7 variables
  • Fonts: 4 variables
  • Spacing: 10 variables
  • Border Radius: 4 variables
  • Percentages: 12 variables
  • Breakpoints: 7 variables

Color Variables (13 variables)

  • --color-primary: #0969da - GitHub blue, primary brand color
  • --color-secondary: #6f42c1 - Purple, secondary brand color
  • --color-success: #1a7f37 - Green, success states
  • --color-danger: #cf222e - Red, error states
  • --color-warning: #9a6700 - Orange, warning states
  • --color-info: #17a2b8 - Teal, informational states (Tabler-inspired)
  • --color-azure: #4299e1 - Azure blue, additional accent color
  • --color-muted: #656d76 - Gray, secondary text
  • --color-dark: #1f2328 - Dark gray, primary text
  • --color-light: #f6f8fa - Light gray, backgrounds
  • --color-white: #ffffff - Pure white
  • --color-border-1: #e1e4e8 - Light gray, borders

CSS Reset

EmeraldCSS v2 includes a minimal CSS reset that normalizes browser defaults while preserving useful styling.

Reset Features

  • Box-sizing: Border-box for all elements
  • Margin/Padding: Reset to 0 for consistent spacing
  • List Styling: Proper bullet points and indentation
  • Minimal Approach: Only resets what's necessary

List Demo

Unordered List

  • First item with proper bullet point
  • Second item with spacing
  • Third item with consistent styling

Ordered List

  1. First numbered item
  2. Second numbered item
  3. Third numbered item

Base Styles

EmeraldCSS v2 provides consistent base styles for HTML elements.

Total Rules: 2 base style rules (html, body)

Font Family Fallback Chain

The --font-family variable uses a comprehensive fallback chain:

  1. -apple-system - Apple's system font (San Francisco on macOS/iOS)
  2. BlinkMacSystemFont - Chrome's system font on macOS
  3. 'Segoe UI' - Microsoft's system font (Windows 10+)
  4. 'Noto Sans' - Google's web font (cross-platform)
  5. 'Helvetica Neue' - Apple's Helvetica variant
  6. Helvetica - Classic Helvetica
  7. Arial - Universal fallback
  8. sans-serif - Generic sans-serif fallback

Font Demo

System Font Stack: This text uses the complete font fallback chain. On macOS, it will use San Francisco (-apple-system). On Windows, it will use Segoe UI. On other systems, it will fall back to Noto Sans, Helvetica, or Arial.

Typography

EmeraldCSS v2 provides a comprehensive typography system with consistent font sizes, weights, and line heights.

Heading 1 - Main Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Minor Heading

Heading 5 - Small Heading
Heading 6 - Smallest Heading

This is a paragraph with bold text and italic text. It demonstrates the default body text styling with proper line height and spacing.

This is muted text for secondary information or less important content.

This is small text for captions, footnotes, or fine print.

Text Utilities

EmeraldCSS v2 provides text utility classes for font-sizes and font weights.

font-size

Extra Small Text (.text-xs)
Small Text (.text-sm)
Base Text (.text-base)
Large Text (.text-lg)
Extra Large Text (.text-xl)
2XL Text (.text-2xl)
3XL Text (.text-3xl)
4XL Text (.text-4xl)

font-weight

Normal Weight (.font-normal)
Medium Weight (.font-medium)
Semibold Weight (.font-semibold)
Bold Weight (.font-bold)

Color System

EmeraldCSS v2 features a modular color system with semantic tokens and an efficient generic palette system that reduces file size while providing maximum flexibility.

Semantic Colors

Core semantic colors for consistent UI patterns across all applications.

Primary
Secondary
Success
Danger
Warning
Info
Azure
Muted

Generic Color Palette System

EmeraldCSS v2 uses a revolutionary generic color palette system that reduces file size by 22% while providing maximum flexibility. Instead of including all color palettes in the main CSS, you can load only the palette you need.

How It Works

The system uses generic variable names (--color-50 to --color-900) that work with any palette. The main CSS includes a default blue palette, and additional palettes override these variables when loaded.

Default Blue Palette (Material Design)

Complete Material Design blue palette with 14 shades from lightest to darkest:

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

Palette Override System

Load additional palettes by including them after the main CSS file. Each palette file is only ~500 bytes:

<!-- Default Blue Palette (included in main CSS) -->
<link rel="stylesheet" href="/emerald-v2.css">

<!-- Override with Red Palette -->
<link rel="stylesheet" href="/palettes/emerald-palette-red.css">

<!-- Override with Purple Palette -->
<link rel="stylesheet" href="/palettes/emerald-palette-purple.css">

<!-- Override with Green Palette -->
<link rel="stylesheet" href="/palettes/emerald-palette-green.css">

Available Palettes (29 Total)

Complete Material Design color palette collection plus popular brand palettes - each palette includes 14 shades (50-900 + A100-A700) plus brand-specific body backgrounds and semantic colors:

Blue (Default)

Included in main CSS

Primary Blue
Red

emerald-palette-red.css

Primary Red
Pink

emerald-palette-pink.css

Primary Pink
Purple

emerald-palette-purple.css

Primary Purple
Deep Purple

emerald-palette-deep-purple.css

Deep Purple
Indigo

emerald-palette-indigo.css

Primary Indigo
Light Blue

emerald-palette-light-blue.css

Light Blue
Cyan

emerald-palette-cyan.css

Primary Cyan
Teal

emerald-palette-teal.css

Primary Teal
Green

emerald-palette-green.css

Primary Green
Light Green

emerald-palette-light-green.css

Light Green
Lime

emerald-palette-lime.css

Primary Lime
Yellow

emerald-palette-yellow.css

Primary Yellow
Amber

emerald-palette-amber.css

Primary Amber
Orange

emerald-palette-orange.css

Primary Orange
Deep Orange

emerald-palette-deep-orange.css

Deep Orange
Brown

emerald-palette-brown.css

Primary Brown
Grey

emerald-palette-grey.css

Primary Grey
Blue Grey

emerald-palette-blue-grey.css

Blue Grey

Brand Palettes

Popular brand color palettes with authentic brand colors and matching body backgrounds:

GitHub

emerald-palette-github.css

GitHub
GitHub Dark

emerald-palette-github-dark.css

GitHub Dark
Azure

emerald-palette-azure.css

Azure
YouTube

emerald-palette-youtube.css

YouTube
Twitter

emerald-palette-twitter.css

Twitter
Instagram

emerald-palette-instagram.css

Instagram
Apple

emerald-palette-apple.css

Apple
Tabler

emerald-palette-tabler.css

Tabler
Facebook

emerald-palette-facebook.css

Facebook
LinkedIn

emerald-palette-linkedin.css

LinkedIn
Google

emerald-palette-google.css

Google

Generic Utility Classes

All palettes use the same utility class names, making it easy to switch between palettes:

Background Colors

.bg-50 to .bg-900 and .bg-A100 to .bg-A700

Text Colors

.text-50 to .text-900 and .text-A100 to .text-A700

Usage Examples
<!-- These classes work with any palette -->
<div class="bg-500 text-white">Primary Color</div>
<div class="bg-100 text-900">Light Background</div>
<div class="bg-A200 text-white">Accent Color</div>

File Size Benefits

  • Main CSS: 27.0KB raw, 5.6KB gzipped (22% smaller than traditional approach)
  • Palette Files: ~500 bytes each (only load what you need)
  • Total Savings: 6KB raw, 1KB gzipped compared to including all palettes
  • Modular: Load only the palette you need for your project

Container System

EmeraldCSS v2 provides responsive containers with different max-widths and breakpoints.

Default Container (1280px max-width)
Small Container (640px max-width)
Medium Container (768px max-width)
Large Container (1024px max-width)
Extra Large Container (1280px max-width)

12-Column Grid System

EmeraldCSS v2 includes a Bootstrap-like 12-column grid system with responsive breakpoints.

Full Width (col-12)
Half Width (col-6)
Half Width (col-6)
One Third (col-4)
Two Thirds (col-8)
Quarter (col-3)
Quarter (col-3)
Quarter (col-3)
Quarter (col-3)

Flexbox Utilities

Comprehensive flexbox utilities for layout control.

Flex Direction

Row 1
Row 2
Row 3
Column 1
Column 2
Column 3

Justify Content

Start
Start
Center
Center
End
End
Between
Between

Spacing Utilities

EmeraldCSS v2 provides comprehensive spacing utilities for margins and padding using CSS variables.

Margin Utilities

All Sides (m-0 to m-4)

m-0
m-1
m-2
m-3
m-4

Horizontal (mx-0 to mx-4)

mx-0
mx-1
mx-2
mx-3
mx-4

Vertical (my-0 to my-4)

my-0
my-1
my-2
my-3
my-4

Individual Sides

mt-2
mb-2
ml-2
mr-2

Padding Utilities

All Sides (p-0 to p-4)

p-0
p-1
p-2
p-3
p-4

Horizontal (px-0 to px-4)

px-0
px-1
px-2
px-3
px-4

Vertical (py-0 to py-4)

py-0
py-1
py-2
py-3
py-4

Individual Sides

pt-2
pb-2
pl-2
pr-2

Spacing Scale

  • 0: 0 (no spacing)
  • 1: 0.25rem (4px)
  • 2: 0.5rem (8px)
  • 3: 0.75rem (12px)
  • 4: 1rem (16px)

Total Utilities: 60 spacing utility classes (30 margin + 30 padding)

Form Controls

EmeraldCSS v2 provides comprehensive form styling with utility classes for all form elements.

Form Elements Comparison

Without Form Classes

Checkbox option
Radio option 1
Radio option 2

With Form Classes

Button Styles

Button Variants

Button Outlines

Button Sizes

Button States

Form Layout Examples

Horizontal Form

Form Validation States

Looks good!
Please provide a valid input.
Please select a valid option.

Form Utility Classes

  • .form-control - Styles text inputs, textareas, and select elements
  • .form-select - Styles select dropdowns
  • .form-check - Container for checkboxes and radio buttons
  • .form-check-input - Styles checkbox and radio inputs
  • .form-check-label - Styles labels for checkboxes and radios
  • .form-switch - Creates toggle switch appearance
  • .form-label - Styles form labels
  • .col-form-label - Styles labels in horizontal forms
  • .is-valid - Applies valid state styling
  • .is-invalid - Applies invalid state styling
  • .valid-feedback - Styles success messages
  • .invalid-feedback - Styles error messages

Navigation

EmeraldCSS v2 provides navigation components using the grid and flexbox utilities.

Framework Comparison

How EmeraldCSS v2 compares to Bootstrap and Tabler CSS frameworks.

Feature Comparison

  • Container: Responsive containers (.container, .container-sm, .container-md, .container-lg, .container-xl) with CSS variables vs Bootstrap's responsive containers
  • Grid System: 12-column grid with CSS variables and responsive breakpoints vs Bootstrap's standard grid
  • Flexbox: .d-flex, .flex-1, .justify-content-*, .align-items-* vs Bootstrap's flexbox utilities
  • Gap Utilities: .gap-1 to .gap-8 with responsive variants (.gap-sm-*, .gap-md-*, .gap-lg-*)
  • Colors: CSS custom properties with semantic tokens and modular palette system vs theme colors
  • Typography: CSS custom properties for all values with utility classes vs utility-only approach
  • Cards: .card (minimal, consistent) with semantic HTML support vs comprehensive card systems
  • Responsive: Mobile-first with CSS variables and responsive utilities vs mobile-first approach
  • Spacing: Comprehensive margin/padding utilities (.m-0 to .m-4, .p-0 to .p-4) with directional variants
  • Components: Form controls, buttons, modals with CSS variables vs pre-styled components