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 este un instrument de build pentru frontend și un wrapper de configurare pentru Webpack care simplifică împachetarea (bundling) activelor JavaScript, TypeScript și CSS. Funcționează ca un task runner și manager de active statice, oferind o interfață simplificată pentru a compila fișierele sursă în active optimizate pentru producție. Proiectul se distinge prin furnizarea unui API fluent care abstractizează configurațiile complexe de bundling în apeluri de metode ușor de citit. Include pipeline-uri specializate pentru transformarea componentelor Vue și React în JavaScript compatibil cu browserul și oferă un sistem pentru prefixarea automată a vendorilor și compilarea foilor de stil. Instrumentul acoperă o gamă largă de capabilități, inclusiv preprocesarea CSS, optimizarea bundle-urilor JavaScript și gestionarea fișierelor statice. Gestionează cerințele de producție prin cache busting bazat pe hash și extracția bibliotecilor de vendor. În timpul dezvoltării, oferă monitorizarea modificărilor fișierelor și sincronizarea stării browserului pentru a automatiza fluxul de lucru de recompilare.

Laravel Mix este un pipeline de active frontend și un instrument de build JavaScript care funcționează ca un wrapper pentru Webpack. Oferă un sistem de configurare declarativ pentru a simplifica compilarea și împachetarea activelor JavaScript și CSS. Instrumentul se concentrează pe simplificarea fluxului de lucru Webpack, permițând utilizatorilor să gestioneze pipeline-uri de build complexe fără a scrie fișiere de configurare extinse de la zero. Utilizează un API cu interfață fluentă pentru a defini pașii de build și regulile de transformare a activelor. Sistemul acoperă împachetarea modernă a activelor web, inclusiv transpilararea modulelor JavaScript și integrarea preprocesoarelor CSS pentru Sass și Less. De asemenea, gestionează compilarea activelor gata de producție prin procesare bazată pe plugin-uri și maparea automată a surselor.

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 este un sistem de grid CSS și un plugin PostCSS conceput pentru a defini lățimile și pozițiile coloanelor folosind calcule matematice pentru design-uri responsive. Funcționează ca un instrument de build-time care procesează regulile de grid personalizate în layout-uri CSS compatibile cu browserul. Frameworkul transformă declarațiile de layout non-standard în proprietăți native CSS Grid și Flexbox. Utilizează un pipeline bazat pe PostCSS pentru a calcula coordonatele exacte și lățimile coloanelor, asigurându-se că stilurile rezultate sunt compatibile cu browserele web standard. Proiectul operează ca un strat middleware agnostic față de preprocesor, permițându-i să proceseze stiluri indiferent dacă sursa este CSS simplu, Sass sau Less. Automatizează generarea structurilor de grid responsive care ajustează dimensiunile și pozițiile elementelor în funcție de dimensiunile ecranului.

LibSass este un compilator Sass-la-CSS de înaltă performanță implementat ca un motor nativ C++. Transformă foile de stil scrise într-un limbaj pre-procesor în CSS standard. Proiectul oferă o interfață binară de aplicație (ABI) în limbajul C care permite motorului de compilare să fie încorporat în diferite limbaje de programare. Dispune de o arhitectură modulară care suportă extinderea logicii de compilare printr-un sistem de plugin-uri de tip bibliotecă partajată. Motorul gestionează rezoluția foilor de stil și utilizează un proces în mai multe etape pentru a parsa textul sursă într-un arbore de sintaxă abstractă înainte de a emite output-ul CSS final.

Papercss este un framework CSS UI și un sistem de design de tip document, utilizat pentru a construi layout-uri web responsive. Funcționează ca o bibliotecă CSS bazată pe Less care aplică o estetică de tip hârtie și o tipografie structurată pentru a oferi paginilor web aspectul unor documente fizice. Proiectul încorporează, de asemenea, un model de bibliotecă CSS de tip utility-first pentru stilizare rapidă. Framework-ul se distinge prin capacitatea de a automatiza decorațiunile vizuale, cum ar fi aplicarea stilurilor de bordură rotative și a efectelor de umbră elementelor copil. Utilizează un sistem de variabile Less și compilare modulară a foilor de stil, permițând utilizatorilor să personalizeze variabilele globale de design și să selecteze seturi specifice de componente pentru a minimiza dimensiunea finală a CSS-ului. Biblioteca acoperă o gamă largă de capabilități, inclusiv o grilă responsive cu douăsprezece coloane bazată pe Flexbox și un set complet de componente UI, cum ar fi modale, notificări de alertă și bare de navigare responsive. Oferă, de asemenea, stilizare specializată pentru conținut tehnic, inclusiv blocuri de cod, tabele de date și layout-uri de articole, alături de suport pentru modurile de culoare deschis și închis.

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

Acest proiect este un loader Webpack care transformă codul sursă Sass în foi de stil CSS standard. Acesta servește drept strat de integrare și rezolvator de module, conectând procesele de compilare Sass la un pipeline de bundling de module bazat pe JavaScript. Instrumentul oferă un mecanism pentru selectarea diferitelor implementări de compilatoare Sass și suportă injectarea de date sau variabile globale înainte ca fișierul de intrare să fie procesat. De asemenea, permite utilizarea de importatori personalizați pentru a extinde modul în care fișierele sunt localizate și rezolvate în timpul compilării. Sistemul gestionează rezolvarea dependențelor pentru importuri și generarea de source maps pentru a lega CSS-ul compilat înapoi la fișierele sursă originale. Mai mult, gestionează traducerea avertismentelor preprocesorului în alerte ale sistemului de build și optimizează performanța prin reutilizarea unui proces de compilare de lungă durată pentru mai multe fișiere.

sass-loader este un plugin de instrument de build care compilează fișierele sursă Sass în CSS standard pentru compatibilitatea cu browserele web. Funcționează ca o punte între logica de rezoluție a motorului de build și motoarele de compilare Sass pentru a procesa foile de stil. Instrumentul oferă un wrapper pentru diferite motoare de compilare Sass, permițând configurarea specifică a motorului. Gestionează rezolvarea importurilor de stiluri externe folosind logica internă de rezoluție a căilor și suportă injectarea de date de stil partajate și variabile în fișierele de intrare pentru consistență la nivelul întregului proiect. Sistemul gestionează transformarea stilurilor printr-un pipeline care include generarea de source maps pentru a lega CSS-ul compilat înapoi la fișierele sursă originale și un mecanism de rutare care mapează avertismentele compilatorului la output-ul build-ului.

Acest proiect este un utilitar de linie de comandă conceput pentru a automatiza inițializarea și scaffolding-ul aplicațiilor web. Stabilește o structură de directoare standardizată și generează fișierele de configurare boilerplate necesare pentru a porni un nou mediu de server. Instrumentul se distinge prin oferirea unei generări de proiecte personalizabile, permițând utilizatorilor să selecteze motoare de vizualizare (view engines) și preprocesoare de stiluri specifice în timpul procesului de configurare. Actualizează dinamic manifestele de dependențe și configurează fișierele de ignorare pentru version control pentru a se asigura că mediul rezultat este gata pentru dezvoltare imediată. Dincolo de structura de bază, generatorul gestionează integrarea diverselor motoare de randare și fluxuri de lucru CSS pentru a se potrivi cerințelor specifice ale proiectului. Acesta funcționează ca un instrument fundamental pentru dezvoltatori, menit să automatizeze crearea unor medii de aplicație consistente și organizate.