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 est un pipeline d'assets frontend et un outil de build JavaScript qui fonctionne comme un wrapper pour Webpack. Il fournit un système de configuration déclaratif pour simplifier la compilation et le regroupement des assets JavaScript et CSS. L'outil se concentre sur la simplification du workflow Webpack, permettant aux utilisateurs de gérer des pipelines de build complexes sans écrire de fichiers de configuration extensifs à partir de zéro. Il utilise une API d'interface fluide pour définir les étapes de build et les règles de transformation des assets. Le système couvre le regroupement d'assets web modernes, incluant la transpilation de modules JavaScript et l'intégration de préprocesseurs CSS pour Sass et Less. Il gère également la compilation d'assets prêts pour la production via un traitement basé sur des plugins et une génération automatique de source maps.

Laravel Mix est un outil de build frontend et un wrapper de configuration pour Webpack qui simplifie le regroupement (bundling) des assets JavaScript, TypeScript et CSS. Il fonctionne comme un exécuteur de tâches et un gestionnaire d'assets statiques, fournissant une interface simplifiée pour compiler les fichiers sources en assets de production optimisés. Le projet se distingue par une API fluide qui abstrait les configurations de bundling complexes en appels de méthodes lisibles par l'humain. Il inclut des pipelines spécialisés pour transformer les composants Vue et React en JavaScript compatible avec les navigateurs et offre un système pour le préfixage automatique des vendeurs et la compilation de feuilles de style. L'outil couvre un large éventail de capacités, incluant le préprocesseur CSS, l'optimisation des bundles JavaScript et la gestion des fichiers statiques. Il gère les exigences de production via le cache busting basé sur le hash et l'extraction de bibliothèques tierces. Pendant le développement, il fournit une surveillance des changements de fichiers et une synchronisation de l'état du navigateur pour automatiser le workflow de recompilation.

preact-cli est une interface en ligne de commande et un pipeline de build pour initialiser, développer et déployer des applications Preact. Il fonctionne comme un outil de scaffolding de projet qui utilise des templates prédéfinis pour générer les structures de répertoires et le boilerplate nécessaires pour les nouvelles applications web. L'outil fournit des capacités spécialisées pour créer des progressive web apps (PWA) en générant des service workers et des stratégies de cache pour la fonctionnalité hors ligne. Il inclut également un pré-rendu de site statique qui convertit les routes d'application en fichiers HTML pendant le processus de build pour améliorer le référencement et les vitesses de chargement. Le workflow de développement plus large couvre la gestion du pipeline d'assets, incluant la transpilation JavaScript, le bundling de modules et le traitement des préprocesseurs CSS. Il gère également l'optimisation de production via le code splitting basé sur les routes et l'injection de variables d'environnement.

Lost est un système de grille CSS et un plugin PostCSS conçu pour définir les largeurs et positions des colonnes en utilisant des calculs mathématiques pour des designs d'écran responsifs. Il fonctionne comme un outil de build qui traite les règles de grille personnalisées en mises en page CSS compatibles avec les navigateurs. Le framework transforme les déclarations de mise en page non standard en propriétés natives CSS Grid et Flexbox. Il utilise un pipeline basé sur PostCSS pour calculer les coordonnées exactes et les largeurs de colonnes, garantissant que les styles résultants sont compatibles avec les navigateurs web standards. Le projet opère comme une couche middleware agnostique aux préprocesseurs, lui permettant de traiter des styles indépendamment du fait que la source soit du CSS brut, Sass ou Less. Il automatise la génération de structures de grille responsives qui ajustent les tailles et positions des éléments en fonction des dimensions de l'écran.

LibSass est un compilateur Sass vers CSS haute performance implémenté en tant que moteur C++ natif. Il transforme les feuilles de style écrites dans un langage de pré-processeur en CSS standard. Le projet fournit une interface binaire d'application (ABI) en langage C qui permet au moteur de compilation d'être intégré dans différents langages de programmation. Il dispose d'une architecture modulaire qui prend en charge l'extension de la logique de compilation via un système de plugins de bibliothèque partagée. Le moteur gère la résolution des feuilles de style et utilise un processus multi-étapes pour analyser le texte source en un arbre de syntaxe abstrait avant d'émettre la sortie CSS finale.

