# picocss/pico

**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/picocss-pico).**

16,342 stars · 490 forks · CSS · mit

## Links

- GitHub: https://github.com/picocss/pico
- Homepage: https://picocss.com
- awesome-repositories: https://awesome-repositories.com/repository/picocss-pico.md

## Topics

`css` `css-framework` `dark-mode` `dark-theme` `lightweight` `minimal` `minimalist` `minimalistic` `native-html` `scss` `scss-framework` `semantic`

## Description

Pico is a lightweight, classless CSS framework designed to provide consistent, accessible, and responsive visual defaults for web interfaces. By prioritizing semantic HTML tags, it allows developers to build clean, structured pages without the need for complex class names or heavy dependencies. The framework functions as a comprehensive design system that automatically applies styling to standard elements, ensuring that typography, spacing, and layout remain cohesive across different screen sizes.

The framework distinguishes itself through a modular, variable-driven architecture that emphasizes native browser capabilities. It leverages global CSS variables for real-time theming and color palette management, while supporting automatic light and dark mode switching based on system preferences. Developers can further refine the visual output by overriding design tokens or selectively including specific CSS modules during the build process to optimize final bundle sizes.

Beyond foundational styling, the project provides a robust set of interface components and layout utilities. It includes responsive grid systems, form control styling with validation feedback, and specialized components like cards, modals, and navigation menus. These elements rely on semantic markup and standard attributes to maintain accessibility and visual integrity, often eliminating the need for custom scripts to handle interactive states or layout adjustments.

The framework is designed for straightforward integration, allowing for style scoping to prevent conflicts and configuration of root containers to ensure compatibility with various frontend architectures.

## Tags

### User Interface & Experience

