Open Props

Open Props ist eine Bibliothek für CSS-Custom-Properties und ein Design-Token-Set, das wiederverwendbare Variablen für Farben, Typografie und Layout bereitstellt. Es fungiert als CSS-Variablen-Framework und Design-System, das darauf ausgelegt ist, visuelle Konsistenz über Komponenten und Plattformen hinweg sicherzustellen.

Das Projekt enthält ein Optimierungs-Toolkit zur Generierung von selektorspezifischen Variablen-Bundles und zum Entfernen ungenutzter Design-Token aus Stylesheets, um die finale Dateigröße zu reduzieren. Zudem bietet es Konfigurationsdateien, um die Autovervollständigung von Design-Variablen in Code-Editoren zu ermöglichen.

Das System deckt breitere Funktionen im Bereich adaptives Web-Interface-Design, CSS-Variablen-Management und Rapid-UI-Prototyping ab.

Features

Design Token Systems - Provides a comprehensive framework for managing visual properties through hierarchical design tokens.
Design System Implementations - Provides the implementation foundation for building consistent visual languages using shared custom properties.
Adaptive Interface Layouts - Facilitates flexible layouts that automatically adjust colors and typography based on screen dimensions.
CSS Custom Property Libraries - Provides a comprehensive collection of reusable CSS variables for colors, typography, and layout.
CSS Variable Theming - Implements a system of custom properties that serve as a foundation for responsive interfaces.
Custom CSS Variable Definitions - Implements a global system for defining semantic CSS custom properties across the DOM.
CSS Theme Variable Managers - Organizes and distributes a large library of design tokens to maintain a unified look.
Design Tokens - Ships a curated set of design tokens for colors and typography to ensure visual consistency.
Build-Time Optimizers - Optimizes the final stylesheet by pruning unused custom properties during the build process.
Bundle Size Optimization - Includes build tools to remove unused design tokens and decrease the final stylesheet size.
CSS Variable Generators - Generates specialized property sets with specific selector scopes and compatibility overrides.
CSS Bundle Pruning - Offers tools for generating scoped bundles and pruning unused styles to reduce bundle size.
UI Prototyping - Accelerates UI development by utilizing pre-defined design tokens instead of raw CSS values.
Viewport-Based Scaling - Provides variables that automatically adjust sizes based on the browser viewport width.
Scoped Variable Bundles - Groups sets of custom properties under specific CSS classes or attributes to create themed context boundaries.
Tree-Shaking Optimizers - Includes tools to remove unused CSS variables during the build process to reduce delivery size.
Utility Based Frameworks - CSS custom properties for consistent and adaptive design.

Star-Verlauf

argyleinkopen-props

Name: argyleink/open-props
Author: argyleink

View on GitHub

5,409 Stars215 ForksHTMLMIT2 Aufrufeopen-props.style

Open Props

Das System deckt breitere Funktionen im Bereich adaptives Web-Interface-Design, CSS-Variablen-Management und Rapid-UI-Prototyping ab.

Features

Design Token Systems - Provides a comprehensive framework for managing visual properties through hierarchical design tokens.
Design System Implementations - Provides the implementation foundation for building consistent visual languages using shared custom properties.
Adaptive Interface Layouts - Facilitates flexible layouts that automatically adjust colors and typography based on screen dimensions.
CSS Custom Property Libraries - Provides a comprehensive collection of reusable CSS variables for colors, typography, and layout.
CSS Variable Theming - Implements a system of custom properties that serve as a foundation for responsive interfaces.
Custom CSS Variable Definitions - Implements a global system for defining semantic CSS custom properties across the DOM.
CSS Theme Variable Managers - Organizes and distributes a large library of design tokens to maintain a unified look.
Design Tokens - Ships a curated set of design tokens for colors and typography to ensure visual consistency.
Build-Time Optimizers - Optimizes the final stylesheet by pruning unused custom properties during the build process.
Bundle Size Optimization - Includes build tools to remove unused design tokens and decrease the final stylesheet size.
CSS Variable Generators - Generates specialized property sets with specific selector scopes and compatibility overrides.
CSS Bundle Pruning - Offers tools for generating scoped bundles and pruning unused styles to reduce bundle size.
UI Prototyping - Accelerates UI development by utilizing pre-defined design tokens instead of raw CSS values.
Viewport-Based Scaling - Provides variables that automatically adjust sizes based on the browser viewport width.
Scoped Variable Bundles - Groups sets of custom properties under specific CSS classes or attributes to create themed context boundaries.
Tree-Shaking Optimizers - Includes tools to remove unused CSS variables during the build process to reduce delivery size.
Utility Based Frameworks - CSS custom properties for consistent and adaptive design.

