explaingit

picturepan2/spectre

★ 11,318CSSAudience · developerComplexity · 1/5Setup · easy

TLDR

A lightweight CSS framework (~10KB) with flexbox-based responsive layouts, pre-styled forms, buttons, cards, modals, and experimental components like carousels and image comparison sliders.

Mindmap

mindmap
  root((Spectre.css))
    What it does
      CSS framework
      Responsive layouts
    Components
      Cards
      Modals
      Forms
      Buttons
    Experimentals
      Carousel
      Parallax
      Comparison slider
    Tech stack
      CSS
      Sass
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add polished, responsive layouts to a project by linking a single 10KB CSS file with no JavaScript required.

USE CASE 2

Build a form-heavy admin page quickly using Spectre's pre-styled inputs, buttons, labels, and validation states.

USE CASE 3

Use Spectre's pure-CSS image comparison slider or carousel for a landing page without adding a JavaScript library.

Tech stack

CSSSassnpm

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Spectre.css is a CSS framework, meaning it is a collection of pre-written style rules that web developers drop into their projects to get polished, responsive layouts without starting from scratch. The whole thing compresses down to around 10KB, making it one of the lighter options available. It was built by a single developer over years of work on a large web service and is free to use. The layout system is based on flexbox, a browser feature that handles arranging elements in rows and columns. Because of this, pages built with Spectre resize gracefully across phones, tablets, and desktops without extra configuration. Spectre ships with a broad set of interface building blocks. On the basics side there are styles for typography, tables, buttons, forms, labels, and code blocks. The component section adds things like cards, modals (popup windows), tabs, tooltips, breadcrumb trails, progress bars, pagination controls, and notification toasts. A separate experimentals section holds pieces still in testing, including a pure-CSS image carousel, a side-by-side image comparison slider, a 360-degree viewer, calendar widgets, and parallax scrolling effects. Adding Spectre to a project takes one step: link the CSS file in the HTML head of your page. You can download that file directly, pull it from a public CDN, or install it through NPM or Yarn if you use a build process. Developers who want to adjust colors, spacing, or component styles can modify the source Sass files and compile a custom build. Browser support covers recent versions of Chrome, Firefox, Safari, Edge, and Opera, with partial support for Internet Explorer 10 and above.

Copy-paste prompts

Prompt 1
Show me how to build a responsive two-column card grid using Spectre.css column classes that stacks to one column on mobile.
Prompt 2
How do I implement a modal popup in pure Spectre.css, no JavaScript library, using only HTML classes and the :target selector trick?
Prompt 3
I want to customize Spectre.css accent colors and default button padding. Which Sass variables do I change and how do I compile a custom build?
Prompt 4
Create a complete user signup form using Spectre.css: label, text inputs, a select dropdown, a checkbox, and a styled submit button with an error state.
Open on GitHub → Explain another repo

← picturepan2 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.