Awesome GitHub RepositoriesCSS Preprocessors

Solid is a declarative JavaScript framework for building user interfaces through fine-grained reactivity. By utilizing a compile-time template transformation process, it converts JSX into direct DOM manipulation instructions, eliminating the need for a virtual tree. This architecture allows the framework to track dependencies at the individual element level, ensuring that state changes trigger surgical updates to the interface. The framework distinguishes itself through its isomorphic rendering pipeline, which shares reactive logic across server and client environments to support both initial

Hover is a collection of pre-defined CSS3 animations and reusable stylesheets for links, buttons, and images. It serves as a web UI animation kit and a library of styles written in CSS, Sass, and LESS to provide visual feedback when a user hovers over an element. The library includes specialized interactive effects that simulate tactile behaviors, such as page curls and the rendering of speech bubbles. It also provides a set of animation primitives to manipulate backgrounds, borders, shadows, and glow effects to simulate depth and elevation. The project covers a wide range of element motion

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

Blur Admin is an AngularJS and Bootstrap framework for building responsive administrative dashboards. It provides a set of grid-based templates and predefined layout components designed to create high-resolution management interfaces that adapt to different screen sizes. The framework includes a Sass-based theme engine that allows for the customization of visual appearances, color schemes, and brand identity through a central set of style variables. It specifically features a blur theme effect that applies translucent backgrounds and blurred effects across the interface. The system covers da

Weather Icons is a weather icon font library and CSS icon set designed for displaying atmospheric conditions and wind direction in user interfaces. It functions as a weather data mapping tool that translates numerical condition codes from external API providers into corresponding visual assets. The project provides scalable meteorological and maritime icons delivered as font files, including OTF and TTF formats for use in both web environments and professional graphic design software. It features a system for visualizing wind flow by mapping degree values or cardinal labels to directional arr

Farm is a Rust-based web build tool and development server that compiles JavaScript, TypeScript, CSS, HTML, and static assets into optimized bundles. It uses a module-graph-based bundling approach with persistent module-level caching, enabling near-instant builds and sub-20ms hot module replacement during development. The tool processes assets based on file extensions, handling CSS, Sass, Less, PostCSS, HTML, and images as first-class modules without requiring JavaScript transformation. Farm distinguishes itself through its Vite-compatible plugin system, accepting Vite, Rollup, and Unplugin p

Laravel Mix es un pipeline de activos de frontend y herramienta de construcción de JavaScript que funciona como un envoltorio para Webpack. Proporciona un sistema de configuración declarativo para simplificar la compilación y el empaquetado de activos de JavaScript y CSS. La herramienta se centra en la simplificación del flujo de trabajo de Webpack, permitiendo a los usuarios gestionar pipelines de construcción complejos sin escribir archivos de configuración extensos desde cero. Utiliza una API de interfaz fluida para definir pasos de construcción y reglas de transformación de activos. El sistema cubre el empaquetado de activos web modernos, incluyendo la transpilación de módulos de JavaScript y la integración de preprocesadores de CSS para Sass y Less. También gestiona la compilación de activos listos para producción mediante procesamiento basado en plugins y mapeo de fuentes (source mapping) automático.

Laravel Mix es una herramienta de construcción (build tool) de frontend y un envoltorio de configuración para Webpack que simplifica el empaquetado de activos de JavaScript, TypeScript y CSS. Funciona como un ejecutor de tareas y gestor de activos estáticos, proporcionando una interfaz simplificada para compilar archivos fuente en activos de producción optimizados. El proyecto se distingue por proporcionar una API fluida que abstrae configuraciones de empaquetado complejas en llamadas a métodos legibles por humanos. Incluye pipelines especializados para transformar componentes de Vue y React en JavaScript compatible con navegadores y ofrece un sistema para el prefijado automático de proveedores y la compilación de hojas de estilo. La herramienta cubre una amplia gama de capacidades, incluyendo preprocesamiento de CSS, optimización de paquetes de JavaScript y gestión de archivos estáticos. Maneja los requisitos de producción mediante la invalidación de caché basada en hash y la extracción de bibliotecas de proveedores. Durante el desarrollo, proporciona monitoreo de cambios de archivos y sincronización del estado del navegador para automatizar el flujo de trabajo de recompilación.

preact-cli es una interfaz de línea de comandos y tubería de construcción para inicializar, desarrollar y desplegar aplicaciones Preact. Funciona como una herramienta de andamiaje de proyectos que utiliza plantillas predefinidas para generar las estructuras de directorio y el boilerplate necesarios para nuevas aplicaciones web. La herramienta proporciona capacidades especializadas para crear aplicaciones web progresivas (PWA) mediante la generación de service workers y estrategias de caché para la funcionalidad offline. También incluye un pre-renderizador de sitios estáticos que convierte las rutas de la aplicación en archivos HTML durante el proceso de construcción para mejorar la visibilidad en motores de búsqueda y las velocidades de carga. El flujo de trabajo de desarrollo más amplio cubre la gestión de la tubería de activos, incluyendo transpilación de JavaScript, empaquetado de módulos y el procesamiento de preprocesadores CSS. También gestiona la optimización de producción mediante la división de código basada en rutas y la inyección de variables de entorno.