Open-Source-Alternativen zu Open Props

Ähnliche Open-Source-Projekte, sortiert nach der Anzahl der gemeinsamen Funktionen mit Open Props.

radix-ui/themes
radix-ui/themes
8,490Auf GitHub ansehen
This project is an accessible UI component library and themed design system. It provides a collection of pre-made user interface components designed to meet accessibility standards and maintain a consistent visual identity across web applications. The system includes an interactive theme previewer, which allows for the adjustment and testing of visual settings in real time within a running application. It covers global theme management and design system implementation through root configurations and a token-driven approach. The library supports rapid frontend prototyping by offering a set of
TypeScriptaccessibilitycolorscomponent-library
Auf GitHub ansehen8,490
facebook/stylex
facebook/stylex
9,126Auf GitHub ansehen
StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into optimized static CSS and type-safe class names. It functions as a multi-framework styling tool, generating standard CSS assets compatible with various JavaScript UI frameworks and server components. The system includes a CSS design token system and theme engine for managing shared constants and composing visual schemes. It allows for the creation of light, dark, and custom themes through variable overrides and token inheritance. The project covers component styling through object
JavaScript
Auf GitHub ansehen9,126
webstudio-is/webstudio
webstudio-is/webstudio
8,240Auf GitHub ansehen
Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys
TypeScriptaccessibilityalternativecloudflare
Auf GitHub ansehen8,240
mui/pigment-css
mui/pigment-css
1,125Auf GitHub ansehen
Pigment CSS is a framework-agnostic styling tool that moves component style processing from the browser runtime to the build phase. By parsing component source code and theme configurations during compilation, it generates standalone, optimized CSS files and standard class names, effectively eliminating the need for runtime style calculation. The library provides a system for managing design tokens, such as colors and spacing, by transforming them into native CSS variables. This approach allows for dynamic styling and theme-aware logic without requiring a JavaScript-based engine. It also supp
TypeScript
Auf GitHub ansehen1,125

Alle 30 Alternativen zu Open Props anzeigen

Häufig gestellte Fragen

Was macht argyleink/open-props?

Was sind die Hauptfunktionen von argyleink/open-props?

Die Hauptfunktionen von argyleink/open-props sind: Design Token Systems, Design System Implementations, Adaptive Interface Layouts, CSS Custom Property Libraries, CSS Variable Theming, Custom CSS Variable Definitions, CSS Theme Variable Managers, Design Tokens.

Welche Open-Source-Alternativen gibt es zu argyleink/open-props?

Open-Source-Alternativen zu argyleink/open-props sind unter anderem: radix-ui/themes — This project is an accessible UI component library and themed design system. It provides a collection of pre-made user… facebook/stylex — StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into… webstudio-is/webstudio — Webstudio is a visual CMS and website builder that provides a visual development environment for designing and… mui/pigment-css — Pigment CSS is a framework-agnostic styling tool that moves component style processing from the browser runtime to the… unocss/unocss — UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific… arco-design/arco-design-vue — Arco Design Vue is a Vue component library and design token system used to build consistent user interfaces. It…