Standard Framework CSS

Professional typography framework with responsive layouts, semantic colors, dark mode support, and mathematical precision based on the golden ratio. Build beautiful, accessible interfaces with pre-calculated font scales, spacing systems, and components.

Quick Start

Installation

npm install @zefish/standard

Include in Your Project

<link rel="stylesheet" href="/path/to/standard.min.css">
<script src="/path/to/standard.min.js" type="module"></script>

Or use the CDN:

<link rel="stylesheet" href="https://unpkg.com/@zefish/standard/css">
<script src="https://unpkg.com/@zefish/standard/js" type="module"></script>

With 11ty

import Standard from "@zefish/standard";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(Standard);
}

Then in your templates:

{% standardAssets %}

What’s Included

Foundation Systems

Components

Utilities & Helpers

Key Features

🎨 Color System

Light/dark theme with semantic colors that automatically adapt to user preferences.

<div class="bg-background text-foreground">
  Automatically uses system theme preference
</div>

📐 Typography

Carefully calibrated font scales based on mathematical ratios.

<h1>Perfect typography</h1>
<p>Sizes that work together harmoniously</p>

🔲 Responsive Grid

Mobile-first grid system with intuitive breakpoints.

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
  <!-- Responsive columns -->
</div>

📏 Vertical Rhythm

Consistent spacing throughout your entire design.

<article class="rhythm-block">
  <h2>Everything aligns perfectly</h2>
  <p>Spacing maintains baseline grid</p>
</article>

♿ Accessible

WCAG AA compliant from the start.

🌓 Dark Mode

Automatic theme switching respects user preferences.

@media (prefers-color-scheme: dark) {
  /* Dark theme automatically applied */
}

CSS Variables (Design Tokens)

Customize the framework by overriding CSS variables.

:root {
  /* Typography */
  --font-family-serif: Georgia, serif;
  --font-family-sans: -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.618;

  /* Colors */
  --color-background: #ffffff;
  --color-foreground: #000000;
  --color-accent: #0066cc;

  /* Spacing */
  --rhythm-unit: 1rem;
  --breakpoint-mobile: 480px;
  --breakpoint-small: 768px;
  --breakpoint-large: 1024px;
  --breakpoint-wide: 1440px;
}

Breakpoints

Mobile-first responsive design with four tiers:

Name Width Usage
Mobile 0 – 479px Default styles
Small 480px+ Tablets, small screens
Large 1024px+ Desktops
Wide 1440px+ Large displays

Learning Path

Beginner

  1. Getting Started – Installation and basics
  2. Typography – Understanding font scales
  3. Colors – Using the color system

Intermediate

  1. Grid Layout – Building responsive layouts
  2. Spacing & Rhythm – Vertical rhythm mastery
  3. Components – Using styled components

Advanced

  1. Customization – Overriding defaults
  2. Debug System – Finding layout issues
  3. Performance – Optimization tips

Browser Support

File Sizes

standard.min.css     ~12 KB gzipped
standard.min.js      ~2 KB gzipped

Features by Version

v0.10.52 includes:

Examples

Basic Layout

<body class="bg-background text-foreground">
  <header>
    <h1>Welcome</h1>
  </header>

  <main class="grid grid-cols-1 lg:grid-cols-3">
    <article class="rhythm-block">
      <h2>Content</h2>
      <p>Your article here</p>
    </article>

    <aside>
      <h3>Sidebar</h3>
      <p>Supporting content</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024</p>
  </footer>
</body>

Dark Mode Button

<button class="btn btn-primary">
  Click me!
</button>

<!-- Automatically themed based on system preference -->

Responsive Typography

<h1>Responsive Headline</h1>
<!-- Scales appropriately on mobile, tablet, desktop -->

<p class="text-lg">Large paragraph text</p>
<p class="text-sm">Small caption text</p>

Next Steps

Support