spectre.css

library0.5.9jsnpmunverified

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.

web-framework

npm install spectre.css

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SPECTRE.CSS

spectre.css

web-frameworkjavascriptv0.5.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

spectre.css

✓ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">

✗ <link rel="stylesheet" href="spectre.css">

Include in HTML head; CDN link recommended for production. For development, use npm import.

spectre-icons.css

✓ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

✗ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">

Only needed if using icon classes; not included in main spectre.css.

spectre-exp.css

✓ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">

✗ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">

Optional experimental components (autocomplete, calendars, etc.); load after spectre.css.

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>

Debug

Known issues

deprecatedSpectre.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.

affects: >=0.5.0

deprecatedIcons 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).

affects: >=0.5.8

breakingNaming 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-*'.

affects: 0.5.4

breakingAutocomplete component moved to Experimentals (spectre-exp.css) in v0.5.1.

fix

Include spectre-exp.css and use 'autocomplete' class prefix.

affects: >=0.5.1

gotchaNo JavaScript included; interactive components (modals, popovers, collapses) require manual JS implementation.

fix

Implement JavaScript glue code to toggle classes (e.g., 'active') on components.

affects: >=0.0.0

gotchaSpectre.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.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'spectre.css' when using @import in SCSS

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.

Spectre icons not displaying, showing blank squares

Missing spectre-icons.css stylesheet.

fix

Add '<link rel="stylesheet" href=".../spectre-icons.min.css">' after spectre.css.

Grid columns not behaving as expected on mobile

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.

Tooltip position is wrong or clipping

Tooltip container may not have position: relative; or overflow hidden.

fix

Ensure the parent has 'position: relative;' and avoid overflow:hidden on ancestor.

Upgrade

Version history

0.5.9latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/picturepan2/spectre ↗

packagehttps://www.npmjs.com/package/spectre.css ↗

homepagehttps://picturepan2.github.io/spectre ↗