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 ist eine Frontend-Asset-Pipeline und ein JavaScript-Build-Tool, das als Wrapper für Webpack fungiert. Es bietet ein deklaratives Konfigurationssystem, um die Kompilierung und Bündelung von JavaScript- und CSS-Assets zu vereinfachen. Das Tool konzentriert sich auf die Vereinfachung des Webpack-Workflows und ermöglicht es Benutzern, komplexe Build-Pipelines zu verwalten, ohne umfangreiche Konfigurationsdateien von Grund auf neu schreiben zu müssen. Es verwendet eine flüssige API-Schnittstelle, um Build-Schritte und Asset-Transformationsregeln zu definieren. Das System deckt moderne Web-Asset-Bündelung ab, einschließlich JavaScript-Modul-Transpilierung und CSS-Präprozessor-Integration für Sass und Less. Es verwaltet zudem die Kompilierung produktionsreifer Assets durch Plugin-basierte Verarbeitung und automatisches Source-Mapping.

Laravel Mix ist ein Frontend-Build-Tool und ein Konfigurations-Wrapper für Webpack, der das Bündeln von JavaScript-, TypeScript- und CSS-Assets vereinfacht. Es fungiert als Task-Runner und Static-Asset-Manager und bietet eine vereinfachte Schnittstelle, um Quelldateien in optimierte Produktions-Assets zu kompilieren. Das Projekt zeichnet sich durch eine flüssige API aus, die komplexe Bündelungskonfigurationen in menschenlesbare Methodenaufrufe abstrahiert. Es enthält spezialisierte Pipelines zur Transformation von Vue- und React-Komponenten in browserkompatibles JavaScript und bietet ein System für automatisches Vendor-Prefixing und Stylesheet-Kompilierung. Das Tool deckt ein breites Spektrum an Funktionen ab, einschließlich CSS-Preprocessing, JavaScript-Bundle-Optimierung und Verwaltung statischer Dateien. Es bewältigt Produktionsanforderungen durch Hash-basiertes Cache-Busting und die Extraktion von Vendor-Bibliotheken. Während der Entwicklung bietet es Dateiänderungsüberwachung und Browser-Status-Synchronisation, um den Rekompilierungs-Workflow zu automatisieren.

preact-cli is a command line interface and build pipeline for initializing, developing, and deploying Preact applications. It functions as a project scaffolding tool that uses predefined templates to generate the necessary directory structures and boilerplate for new web applications. The tool provides specialized capabilities for creating progressive web apps by generating service workers and caching strategies for offline functionality. It also includes a static site pre-renderer that converts application routes into HTML files during the build process to improve search engine visibility an

Lost ist ein CSS-Grid-System und PostCSS-Plugin, das darauf ausgelegt ist, Spaltenbreiten und -positionen mithilfe mathematischer Berechnungen für responsive Screen-Designs zu definieren. Es fungiert als Build-Time-Tool, das benutzerdefinierte Grid-Regeln in browserkompatible CSS-Layouts verarbeitet. Das Framework transformiert nicht standardisierte Layout-Deklarationen in native CSS-Grid- und Flexbox-Eigenschaften. Es verwendet eine PostCSS-basierte Pipeline, um exakte Koordinaten und Spaltenbreiten zu berechnen, wodurch sichergestellt wird, dass die resultierenden Styles mit Standard-Webbrowsern kompatibel sind. Das Projekt arbeitet als preprocessor-agnostische Middleware-Schicht, die es ermöglicht, Styles unabhängig davon zu verarbeiten, ob die Quelle reines CSS, Sass oder Less ist. Es automatisiert die Generierung responsiver Grid-Strukturen, die Elementgrößen und -positionen basierend auf Bildschirmabmessungen anpassen.

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 ist ein CSS-UI-Framework und ein Design-System im Dokumentenstil, das zum Aufbau responsiver Webseiten-Layouts verwendet wird. Es fungiert als Less-basierte CSS-Bibliothek, die eine papierartige Ästhetik und strukturierte Typografie anwendet, um Webseiten das Aussehen physischer Dokumente zu verleihen. Das Projekt integriert zudem ein Utility-First-CSS-Modell für schnelles Styling. Das Framework zeichnet sich durch die Fähigkeit aus, visuelle Dekorationen zu automatisieren, wie etwa das Anwenden rotierender Rahmenstile und Schatteneffekte auf Kindelemente. Es nutzt ein Less-basiertes Variablensystem und modulare Stylesheet-Kompilierung, wodurch Nutzer globale Designvariablen anpassen und spezifische Komponentensets auswählen können, um die finale Stylesheet-Größe zu minimieren. Die Bibliothek deckt ein breites Spektrum an Funktionen ab, einschließlich eines Flexbox-basierten responsiven 12-Spalten-Rasters und eines umfassenden Sets an UI-Komponenten wie Modals, Alert-Benachrichtigungen und responsiven Navigationsleisten. Sie bietet zudem spezialisiertes Styling für technische Inhalte, einschließlich Code-Blöcken, Datentabellen und Artikellayouts, sowie Unterstützung für helle und dunkle Farbmodi.

