{"id":18816,"library":"spectre.css","title":"Spectre.css","description":"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.","status":"maintenance","version":"0.5.9","language":"javascript","source_language":"en","source_url":"https://github.com/picturepan2/spectre","tags":["javascript","css","framework","flexbox","responsive","mobile-friendly","front-end","sass","modern"],"install":[{"cmd":"npm install spectre.css","lang":"bash","label":"npm"},{"cmd":"yarn add spectre.css","lang":"bash","label":"yarn"},{"cmd":"pnpm add spectre.css","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Include in HTML head; CDN link recommended for production. For development, use npm import.","wrong":"","symbol":"spectre.css","correct":""},{"note":"Only needed if using icon classes; not included in main spectre.css.","wrong":"","symbol":"spectre-icons.css","correct":""},{"note":"Optional experimental components (autocomplete, calendars, etc.); load after spectre.css.","wrong":"","symbol":"spectre-exp.css","correct":""}],"quickstart":{"code":"\n\n\n \n \n \n \n Spectre Quickstart\n\n\n
\n
\n
\n
\n
\n
Hello, Spectre!
\n
\n
\n
This is a minimal example using the flexbox grid and card component.
\n
\n \n
\n
\n
\n
\n\n","lang":"javascript","description":"HTML file demonstrating Spectre.css grid, card component, and buttons using CDN links."},"warnings":[{"fix":"Use 'docs/dist' folder for manual install or CDN links; avoid referencing old paths.","message":"Spectre.css v0.5.0 removed the /dist folder; versions >=0.5.0 restore it but with different structure.","severity":"deprecated","affected_versions":">=0.5.0"},{"fix":"Include spectre-icons.css separately via CDN or npm package 'spectre.css' (icons are bundled in dist).","message":"Icons have been moved to a separate GitHub repository (icons.css) as of v0.5.8.","severity":"deprecated","affected_versions":">=0.5.8"},{"fix":"Update class names: 'pos-*' to 'position-*'.","message":"Naming of position utilities changed in v0.5.4 to avoid conflicts (e.g., 'pos-relative' became 'position-relative').","severity":"breaking","affected_versions":"0.5.4"},{"fix":"Include spectre-exp.css and use 'autocomplete' class prefix.","message":"Autocomplete component moved to Experimentals (spectre-exp.css) in v0.5.1.","severity":"breaking","affected_versions":">=0.5.1"},{"fix":"Implement JavaScript glue code to toggle classes (e.g., 'active') on components.","message":"No JavaScript included; interactive components (modals, popovers, collapses) require manual JS implementation.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use SCSS compilation or override styles manually; CSS custom properties not available in dist.","message":"Spectre.css uses CSS variables for customization only in SCSS source; precompiled CSS uses hardcoded values.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use '@import '~spectre.css/src/spectre';' in SCSS or install as dev dependency.","cause":"Node.js resolution requires installing via npm and specifying exact path.","error":"Error: Cannot find module 'spectre.css' when using @import in SCSS"},{"fix":"Add '' after spectre.css.","cause":"Missing spectre-icons.css stylesheet.","error":"Spectre icons not displaying, showing blank squares"},{"fix":"Add '' and use 'col-xs', 'col-sm', etc.","cause":"Missing viewport meta tag or incorrect column class syntax.","error":"Grid columns not behaving as expected on mobile"},{"fix":"Ensure the parent has 'position: relative;' and avoid overflow:hidden on ancestor.","cause":"Tooltip container may not have position: relative; or overflow hidden.","error":"Tooltip position is wrong or clipping"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}