Skip to content
Get packs

Spectre.css

A small CSS framework with ready-made styles, a flexbox grid, and components for web pages.picturepan2/spectre

GitHub Download v0.5.9
Stars
11.3k
Forks
776
Licence
MIT
Language
CSS
Last update
2.6 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Spectre.css is a CSS framework: a set of pre-written stylesheets that give web pages a consistent look and a responsive, flexbox-based layout system. It includes base styles, form and button elements, and components such as cards, modals, tabs, and navbars. The README describes it as lightweight, at roughly 10KB gzipped, and it can be customized with a Sass/Scss compiler.

  • Add a responsive grid and styled buttons, forms, and cards to a static website
  • Build a simple admin page or dashboard layout with the navbar, tabs, and tables components
  • Compile a custom version of the framework with Sass to match a project's own design
  • Load the compiled stylesheet from a CDN such as unpkg or cdnjs for a quick prototype

Great for

  • Developers who want a small, ready-made base for a simple website or web app
  • Teams that prefer plain CSS classes over a heavier JavaScript-driven UI library
  • Projects that need a flexbox grid and common components without a large dependency
  • People who want to customize a framework by compiling their own Sass build

Not ideal for

  • Projects that need a large ecosystem of JavaScript-driven components, since the README focuses on CSS and does not describe JS widgets beyond CSS-only effects
  • Projects that must support older browsers well, since the README says Spectre is designed for modern browsers and only partially supports Internet Explorer 10+
  • Teams wanting a maintained, actively developed project, since the last push shown is April 2024 and the latest release is v0.5.9
Step-by-step guide: how to use Spectre.cssInstall, first run, examples, tips and FAQs
Spectre.css alternativesBootstrap vs Spectre.cssBulma vs Spectre.cssSpectre.css vs Tailwind CSS

How to get it

  1. 1

    Install with a package manager

    Install with NPM

    $ npm install spectre.css --save

    Install with Yarn

    $ yarn add spectre.css
  2. 2

    Run it

    • Install the package with NPM or Yarn, or download the compiled spectre.min.css file
    • Add a link tag for spectre.min.css in the head of your HTML page
    • Or use the unpkg CDN link in the head of your page instead of a local file
    • Open the HTML page in a browser and check the styles are applied
    • Browse the documentation site for examples of elements and components
  3. 3

    Get the most out of it

    • Compile a custom version using the Sass/Scss documentation linked in the README to match your own design
    • Use the flexbox grid and responsive layout docs to build mobile-friendly pages
    • Explore the utilities page for colors, display, spacing-like helpers, and text utilities
    • Try the experimental components such as modals, toasts, or tooltips, noting that the README labels some as CSS-only

Downloads

Source code (.zip)master branch · straight from GitHubRelease v0.5.9Release notes and sourceOfficial website & docspicturepan2.github.io/spectre/

Strengths

  • Small footprint, described in the README as about 10KB gzipped
  • Covers base styles, flexbox grid, components, and utilities in one stylesheet
  • Can be installed manually, via CDN, or through NPM, Yarn, or Bower

Trade-offs

  • The README says the project is a side project, and the last push shown is April 2024, so future updates are uncertain
  • Some HTML5 and CSS3 features are not perfectly supported in Internet Explorer 10+
  • Requires some CSS and HTML knowledge to use the components well

How it compares

ProjectStarsTypeLevelUpdatedBest for
spectre (this)11.3kLibrarybeginner2.6 years agoDevelopers who want a small, ready-made base for a simple website or web app
bootstrap175kLibrarybeginner4 days agoDevelopers building responsive websites or web app interfaces quickly
bulma50kLibrarybeginner2 months agoDevelopers who want a quick, consistent styling baseline for a web page
tailwindcss98.3kLibraryintermediate4 days agoWeb developers who build their own interfaces and want to avoid writing large custom stylesheets
milligram10.2kLibrarybeginner2 months agoDevelopers who want a light starting point for a simple website or prototype
pico16.8kLibrarybeginner1 months agoDevelopers who want a quick, clean look for a small static page or prototype

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.