Koala ist eine grafische Benutzeroberfläche für die Verwaltung von Kompilierung, Transpilierung und Hintergrundüberwachung von Web-Asset-Präprozessoren. Es dient als Build-Tool, das Less-, Sass- und CoffeeScript-Dateien in browserkompatibles CSS und JavaScript umwandelt. Die Anwendung bietet eine visuelle Oberfläche zur Steuerung des Transformationsprozesses, wodurch die Interaktion über die Kommandozeile entfällt. Sie integriert einen Hintergrund-Dateimonitor, der Quelldateien bei Änderungen im lokalen Dateisystem automatisch in Echtzeit neu kompiliert. Das Tool bietet Dienstprogramme zur Verwaltung globaler und projektspezifischer Kompilierungseinstellungen, einschließlich Minifizierung zur Komprimierung des kompilierten Codes. Zudem enthält es ein Benachrichtigungssystem, das die Compiler-Ausgabe erfasst, um Syntaxfehler zu erkennen und zu melden.

Dieses Projekt ist ein Webpack-Loader, der Sass-Quellcode in Standard-CSS-Stylesheets transformiert. Er dient als Integrationsschicht und Modul-Resolver, der Sass-Kompilierungsprozesse mit einer JavaScript-basierten Modul-Bundling-Pipeline verbindet. Das Tool bietet einen Mechanismus zur Auswahl verschiedener Sass-Compiler-Implementierungen und unterstützt die Injektion globaler Daten oder Variablen, bevor die Einstiegsdatei verarbeitet wird. Zudem ermöglicht es die Verwendung benutzerdefinierter Importer, um die Dateisuche und -auflösung während der Kompilierung zu erweitern. Das System verwaltet die Abhängigkeitsauflösung für Imports und die Generierung von Source-Maps, um kompiliertes CSS mit den ursprünglichen Quelldateien zu verknüpfen. Es verarbeitet zudem die Übersetzung von Präprozessor-Warnungen in Build-System-Meldungen und optimiert die Leistung durch die Wiederverwendung eines langlebigen Compiler-Prozesses über mehrere Dateien hinweg.

sass-loader ist ein Build-Tool-Plugin, das Sass-Quelldateien für die Webbrowser-Kompatibilität in Standard-CSS kompiliert. Es fungiert als Brücke zwischen der Auflösungslogik der Build-Engine und Sass-Kompilierungs-Engines zur Verarbeitung von Stylesheets. Das Tool bietet einen Wrapper für verschiedene Sass-Kompilierungs-Engines, was eine spezifische Engine-Konfiguration ermöglicht. Es handhabt die Auflösung externer Style-Imports mittels interner Pfad-Auflösungslogik und unterstützt die Injektion gemeinsam genutzter Style-Daten und Variablen in Einstiegsdateien für projektweite Konsistenz. Das System verwaltet die Transformation von Styles durch eine Pipeline, die die Generierung von Source-Maps zur Verknüpfung von kompiliertem CSS mit den ursprünglichen Quelldateien sowie einen Routing-Mechanismus umfasst, der Compiler-Warnungen an die Build-Ausgabe weiterleitet.

Dieses Projekt ist ein CLI-Utility zur Automatisierung der Initialisierung und des Scaffoldings von Webanwendungen. Es etabliert eine standardisierte Verzeichnisstruktur und generiert die notwendigen Boilerplate-Konfigurationsdateien, um eine neue Serverumgebung aufzusetzen. Das Tool zeichnet sich durch anpassbare Projektgenerierung aus, bei der Benutzer während des Setups spezifische View-Engines und Stylesheet-Präprozessoren auswählen können. Es aktualisiert dynamisch Abhängigkeits-Manifeste und konfiguriert Version-Control-Ignore-Dateien, damit die Umgebung sofort für die Entwicklung bereit ist. Über die grundlegende Struktur hinaus übernimmt der Generator die Integration verschiedener Rendering-Engines und CSS-Workflows, um spezifischen Projektanforderungen gerecht zu werden. Es fungiert als grundlegendes Entwickler-Tool zur Automatisierung der Erstellung konsistenter, organisierter Anwendungsumgebungen.