15 repositorios
Binding runtime JavaScript values to CSS custom properties for dynamic styling.
Distinct from Styled Properties: Specifically targets the use of CSS custom properties for dynamic updates, distinct from general styled properties.
Explore 15 awesome GitHub repositories matching user interface & experience · CSS Custom Property Bindings. Refine with filters or upvote what's useful.
This project is a WPF Material Design library and XAML UI framework providing a collection of pre-styled components and themed controls for Windows desktop applications. It functions as a desktop component library and theme engine to ensure design consistency across .NET applications. The toolkit implements a standardized visual language through a Material Design component library, including specialized buttons, cards, and dialogs. It enables the application of comprehensive visual styles and theme implementations to align standard controls with established design patterns. The framework cov
Provides specialized properties on controls allowing developers to fine-tune visual behaviors directly through XAML markup.
Linaria is a zero-runtime CSS-in-JS library and static CSS generator. It evaluates JavaScript expressions at build time to extract styles from tagged template literals into standalone, static CSS files, removing the need for a runtime style injection engine. The library distinguishes itself by mapping component props to CSS custom properties, enabling dynamic styling and runtime property updates without regenerating stylesheets. It utilizes a build-time evaluation engine to resolve interpolations and a hashing system to generate scoped class names that prevent style collisions. The project c
Binds runtime JavaScript props to CSS custom properties for dynamic styling without regenerating CSS.
This is a developer portfolio site built with Gatsby, designed as a single-page website to showcase a developer's projects, experience, and personal brand. The site is powered by Gatsby's static site generator, which uses a GraphQL data layer and file-based routing to produce an optimized static build for deployment on any static hosting service. The visual theme is controlled entirely through CSS custom properties, with a centralized set of variables for navy, slate, and accent colors that can be edited to customize the site's appearance. The user interface is constructed from reusable React
Controls visual styling through CSS custom properties defined in a centralized theme file.
Ripple is a full-stack TypeScript web framework and reactive UI library used for building interfaces with server-side rendering. It organizes user interfaces into a hierarchy of reusable, scoped components with built-in state management and client-side hydration. The framework is distinguished by its fine-grained reactivity, which updates specific DOM elements without requiring full component re-renders. It integrates server-side logic and client-side components within a single TypeScript codebase, enabling a unified full-stack development workflow. The system covers a broad range of capabil
Enables dynamic visual changes by passing runtime values to static CSS blocks via custom properties.
Heti is a CSS-based typographic enhancement library for Chinese web content. It applies standard Chinese typesetting rules entirely through stylesheets, without any JavaScript dependencies, handling punctuation compression, character alignment, mixed-script spacing, and baseline grid alignment for both simplified and traditional Chinese characters. The library distinguishes itself by supporting traditional vertical text layout flowing from top to bottom and right to left, alongside horizontal reading directions, using CSS Grid and writing-mode properties. It provides automatic dark mode adapt
Uses CSS custom properties to expose typographic settings for runtime theme switching.
Rushstack es un conjunto de herramientas integral para gestionar monorepos de TypeScript a gran escala, proporcionando un framework para la automatización de pipelines de construcción, coordinación de dependencias y análisis estático. Funciona como un orquestador de construcción incremental y sistema de gestión diseñado para mantener la consistencia y el rendimiento a través de múltiples paquetes en un espacio de trabajo compartido. El sistema se distingue por un modelo de ejecución basado en grafos acíclicos dirigidos y un incrementalismo basado en hash de contenido, que asegura que solo los proyectos afectados sean reconstruidos. Optimiza aún más los flujos de trabajo de desarrollo mediante el almacenamiento en caché de artefactos de construcción remotos con integraciones para S3, Azure y HTTP, y utiliza la gestión de espacios de trabajo basada en enlaces simbólicos para una visibilidad inmediata de los cambios locales. El conjunto de herramientas cubre una amplia gama de capacidades, incluyendo flujos de trabajo de lanzamiento automatizados, análisis de contratos de API y cumplimiento de calidad de código empresarial a través de perfiles de linting estandarizados. También proporciona un amplio soporte para el empaquetado de activos, transpilación de TypeScript y la generación de definiciones de tipo a partir de esquemas JSON y activos estáticos. Áreas de utilidad adicionales incluyen la gestión de localización, generación de avisos de licencia y la orquestación de interfaces de línea de comandos con salida de proceso sincronizada.
Injects CSS rules into the DOM and replaces tokens with values from a centralized theme configuration.
Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty
Defines color themes and typography scales using CSS custom properties for runtime customization.
Naive UI Admin is a Vue 3 admin dashboard framework built with TypeScript, Vite, and the Naive UI component library. It provides a pre-built backend management interface with reusable components, dynamic menus, and a component-level permission system that restricts UI elements down to individual components using directive-based checks and role-based access control. The framework enforces compile-time type safety across the entire codebase to reduce runtime errors and improve maintainability. The project distinguishes itself through a permission system that controls feature and UI element visi
Applies visual customization by injecting CSS custom properties derived from a centralized theme configuration object.
LiveTerm es un generador de sitios estáticos estilo terminal y una plantilla web diseñada para crear sitios web que imitan una interfaz de línea de comandos. Funciona como un constructor de portafolios que transforma información personal y profesional en un entorno de terminal interactivo. El proyecto utiliza un enfoque basado en configuración para mapear datos JSON a elementos visuales y textuales. Esto permite la personalización de la apariencia del sitio, incluyendo la modificación de banners, nombres de usuario y prompts de terminal. El sistema maneja la generación de renderizados web estáticos y utiliza inyección de estilos basada en temas para aplicar esquemas de color y diseños personalizados.
Applies visual themes by injecting CSS custom properties derived from a centralized configuration object.
wpftoolkit es una biblioteca de componentes de UI y conjunto de herramientas de desarrollo para construir aplicaciones de escritorio de Windows. Proporciona una colección de controles de entrada preconstruidos, paneles de diseño y componentes especializados diseñados para extender las capacidades de interfaz estándar. El proyecto incluye un toolkit de visualización de datos para renderizar conjuntos de datos complejos mediante gráficos, medidores y vistas tridimensionales. También cuenta con un framework de gestión de ventanas para organizar estructuras de aplicaciones a través de diseños de acoplamiento, flujos de asistente y controles de contenedor, junto con un motor de temas visuales para gestionar la apariencia de los componentes de la interfaz. La suite cubre además la integración de accesibilidad y automatización, mapeando la lógica de control interna a frameworks que exponen elementos de interfaz a tecnologías de asistencia y herramientas de prueba programáticas.
Utilizes WPF dependency properties to synchronize control state and trigger automatic UI updates.
Flexbox-Labs is a set of interactive tools for visually designing web layouts and translating those configurations into HTML and CSS code. It functions as a visual CSS playground and layout builder for experimenting with alignment and spacing in real time. The project provides dedicated generators for both CSS Flexbox and CSS Grid, allowing for the visual definition of templates, containers, and individual layout elements. It includes capabilities for prototyping structural web designs and managing reusable design patterns by saving custom configurations to a database. The toolset automates
Links visual controls directly to CSS custom properties for immediate layout previews.
This project is a React component library and web UI design system designed for creating interactive web interfaces. It functions as a responsive frontend framework that provides a collection of modular building blocks to ensure visual consistency across different application pages and devices. The system utilizes a CSS-in-JS styling framework that generates and injects styles at runtime through a centralized property injection system. This approach allows for the implementation of a theme-driven architecture where layouts and color themes automatically adjust based on screen size and user pr
Distributes centralized design tokens through a provider system to maintain consistent theme injection across components.
This is a CSS UI framework and design system implementation used to build user interfaces that match the visual design of Office and Microsoft 365. It provides a standardized set of typography, color palettes, and grid layouts to ensure a consistent visual appearance across web applications. The framework is designed for enterprise design system implementation, specifically for Microsoft 365 UI development and the styling of Office add-ins. It includes a dedicated iconography library of standardized icons to represent common actions and objects. The system utilizes a token-driven design appr
Injects dynamic brand colors and typography settings into the global style sheet using CSS custom properties.
BasicScroll is a standalone scroll-driven animation library that updates CSS custom properties, element styles, and CSS properties dynamically based on absolute or relative viewport scroll positions. It functions as an animation engine designed to build custom parallax scrolling experiences and fluid visual effects on both mobile and desktop viewports. The library supports custom scroll range definitions anchored directly to specific document elements, alongside callback executions that trigger user-defined functions with live progress data and state percentages as the viewport enters or leav
Updates native CSS properties directly via custom properties on every scroll frame.
Scroll-out is a JavaScript scroll animation library that detects element visibility during scroll to trigger reveal, parallax, and dynamic style effects. It serves as a CSS custom property scroll driver that computes and applies live property values based on scroll position, allowing page styles to adapt fluidly, alongside functioning as a DOM viewport intersection observer that monitors when elements enter or leave the browser viewport to update their visual state attributes. The library maps real-time scroll offsets and element positions directly to custom CSS properties for fluid visual tr
Computes and applies live property values based on scroll position so page styles adapt fluidly.