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 هو خط أنابيب أصول واجهة أمامية وأداة بناء JavaScript تعمل كغلاف لـ Webpack. يوفر نظام تهيئة تصريحي لتبسيط تجميع وحزم أصول JavaScript وCSS. تركز الأداة على تبسيط سير عمل Webpack، مما يسمح للمستخدمين بإدارة خطوط أنابيب بناء معقدة دون كتابة ملفات تهيئة واسعة النطاق من الصفر. يستخدم واجهة برمجة تطبيقات سلسة لتعريف خطوات البناء وقواعد تحويل الأصول. يغطي النظام حزم أصول الويب الحديثة، بما في ذلك ترجمة وحدات JavaScript ودمج معالج CSS المسبق لـ Sass وLess. كما يدير تجميع الأصول الجاهزة للإنتاج من خلال المعالجة القائمة على الإضافات ورسم خرائط المصدر التلقائي.

Laravel Mix هو أداة بناء واجهة أمامية وغلاف تهيئة لـ Webpack يبسط تجميع أصول JavaScript وTypeScript وCSS. يعمل كمنفذ مهام ومدير أصول ثابتة، ويوفر واجهة مبسطة لتجميع ملفات المصدر في أصول إنتاج محسنة. يتميز المشروع بتوفير واجهة برمجة تطبيقات سلسة تجرد تهيئات التجميع المعقدة إلى استدعاءات طرق قابلة للقراءة البشرية. يتضمن خطوط أنابيب متخصصة لتحويل مكونات Vue وReact إلى JavaScript متوافق مع المتصفح ويوفر نظاماً للبادئات التلقائية وتجميع أوراق الأنماط. تغطي الأداة مجموعة واسعة من القدرات بما في ذلك معالجة CSS المسبقة، وتحسين حزمة JavaScript، وإدارة الملفات الثابتة. يتعامل مع متطلبات الإنتاج من خلال كسر ذاكرة التخزين المؤقت القائم على التجزئة واستخراج مكتبة البائع. أثناء التطوير، يوفر مراقبة تغيير الملفات ومزامنة حالة المتصفح لأتمتة سير عمل إعادة التجميع.

preact-cli هو واجهة سطر أوامر وخط أنابيب بناء لتهيئة وتطوير ونشر تطبيقات Preact. يعمل كأداة سقالات للمشروع تستخدم قوالب محددة مسبقًا لإنشاء هياكل الدليل الضرورية والقوالب الأساسية لتطبيقات الويب الجديدة. توفر الأداة قدرات متخصصة لإنشاء تطبيقات ويب تقدمية (PWA) عن طريق إنشاء عمال الخدمة (service workers) واستراتيجيات التخزين المؤقت للوظائف دون اتصال. كما تتضمن عارضًا مسبقًا للموقع الساكن يحول مسارات التطبيق إلى ملفات HTML أثناء عملية البناء لتحسين ظهور محرك البحث وسرعات التحميل. يغطي سير عمل التطوير الأوسع إدارة خط أنابيب الأصول، بما في ذلك تحويل JavaScript، وتجميع الوحدات، ومعالجة معالجات CSS المسبقة. كما يدير تحسين الإنتاج من خلال تقسيم الكود القائم على المسار وحقن متغيرات البيئة.

