Guide · Open source
How to use Spectre.css: install, build and customize
Updated · written with AI from the project's own documentation and checked against our catalogue data
Spectre.css is a lightweight, responsive CSS framework: a set of pre-written stylesheets that give web pages a consistent look and a flexbox-based layout system. This guide is for developers who want a small starting point for a simple website or web app. By the end you will know the ways to add Spectre to a project, where to find its components, and how to build a customized version.
Spectre.csspicturepan2/spectre · ★ 11.3k · MIT Install options & downloads Quick start
- 1Choose an install method. Pick npm, Yarn, Bower, a CDN or a manual download based on how your project is set up.
- 2Add the package or link. Run the package manager command or add the CDN link to the head of your page.
- 3Include the stylesheet. Link spectre.min.css in the head of your HTML so the styles apply to the whole page.
- 4Browse the docs. Use the element, layout and component pages to find the classes you need.
- 5Customize if needed. Compile your own version with a Sass/Scss compiler following the custom build documentation.
What Spectre.css includes
Spectre provides base styles, a responsive layout system, CSS components and utilities. The README describes it as lightweight, at about 10KB gzipped, and built with Flexbox.
The documentation groups the features into elements, layout, components, utilities and experimental pieces. Elements include typography, tables, buttons, forms, labels, code and media. Layout covers a flexbox grid, responsive behavior, a hero section and a navbar. Components include cards, modals, tabs, tabs, tooltips, toasts, pagination and more.
- Elements: typography, tables, buttons, forms, labels, code, media
- Layout: flexbox grid, responsive, hero, navbar
- Components: accordions, cards, modals, tabs, navbars via Nav, pagination, toasts, tooltips and others
- Utilities: colors, display, divider, loading, position, shapes and text
Install Spectre.css with npm, Yarn or Bower
If you use a package manager, install Spectre from the command line in your project folder. The README lists NPM, Yarn and Bower as options.
Use the command that matches the tool your project already uses.
- npm: run the install command with the --save flag
- Yarn: add the package with yarn add
- Bower: install with the --save flag
$ npm install spectre.css --save
$ yarn add spectre.css
$ bower install spectre.css --saveInclude Spectre in a page with a CDN or manual download
If you do not want a build step, load the compiled stylesheet from a CDN. The README names unpkg and cdnjs as options.
To install manually, download the compiled and minified Spectre CSS files from the docs/dist folder in the repository, then include spectre.css or spectre.min.css in the head of your page.
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="spectre.min.css">Build a custom version with Sass
Spectre can be modified for your project with a Sass/Scss compiler. This is useful if you only want some parts of the framework or want your own settings. The README points to the project's custom build documentation for the steps.
Check the official custom build guide before you start, since the README only links to it and does not list the build commands.
Check browser support before you choose Spectre
Spectre is designed for modern browsers. The README recommends Chrome, Microsoft Edge, Firefox, Safari and Opera (the last few releases, or the extended support release for Firefox) and says it supports Internet Explorer 10+ with some HTML5 and CSS3 features not perfectly supported.
Spectre uses Autoprefixer to help styles work in earlier browsers and Normalize.css for resets.
What people use it for
- Styling a simple website or landing page with a ready-made base
- Building a responsive layout with the flexbox grid
- Adding cards, modals, tabs or a navbar with plain CSS classes
- Creating a custom build with only the parts your project needs
Frequently asked questions
Is Spectre.css free to use?
The README says Spectre.css is completely free to use and is released under the MIT licence. Donations via PayPal or Patreon are optional and support further development.
How do I install Spectre.css?
You can install it with npm (npm install spectre.css --save), Yarn (yarn add spectre.css), or Bower. You can also load it from the unpkg or cdnjs CDN, or download the files manually from the docs/dist folder.
Does Spectre.css work in Internet Explorer?
The README says Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported there. It is designed for modern browsers.
Can I customize Spectre.css?
Yes. The README says it can be modified with a Sass/Scss compiler, and it links to documentation on compiling a custom version.
What is Spectre.css compared to Bootstrap or Tailwind CSS?
Spectre is a small CSS framework with ready-made classes for elements and components. The README does not compare it to other projects, so check each project's docs against your needs. Bulma, Milligram, Bootstrap and Tailwind CSS are other options in the same space.
Does Spectre.css include JavaScript components?
The README focuses on CSS and mentions only CSS-only effects for some experimental components, such as carousels and parallax. If you need a large set of JavaScript widgets, consider a framework with a bigger JavaScript ecosystem.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Spectre.css suits developers who want a small, plain-CSS base with a flexbox grid and common components for a simple site or web app. It is a weaker fit if you need strong older-browser support, a large set of JavaScript components, or an actively maintained project, since the source shows a last push in April 2024 and the latest release is v0.5.9, so compare it with Bootstrap, Bulma or Tailwind CSS first.
Install options & downloads