8 repositorios
Styling mechanisms that use custom data attributes to define the visual state of an element.
Distinct from Element Attributes: Focuses on visual styling via data-attributes rather than general attribute management
Explore 8 awesome GitHub repositories matching web development · Data Attribute Styling. Refine with filters or upvote what's useful.
Ladda is an animated button library that provides loading button components to signal processing states during web interactions. It serves as a form submission indicator that replaces button text with a loading spinner during asynchronous operations to provide user feedback and prevent multiple clicks. The library focuses on asynchronous UI feedback and frontend state visualization. It links the visual appearance of buttons to the loading state of API calls and manages the user experience during form submissions. Capabilities include the creation of buttons with integrated animation styles a
Uses DOM data attributes to determine the specific visual style and animation of the loading spinner.
lozad.js is a JavaScript lazy loading library and viewport-based media loader. It serves as a dependency-free wrapper around the Intersection Observer API to defer the loading of images and iframes until they enter the browser viewport. The project functions as a responsive image loader that optimizes page speed by delivering the most appropriate image sizes and formats based on the user's screen. It includes capabilities for responsive image optimization and layout stabilization through the use of image placeholders to prevent content shifts. The library manages the full lifecycle of deferr
Uses data attributes to store media URLs, deferring the actual network request.
loadCSS es un cargador de CSS asíncrono e inyector de hojas de estilo no bloqueante. Proporciona una implementación técnica para cargar hojas de estilo sin bloquear el proceso de renderizado del navegador para mantener una interfaz de usuario receptiva. El proyecto implementa un patrón de carga de CSS específico para detectar cuándo las hojas de estilo asíncronas han terminado de cargarse en diferentes navegadores web. Esto permite la ejecución de funciones de callback solo después de que una hoja de estilo se haya cargado completamente para asegurar un comportamiento visual consistente. La herramienta cubre la inserción programática de hojas de estilo, la inyección dinámica basada en la lógica de la aplicación y la detección de carga de hojas de estilo. Gestiona cómo se solicitan los estilos para optimizar el rendimiento del frontend.
Provides the ability to configure media queries and relational attributes of stylesheet links before DOM injection.
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
Applies styles when an element has a specific ARIA state or data attribute using variants.
Stores extra information on standard HTML elements using data-* attributes without predefined meaning.
Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition. The library distinguishes itself through a state propagation model that distributes
Exposes scoped data attributes on every component part for CSS targeting of structural and state hooks.
Esta es una extensión de Webpack utilizada para extraer CSS de archivos JavaScript en hojas de estilo independientes para compilaciones de producción. Funciona como un empaquetador de CSS y optimizador de activos que separa los estilos de los paquetes de scripts para permitir la carga paralela y prevenir destellos de contenido sin estilo (FOUC). El proyecto proporciona utilidades para generar exportaciones de módulos de JavaScript que mapean definiciones de estilo locales a componentes de la aplicación. También implementa la gestión dinámica de temas cargando condicionalmente diferentes variantes de CSS a través de consultas de recursos y admite el almacenamiento en caché del navegador a largo plazo mediante el uso de nombres de archivo con hash de contenido. Las áreas de capacidad cubren la optimización del rendimiento frontend mediante la obtención asíncrona de estilos bajo demanda y optimizaciones de renderizado del lado del servidor, incluyendo la inserción de estilos en línea y la prevención de etiquetas duplicadas. La herramienta también admite un flujo de trabajo de desarrollo con recarga de módulos en caliente para actualizaciones de estilo instantáneas. El plugin se integra en la tubería de construcción de Webpack y proporciona opciones de configuración para patrones de nombres de archivo de salida y hooks de ciclo de vida para personalizar la generación de etiquetas de enlace de estilo.
Provides programmatic control over HTML link element attributes to support preloading and cross-origin loading.
prefixfree is a runtime CSS processor and polyfill library designed to ensure cross-browser visual consistency. It functions as a client-side script that automatically detects browser requirements and injects necessary vendor prefixes into CSS properties and values at runtime. The project utilizes a system that intercepts stylesheets and modifies style rules in browser memory. It includes a DOM mutation style monitor that observes the document tree for new elements to apply prefixing logic to dynamic content and attributes. The library provides polyfilling for modern CSS standards in legacy
Provides an attribute-based mechanism to exclude specific CSS blocks from the automated prefixing process.