- [CSS Frameworks](https://awesome-repositories.com/f/user-interface-experience/css-frameworks.md) — Provides a lightweight, classless CSS framework for semantic web interfaces.
- [Semantic Styling](https://awesome-repositories.com/f/user-interface-experience/semantic-styling.md) — Applies visual styles directly to standard HTML elements to ensure consistent design without extra classes.
- [Adaptive Color Schemes](https://awesome-repositories.com/f/user-interface-experience/adaptive-color-schemes.md) — Supports automatic light and dark mode switching based on system preferences. ([source](https://picocss.com/docs/css-variables))
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Uses global CSS variables to manage color palettes and design tokens for real-time theming.
- [Dark Mode Support](https://awesome-repositories.com/f/user-interface-experience/dark-mode-support.md) — Adapts interface colors automatically based on system-level light and dark mode preferences. ([source](https://picocss.com/))
- [Design Systems](https://awesome-repositories.com/f/user-interface-experience/design-systems.md) — Implements a modular design system using CSS variables for typography, spacing, and color.
- [Responsive Layout Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-systems.md) — Provides responsive grid structures and auto-layout columns that adapt to different viewport sizes. ([source](https://picocss.com/docs/forms))
- [Responsive Layout Engines](https://awesome-repositories.com/f/user-interface-experience/declarative-layout-engines/responsive-layout-engines.md) — Uses relative units and flexible containers to automatically adjust content scaling across viewports.
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Enables overriding global design tokens to adjust typography and spacing across the interface. ([source](https://picocss.com/docs/css-variables))
- [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 consistent visual styling for standard HTML form controls like inputs and selects. ([source](https://picocss.com/docs/forms/select))
- [Color Palette Management](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palette-management.md) — Provides predefined color scales for consistent branding and design system management. ([source](https://picocss.com/docs/colors))
- [UI Button Components](https://awesome-repositories.com/f/user-interface-experience/ui-button-components.md) — Applies consistent visual themes to buttons and interactive components using semantic attributes. ([source](https://picocss.com/docs/accordion))
- [Card Layouts](https://awesome-repositories.com/f/user-interface-experience/card-layouts.md) — Groups related information into responsive, visually separated card containers. ([source](https://picocss.com/docs/card))
- [Validation Feedback Styles](https://awesome-repositories.com/f/user-interface-experience/input-validation-utilities/validation-feedback-styles.md) — Visualizes field validity using color-coded styles and helper text. ([source](https://picocss.com/docs/forms/textarea))
- [Semantic Landmark Spacing](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/space-layout-hooks/semantic-landmark-spacing.md) — Ensures consistent document structure by applying responsive spacing to headers and footers. ([source](https://picocss.com/docs/landmarks-section))
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Styles navigation menus by arranging semantic list items with automatic spacing and link formatting. ([source](https://picocss.com/docs/nav))
- [Theme Style Customizations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/theme-style-customizations.md) — Supports modification of CSS variables to adjust visual appearance and toggle functional modules. ([source](https://picocss.com/docs/v2))
- [Text Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/text-styling.md) — Provides distinct visual styling for headings, quotes, and inline text elements. ([source](https://picocss.com/docs/typography))
- [Table Components](https://awesome-repositories.com/f/user-interface-experience/table-components.md) — Applies consistent spacing and clean visual formatting to standard data tables. ([source](https://picocss.com/docs/table))
- [Button Groups](https://awesome-repositories.com/f/user-interface-experience/buttons/button-groups.md) — Combines multiple buttons into a single visual unit for related actions. ([source](https://picocss.com/docs/group))
- [Section Spacing Utilities](https://awesome-repositories.com/f/user-interface-experience/custom-header-components/section-headers/section-spacing-utilities.md) — Maintains visual hierarchy by applying responsive bottom margins to section elements. ([source](https://picocss.com/docs/landmarks-section))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Renders semantic dialog containers with responsive layout utilities for overlays and content alignment. ([source](https://picocss.com/docs/modal))
- [Hyperlink Visual Variants](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/hyperlink-visual-variants.md) — Applies responsive and accessible visual treatments to standard anchor tags. ([source](https://picocss.com/docs/link))
- [Style Isolation Mechanisms](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms.md) — Provides mechanisms to restrict default styling to specific sections using container classes. ([source](https://picocss.com/docs/v2))
- [Viewport Width Constraints](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/constraint-based-layouts/viewport-width-constraints.md) — Centers content or expands it to full width using responsive breakpoints. ([source](https://picocss.com/docs/container))
- [Tooltip Components](https://awesome-repositories.com/f/user-interface-experience/tooltip-components.md) — Displays contextual information overlays using native attributes without custom JavaScript. ([source](https://picocss.com/docs/tooltip))

### Web Development

- [Lightweight UI Frameworks](https://awesome-repositories.com/f/web-development/lightweight-ui-frameworks.md) — Offers a minimal styling solution for forms, tables, and navigation without heavy dependencies.
- [Responsive Typography](https://awesome-repositories.com/f/web-development/web-standards/typography-systems/responsive-typography.md) — Adjusts font sizes automatically using relative units for proportional scaling. ([source](https://picocss.com/docs/typography))
- [RTL Layouts](https://awesome-repositories.com/f/web-development/internationalization-localization/rtl-layouts.md) — Adjusts alignment and spacing of semantic elements to support right-to-left layout direction. ([source](https://picocss.com/docs/rtl))
- [Viewport Configurations](https://awesome-repositories.com/f/web-development/web-standards/responsive-css-frameworks/viewport-configurations.md) — Enables switching between fluid and centered viewport modes for responsive content alignment. ([source](https://picocss.com/docs/version-picker))
- [Modular Architectures](https://awesome-repositories.com/f/web-development/modular-architectures.md) — Allows selective inclusion of CSS modules during the build process to optimize bundle size.

### Part of an Awesome List

- [Classless Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/classless-frameworks.md) — Elegant styling for native HTML elements with automatic dark mode.

### Development Tools & Productivity

- [Bundle Size Optimization](https://awesome-repositories.com/f/development-tools-productivity/bundle-size-optimization.md) — Allows selective inclusion of CSS modules to minimize final bundle size. ([source](https://picocss.com/docs/sass))