spectre
Spectre.css is a lightweight (~10KB gzipped) CSS framework built around a Flexbox-based responsive grid, base styles, and a set of pre-styled components and utilities. It's a Sass-customizable starting point for building modern, mobile-friendly UIs without JavaScript.
Embed badge
[](https://opensources.dev/resource/spectre)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedNo commits in over a year
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
Our analysis
A small, dependency-free CSS framework offering a Flexbox grid, normalized base styles, and a broad catalog of components (cards, modals, tabs, toasts, etc.) plus utility classes, customizable via Sass.
When to use spectre
Choose it when you want a clean, lightweight design system that ships minimal CSS, prefer semantic class-based components over utility-first frameworks, and don't want a JavaScript dependency. Good for small-to-medium projects and prototypes where bundle size and a tasteful default look matter.
When not to
Reach for something else if you need a large active ecosystem with frequent updates, deep utility-first control (Tailwind), a rich JS-component library with interactivity baked in, or strong long-term maintenance guarantees for a large production app.
Strengths
- Very small footprint (~10KB gzipped) compared to heavier frameworks
- Flexbox-based responsive grid is straightforward to use
- Wide component coverage including many CSS-only experimental widgets
- Sass-based so you can compile a trimmed custom build
- No JavaScript dependency for core components
Trade-offs
- Project is essentially a personal side project and is largely dormant/unmaintained
- Smaller community and fewer learning resources than Bootstrap/Tailwind
- Interactive components rely on CSS-only tricks, limiting behavior
- Still references legacy targets like IE10, signaling dated assumptions
- No utility-first composition model if that's your preference
Maturity
Popular (11k+ stars) and stable in API, but maintenance has effectively stalled with minimal recent activity. It works well for what it covers, but you should treat it as a frozen library rather than an actively evolving framework.
Spectre.css
Spectre.css is a lightweight, responsive and modern CSS framework.
Lightweight (~10KB gzipped) starting point for your projects
Flexbox-based, responsive and mobile-friendly layout
Elegantly designed and developed elements and components
Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.
Spectre.css is completely free to use. If you enjoy it, please consider donating via Paypal or via Patreon for the further development. ♥
Getting started
There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.
Install manually
Download the compiled and minified Spectre CSS files. And include spectre.css located in /docs/dist in your website or Web app <head> part.
<link rel="stylesheet" href="spectre.min.css">
Install from CDN
Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
Install with NPM
$ npm install spectre.css --save
Install with Yarn
$ yarn add spectre.css
Install with Bower
$ bower install spectre.css --save
Compiling custom version
You can compile your custom version of Spectre.css. Read the documentation.
Documentation and examples
Elements
Layout
Components
Utilities
Utilities - colors, display, divider, loading, position, shapes and text utilities
Experimentals
360-Degree Viewer - CSS ONLY
Carousels - CSS ONLY
Comparison Sliders - CSS ONLY
Filters - CSS ONLY
Off-canvas - CSS ONLY
Parallax - CSS ONLY
Browser support
Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
Chrome (LAST 4)
Microsoft Edge (LAST 4)
Firefox (EXTENDED SUPPORT RELEASE)
Safari (LAST 4)
Opera (LAST 4)
Internet Explorer 10+
Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
Designed and built with ♥ by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.