spectre

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.