Spectre.css

raw JSON →
0.5.9 verified Sat Apr 25 auth: no javascript maintenance

Spectre.css is a lightweight, responsive, and modern CSS framework (current stable v0.5.9, last released March 2020, maintenance mode). It provides a flexbox-based grid system, elegant components (buttons, forms, modals, navbars, etc.), and utility classes, all weighing in at ~10KB gzipped. Unlike full-featured frameworks like Bootstrap or Foundation, Spectre focuses on minimalism and simplicity, offering only essential styles without JavaScript dependencies. It supports Sass customization via SCSS variables and mixins, and is distributed as compiled CSS via CDN (unpkg, cdnjs) or package managers (npm, yarn, bower). Ideal for rapid prototyping or projects needing a clean, lightweight foundation with responsive layout and modern design.

Common errors

error Error: Cannot find module 'spectre.css' when using @import in SCSS ↓
cause Node.js resolution requires installing via npm and specifying exact path.
fix
Use '@import '~spectre.css/src/spectre';' in SCSS or install as dev dependency.
error Spectre icons not displaying, showing blank squares ↓
cause Missing spectre-icons.css stylesheet.
fix
Add '<link rel="stylesheet" href=".../spectre-icons.min.css">' after spectre.css.
error Grid columns not behaving as expected on mobile ↓
cause Missing viewport meta tag or incorrect column class syntax.
fix
Add '<meta name="viewport" content="width=device-width, initial-scale=1.0">' and use 'col-xs', 'col-sm', etc.
error Tooltip position is wrong or clipping ↓
cause Tooltip container may not have position: relative; or overflow hidden.
fix
Ensure the parent has 'position: relative;' and avoid overflow:hidden on ancestor.

Warnings

deprecated Spectre.css v0.5.0 removed the /dist folder; versions >=0.5.0 restore it but with different structure. ↓
fix Use 'docs/dist' folder for manual install or CDN links; avoid referencing old paths.
deprecated Icons have been moved to a separate GitHub repository (icons.css) as of v0.5.8. ↓
fix Include spectre-icons.css separately via CDN or npm package 'spectre.css' (icons are bundled in dist).
breaking Naming of position utilities changed in v0.5.4 to avoid conflicts (e.g., 'pos-relative' became 'position-relative'). ↓
fix Update class names: 'pos-*' to 'position-*'.
breaking Autocomplete component moved to Experimentals (spectre-exp.css) in v0.5.1. ↓
fix Include spectre-exp.css and use 'autocomplete' class prefix.
gotcha No JavaScript included; interactive components (modals, popovers, collapses) require manual JS implementation. ↓
fix Implement JavaScript glue code to toggle classes (e.g., 'active') on components.
gotcha Spectre.css uses CSS variables for customization only in SCSS source; precompiled CSS uses hardcoded values. ↓
fix Use SCSS compilation or override styles manually; CSS custom properties not available in dist.

Install

npm install spectre.css
yarn add spectre.css
pnpm add spectre.css

Imports

Quickstart

HTML file demonstrating Spectre.css grid, card component, and buttons using CDN links.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
  <title>Spectre Quickstart</title>
</head>
<body>
  <div class="container">
    <div class="columns">
      <div class="column col-6">
        <div class="card">
          <div class="card-header">
            <div class="card-title h5">Hello, Spectre!</div>
          </div>
          <div class="card-body">
            <p>This is a minimal example using the flexbox grid and card component.</p>
          </div>
          <div class="card-footer">
            <button class="btn btn-primary">Button</button>
            <button class="btn btn-link">Link</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
last verified Sat Apr 25
next check Fri Jul 24