Lost is a CSS grid system and PostCSS plugin designed to define column widths and positions using mathematical calculations for responsive screen designs. It functions as a build-time tool that processes custom grid rules into browser-compatible CSS layouts. The framework transforms non-standard layout declarations into native CSS Grid and Flexbox properties. It uses a PostCSS-based pipeline to calculate exact coordinates and column widths, ensuring that the resulting styles are compatible with standard web browsers. The project operates as a preprocessor-agnostic middleware layer, allowing

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 هو إطار عمل لواجهة المستخدم (UI) يعتمد على CSS ونظام تصميم بنمط المستندات، يُستخدم لبناء تخطيطات صفحات ويب متجاوبة. يعمل كمكتبة CSS تعتمد على Less تطبق جماليات تشبه الورق وخطوطاً منظمة لمنح صفحات الويب مظهر المستندات المادية. يدمج المشروع أيضاً نموذج مكتبة CSS يركز على الأدوات (utility-first) لتسريع عملية التصميم. يتميز إطار العمل بقدرته على أتمتة الزخارف المرئية، مثل تطبيق أنماط الحدود الدوارة وتأثيرات الظل على العناصر الفرعية. يستخدم نظام متغيرات يعتمد على Less وتجميعاً معيارياً لملفات الأنماط، مما يسمح للمستخدمين بتخصيص متغيرات التصميم العالمية واختيار مجموعات مكونات محددة لتقليل حجم ملف الأنماط النهائي. تغطي المكتبة مجموعة واسعة من الإمكانيات، بما في ذلك شبكة متجاوبة من اثني عشر عموداً تعتمد على Flexbox، ومجموعة شاملة من مكونات واجهة المستخدم مثل النوافذ المنبثقة (modals)، وتنبيهات الإشعارات، وأشرطة التنقل المتجاوبة. كما يوفر تنسيقاً متخصصاً للمحتوى التقني، بما في ذلك كتل الأكواد، وجداول البيانات، وتخطيطات المقالات، إلى جانب دعم وضعي الألوان الفاتح والداكن.

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

هذا المشروع هو محمل (loader) لـ Webpack يقوم بتحويل كود مصدر Sass إلى أوراق أنماط CSS قياسية. يعمل كطبقة تكامل ومحلل وحدات، حيث يربط عمليات تجميع Sass بخط أنابيب تجميع وحدات قائم على JavaScript. توفر الأداة آلية لاختيار تنفيذات مختلفة لمترجم Sass وتدعم حقن البيانات أو المتغيرات العالمية قبل معالجة ملف الإدخال. كما تسمح باستخدام مستوردين مخصصين لتوسيع كيفية تحديد الملفات وحلها أثناء التجميع. يدير النظام حل التبعيات للاستيرادات وتوليد خرائط المصدر لربط CSS المجمع بملفات المصدر الأصلية. كما يتعامل مع ترجمة تحذيرات المعالج المسبق إلى تنبيهات لنظام البناء ويحسن الأداء من خلال إعادة استخدام عملية تجميع طويلة الأمد عبر ملفات متعددة.

sass-loader هو إضافة لأداة بناء تقوم بتجميع ملفات مصدر Sass إلى CSS قياسي لتوافق متصفح الويب. يعمل كجسر بين منطق حل محرك البناء ومحركات تجميع Sass لمعالجة أوراق الأنماط. توفر الأداة غلافاً لمحركات تجميع Sass مختلفة، مما يسمح بتكوين محرك محدد. يتعامل مع حل استيرادات الأنماط الخارجية باستخدام منطق حل المسار الداخلي ويدعم حقن بيانات الأنماط المشتركة والمتغيرات في ملفات الإدخال لضمان الاتساق على مستوى المشروع. يدير النظام تحويل الأنماط من خلال خط أنابيب يتضمن توليد خرائط المصدر لربط CSS المجمع بملفات المصدر الأصلية وآلية توجيه تربط تحذيرات المترجم بمخرجات البناء.

هذا المشروع عبارة عن أداة سطر أوامر (CLI) مصممة لأتمتة تهيئة وتجهيز تطبيقات الويب. يقوم بإنشاء هيكل مجلدات قياسي وتوليد ملفات الإعدادات الأساسية اللازمة لبدء بيئة خادم جديدة. تتميز الأداة بتوفير إمكانية إنشاء مشاريع قابلة للتخصيص، مما يسمح للمستخدمين باختيار محركات عرض (view engines) ومعالجات مسبقة لملفات الأنماط (stylesheet preprocessors) محددة أثناء عملية الإعداد. كما تقوم بتحديث ملفات تعريف التبعيات (dependency manifests) وملفات تجاهل نظام التحكم في الإصدار (version control ignore files) ديناميكياً لضمان جاهزية البيئة الناتجة للتطوير الفوري. بعيداً عن الهيكل الأساسي، يتعامل المولد مع دمج محركات العرض المختلفة وسير عمل CSS لتتناسب مع متطلبات المشروع المحددة. وهي تعمل كأداة أساسية للمطورين لأتمتة إنشاء بيئات تطبيقات منظمة ومتسقة.