# picturepan2/spectre

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/picturepan2-spectre).**

11,317 stars · 784 forks · CSS · MIT

## Links

- GitHub: https://github.com/picturepan2/spectre
- Homepage: https://picturepan2.github.io/spectre/
- awesome-repositories: https://awesome-repositories.com/repository/picturepan2-spectre.md

## Description

Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development.

The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems.

The project covers a wide range of layout and interface capabilities, including a twelve-column responsive grid system, fixed-width containers, and visibility toggling. Its component surface includes form controls with validation states, interactive elements like modals and tabs, navigation systems, and a variety of visual indicators such as progress bars and user avatars. Additionally, it provides typography formatting with specific optimizations for East Asian characters and a library of visual helper classes for spacing, colors, and positioning.

## Tags

### User Interface & Experience

- [Frontend UI Toolkits](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits.md) — Provides a comprehensive toolkit of pre-styled components like modals and navigation bars for modern frontend development.
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Provides a comprehensive library of pre-styled interactive patterns including modals, tabs, and accordions. ([source](https://github.com/picturepan2/spectre#readme))
- [Button Styles](https://awesome-repositories.com/f/user-interface-experience/button-styles.md) — Provides a comprehensive set of button styles including primary, link, and default variants in various sizes. ([source](https://picturepan2.github.io/spectre/elements/buttons.html))
- [Common UI Element Styling](https://awesome-repositories.com/f/user-interface-experience/common-ui-element-styling.md) — Formats standard interface pieces for consistent visual presentation across the entire user interface. ([source](https://github.com/picturepan2/spectre#readme))
- [Utility-First Class Systems](https://awesome-repositories.com/f/user-interface-experience/component-utilities/utility-first-class-systems.md) — Ships a comprehensive library of single-purpose utility classes for rapid modification of spacing, colors, and positioning.
- [CSS Component Libraries](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries.md) — Offers a collection of pre-styled pure CSS elements including modals, tabs, and navigation bars.
- [CSS Frameworks](https://awesome-repositories.com/f/user-interface-experience/css-frameworks.md) — Provides a comprehensive collection of pre-styled interface elements and utility classes for responsive web design.
- [CSS Utility Classes](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes.md) — Includes a library of reusable, single-purpose helper classes for modifying colors, spacing, and typography.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements a theme system using CSS variables to maintain consistent design tokens across all interface elements.
- [Lightweight CSS Frameworks](https://awesome-repositories.com/f/user-interface-experience/lightweight-css-frameworks.md) — Implements a minimal set of styles and utilities to build fast-loading pages without heavy framework overhead.
- [Navigation Bars](https://awesome-repositories.com/f/user-interface-experience/navigation-components/navigation-bars.md) — Provides persistent header containers that organize branding, navigation links, and search components. ([source](https://picturepan2.github.io/spectre/layout/navbar.html))
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Provides a lightweight CSS foundation to create website layouts that automatically adapt to different screen sizes.
- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Provides a flexible twelve-column responsive grid system that adapts layout widths across different device breakpoints.
- [Form Control Styles](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/form-control-styles.md) — Provides standardized CSS definitions for input fields, textareas, selects, checkboxes, and radios. ([source](https://picturepan2.github.io/spectre/elements/forms.html))
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Implements a twelve-column responsive grid system that automatically adjusts layout widths based on viewport breakpoints. ([source](https://picturepan2.github.io/spectre/layout/responsive.html))
- [Button Groups](https://awesome-repositories.com/f/user-interface-experience/buttons/button-groups.md) — Arranges multiple buttons into cohesive sets or full-width blocks for structured navigation and actions. ([source](https://picturepan2.github.io/spectre/elements/buttons.html))
- [Chips](https://awesome-repositories.com/f/user-interface-experience/chips.md) — Renders small, self-contained blocks of content that combine text, buttons, or avatars to represent entities or tags. ([source](https://picturepan2.github.io/spectre/components/chips.html))
- [Collapse Sections](https://awesome-repositories.com/f/user-interface-experience/collapse-sections.md) — Toggles the visibility of content blocks to organize information and reduce page clutter. ([source](https://picturepan2.github.io/spectre/components/accordions.html))
- [Data Table Components](https://awesome-repositories.com/f/user-interface-experience/data-table-components.md) — Styles tabular content with consistent padding, borders, and zebra-striping for efficient data presentation. ([source](https://picturepan2.github.io/spectre/elements/tables.html))
- [Fixed-Width Containers](https://awesome-repositories.com/f/user-interface-experience/fixed-width-containers.md) — Provides fixed-width containers to ensure consistent content alignment and readability across varying monitor sizes. ([source](https://picturepan2.github.io/spectre/layout/responsive.html))
- [Horizontal Form Layouts](https://awesome-repositories.com/f/user-interface-experience/form-components/horizontal-form-layouts.md) — Arranges form elements in single inline rows or horizontal grids with responsive column widths. ([source](https://picturepan2.github.io/spectre/elements/forms.html))
- [Form Validation Indicators](https://awesome-repositories.com/f/user-interface-experience/form-validation-indicators.md) — Applies visual success or error states to form controls and displays accompanying validation hints. ([source](https://picturepan2.github.io/spectre/elements/forms.html))
- [Hero Sections](https://awesome-repositories.com/f/user-interface-experience/hero-sections.md) — Implements large, prominent layout containers for high-impact featured content and primary calls to action. ([source](https://picturepan2.github.io/spectre/layout/hero.html))
- [Interface Element Hiding](https://awesome-repositories.com/f/user-interface-experience/interface-element-hiding.md) — Enables the showing or hiding of specific interface components based on the browser window width. ([source](https://picturepan2.github.io/spectre/layout/responsive.html))
- [Conditional Visibility Toggling](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/ui-rendering-patterns/conditional-visibility-toggling.md) — Provides utility classes to show or hide elements based on screen size by modifying CSS display properties.
- [Breadcrumbs](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumbs.md) — Displays a series of linked labels to indicate the user's current location within a structural hierarchy. ([source](https://picturepan2.github.io/spectre/components/breadcrumbs.html))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Displays flexible, centered prompt windows over page content to capture user attention or input. ([source](https://picturepan2.github.io/spectre/components/modals.html))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-components/dropdown-menus.md) — Combines a toggle button with a hidden menu that appears on focus or state change to save screen space. ([source](https://picturepan2.github.io/spectre/components/menu.html))
- [Pagination Controls](https://awesome-repositories.com/f/user-interface-experience/navigation-components/pagination-controls.md) — Builds a numbered navigation sequence with active and disabled states to move between pages of content. ([source](https://picturepan2.github.io/spectre/components/pagination.html))
- [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — Organizes site navigation and actions using vertical lists of links, buttons, or form controls. ([source](https://picturepan2.github.io/spectre/components/menu.html))
- [Progress Bars](https://awesome-repositories.com/f/user-interface-experience/progress-bars.md) — Visualizes task completion or values within a range using segmented containers with configurable widths. ([source](https://picturepan2.github.io/spectre/components/bars.html))
- [Progress Steps](https://awesome-repositories.com/f/user-interface-experience/progress-steps.md) — Displays a visual sequence of tasks to show a user their current state in a multi-step process. ([source](https://picturepan2.github.io/spectre/components/steps.html))
- [Responsive Images](https://awesome-repositories.com/f/user-interface-experience/responsive-images.md) — Adjusts image dimensions automatically based on the size of the parent container to maintain layout integrity. ([source](https://picturepan2.github.io/spectre/elements/media.html))
- [Status Indicators](https://awesome-repositories.com/f/user-interface-experience/status-indicators.md) — Signals notifications or unread counts by adding small, positioned labels or dots to interface elements. ([source](https://picturepan2.github.io/spectre/components/badges.html))
- [Viewport Width Constraints](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/constraint-based-layouts/viewport-width-constraints.md) — Implements maximum-width containers to ensure consistent content alignment and readability across different viewport widths.
- [Typography Systems](https://awesome-repositories.com/f/user-interface-experience/typography-systems.md) — Ensures consistent visual hierarchy by styling standard paragraphs, blockquotes, and lists. ([source](https://picturepan2.github.io/spectre/elements/typography.html))
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-customization.md) — Allows for the redefinition of design variables to establish a consistent custom visual style for the interface. ([source](https://picturepan2.github.io/spectre/getting-started/custom.html))
- [User Avatars](https://awesome-repositories.com/f/user-interface-experience/user-avatars.md) — Renders profile pictures or initials in various predefined sizes to represent users across the interface. ([source](https://picturepan2.github.io/spectre/components/avatars.html))
- [User Status Indicators](https://awesome-repositories.com/f/user-interface-experience/user-status-indicators.md) — Displays a color-coded status indicator on a profile picture to show whether a user is online, busy, or away. ([source](https://picturepan2.github.io/spectre/components/avatars.html))
- [Vector Icons](https://awesome-repositories.com/f/user-interface-experience/vector-icons.md) — Displays responsive icons for navigation and actions using pure CSS instead of image files. ([source](https://picturepan2.github.io/icons.css))
- [Status Labels](https://awesome-repositories.com/f/user-interface-experience/visual-status-indicators/status-labels.md) — Renders formatted text tags in various colors to highlight informative metadata or status indicators. ([source](https://picturepan2.github.io/spectre/elements/labels.html))

### Web Development

- [CSS-Only UI Components](https://awesome-repositories.com/f/web-development/css-development-utilities/css-only-ui-components.md) — Builds a comprehensive set of interactive UI components using pure CSS to eliminate JavaScript dependencies.
- [Responsive Media Containers](https://awesome-repositories.com/f/web-development/responsive-media-containers.md) — Maintains specific aspect ratios across different screen sizes by wrapping video embeds in responsive containers. ([source](https://picturepan2.github.io/spectre/elements/media.html))

### Part of an Awesome List

- [CSS Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/css-frameworks.md) — Lightweight and modern framework for extensible development.