Lost es un sistema de rejilla (grid) CSS y plugin de PostCSS diseñado para definir anchos y posiciones de columnas utilizando cálculos matemáticos para diseños de pantalla responsivos. Funciona como una herramienta de tiempo de compilación que procesa reglas de rejilla personalizadas en diseños CSS compatibles con navegadores. El framework transforma declaraciones de diseño no estándar en propiedades nativas de CSS Grid y Flexbox. Utiliza un pipeline basado en PostCSS para calcular coordenadas exactas y anchos de columna, asegurando que los estilos resultantes sean compatibles con los navegadores web estándar. El proyecto opera como una capa de middleware agnóstica al preprocesador, permitiendo procesar estilos independientemente de si la fuente es CSS plano, Sass o Less. Automatiza la generación de estructuras de rejilla responsivas que ajustan los tamaños y posiciones de los elementos según las dimensiones de la pantalla.

LibSass is a high-performance Sass to CSS compiler implemented as a native C++ engine. It transforms style sheets written in a pre-processor language into standard CSS. The project provides a C language application binary interface that allows the compilation engine to be embedded into different programming languages. It features a modular architecture that supports extending compilation logic through a shared-library plugin system. The engine handles style sheet resolution and uses a multi-stage process to parse source text into an abstract syntax tree before emitting the final CSS output.

Papercss es un framework de UI CSS y un sistema de diseño estilo documento utilizado para construir layouts de páginas web responsivas. Funciona como una librería CSS basada en Less que aplica una estética similar al papel y una tipografía estructurada para dar a las páginas web la apariencia de documentos físicos. El proyecto también incorpora un modelo de librería CSS de utilidad primero (utility-first) para un estilizado rápido. El framework se distingue por su capacidad para automatizar decoraciones visuales, como la aplicación de estilos de borde rotados y efectos de sombra a elementos hijos. Utiliza un sistema de variables basado en Less y compilación modular de hojas de estilo, permitiendo a los usuarios personalizar variables de diseño globales y seleccionar conjuntos de componentes específicos para minimizar el tamaño final de la hoja de estilo. La librería cubre una amplia gama de capacidades, incluyendo una rejilla responsiva de doce columnas basada en Flexbox y un conjunto completo de componentes de UI como modales, notificaciones de alerta y barras de navegación responsivas. También proporciona estilos especializados para contenido técnico, incluyendo bloques de código, tablas de datos y layouts de artículos, junto con soporte para modos de color claro y oscuro.

Koala is a graphical user interface for managing the compilation, transpilation, and background monitoring of web asset preprocessors. It serves as a build tool that converts Less, Sass, and CoffeeScript files into browser-compatible CSS and JavaScript. The application features a visual interface for controlling the transformation process, removing the need for command line interaction. It integrates a background file monitor that automatically recompiles source files in real time as changes are detected on the local filesystem. The tool provides utilities for managing global and project-spe

This project is a Webpack loader that transforms Sass source code into standard CSS stylesheets. It serves as an integration layer and module resolver, connecting Sass compilation processes to a JavaScript-based module bundling pipeline. The tool provides a mechanism for selecting different Sass compiler implementations and supports the injection of global data or variables before the entry file is processed. It also allows for the use of custom importers to extend how files are located and resolved during compilation. The system manages dependency resolution for imports and the generation o

sass-loader is a build tool plugin that compiles Sass source files into standard CSS for web browser compatibility. It functions as a bridge between build engine resolution logic and Sass compilation engines to process stylesheets. The tool provides a wrapper for different Sass compilation engines, allowing for specific engine configuration. It handles the resolution of external style imports using internal path resolution logic and supports the injection of shared style data and variables into entry files for project-wide consistency. The system manages the transformation of styles through

Este proyecto es una utilidad de línea de comandos diseñada para automatizar la inicialización y el scaffolding de aplicaciones web. Establece una estructura de directorios estandarizada y genera los archivos de configuración boilerplate necesarios para arrancar un nuevo entorno de servidor. La herramienta se distingue por ofrecer una generación de proyectos personalizable, permitiendo a los usuarios seleccionar motores de vistas y preprocesadores de hojas de estilo específicos durante el proceso de configuración. Actualiza dinámicamente los manifiestos de dependencias y configura los archivos de exclusión de control de versiones para asegurar que el entorno resultante esté listo para el desarrollo inmediato. Más allá de la estructura básica, el generador maneja la integración de varios motores de renderizado y flujos de trabajo CSS para ajustarse a los requisitos específicos del proyecto. Funciona como una herramienta fundamental para desarrolladores para automatizar la creación de entornos de aplicación consistentes y organizados.