Papercss est un framework CSS UI et un système de design de style document utilisé pour construire des mises en page web responsives. Il fonctionne comme une bibliothèque CSS basée sur Less qui applique une esthétique papier et une typographie structurée pour donner aux pages web l'apparence de documents physiques. Le projet intègre également un modèle de bibliothèque CSS orienté utilitaires pour un stylage rapide. Le framework se distingue par sa capacité à automatiser les décorations visuelles, comme l'application de styles de bordures rotatives et d'effets d'ombre aux éléments enfants. Il utilise un système de variables basé sur Less et une compilation modulaire des feuilles de style, permettant aux utilisateurs de personnaliser les variables de design globales et de sélectionner des ensembles de composants spécifiques pour minimiser la taille finale de la feuille de style. La bibliothèque couvre un large éventail de capacités, incluant une grille responsive de douze colonnes basée sur Flexbox et un ensemble complet de composants UI tels que des modales, des notifications d'alerte et des barres de navigation responsives. Elle fournit également un stylage spécialisé pour le contenu technique, incluant des blocs de code, des tableaux de données et des mises en page d'articles, avec une prise en charge des modes clair et sombre.

Koala est une interface graphique pour gérer la compilation, la transpilation et la surveillance en arrière-plan des préprocesseurs d'assets web. Il sert d'outil de build qui convertit les fichiers Less, Sass et CoffeeScript en CSS et JavaScript compatibles avec les navigateurs. L'application dispose d'une interface visuelle pour contrôler le processus de transformation, éliminant le besoin d'interagir via la ligne de commande. Elle intègre un moniteur de fichiers en arrière-plan qui recompile automatiquement les fichiers source en temps réel dès que des changements sont détectés sur le système de fichiers local. L'outil fournit des utilitaires pour gérer les paramètres de compilation globaux et spécifiques au projet, y compris la minification après traitement pour compresser le code compilé. Il inclut également un système de notification qui capture la sortie du compilateur pour détecter et signaler les erreurs de syntaxe.

Ce projet est un loader Webpack qui transforme le code source Sass en feuilles de style CSS standard. Il sert de couche d'intégration et de résolveur de modules, connectant les processus de compilation Sass à un pipeline de regroupement de modules basé sur JavaScript. L'outil fournit un mécanisme pour sélectionner différentes implémentations de compilateur Sass et prend en charge l'injection de données ou de variables globales avant que le fichier d'entrée ne soit traité. Il permet également l'utilisation d'importateurs personnalisés pour étendre la façon dont les fichiers sont localisés et résolus pendant la compilation. Le système gère la résolution des dépendances pour les importations et la génération de source maps pour lier le CSS compilé aux fichiers sources originaux. Il gère en outre la traduction des avertissements du préprocesseur en alertes du système de build et optimise les performances en réutilisant un processus de compilation longue durée sur plusieurs fichiers.

sass-loader est un plugin de système de build qui compile les fichiers sources Sass en CSS standard pour la compatibilité avec les navigateurs web. Il fonctionne comme un pont entre la logique de résolution du moteur de build et les moteurs de compilation Sass pour traiter les feuilles de style. L'outil fournit un wrapper pour différents moteurs de compilation Sass, permettant une configuration spécifique du moteur. Il gère la résolution des importations de styles externes en utilisant une logique de résolution de chemin interne et prend en charge l'injection de données de style partagées et de variables dans les fichiers d'entrée pour une cohérence à l'échelle du projet. Le système gère la transformation des styles via un pipeline qui inclut la génération de source maps pour lier le CSS compilé aux fichiers sources originaux et un mécanisme de routage qui mappe les avertissements du compilateur à la sortie du build.

Ce projet est un utilitaire en ligne de commande conçu pour automatiser l'initialisation et le scaffolding d'applications web. Il établit une structure de répertoire standardisée et génère les fichiers de configuration boilerplate nécessaires pour démarrer un nouvel environnement serveur. L'outil se distingue par une génération de projet personnalisable, permettant aux utilisateurs de sélectionner des moteurs de vue et des préprocesseurs de feuilles de style spécifiques lors de la configuration. Il met à jour dynamiquement les manifestes de dépendances et configure les fichiers d'exclusion de contrôle de version pour garantir que l'environnement résultant est prêt pour un développement immédiat. Au-delà de la structure de base, le générateur gère l'intégration de divers moteurs de rendu et flux de travail CSS pour correspondre aux exigences spécifiques du projet. Il fonctionne comme un outil de développement fondamental pour automatiser la création d'environnements d'application cohérents et organisés.