Awesome GitHub RepositoriesCSS Base Styles

Bootstrap is a comprehensive, mobile-first CSS framework designed for building responsive web interfaces. It provides a standardized library of reusable UI components, such as navigation bars, modals, and forms, alongside a robust grid system that ensures consistent layout alignment across diverse viewport sizes. By establishing a baseline through browser normalization and standardized typography, the project enables developers to create accessible, cross-browser compatible web applications. The framework distinguishes itself through a modular Sass-based architecture that allows for deep cust

Utility-first CSS framework for fast, design-system-friendly styling.

This project is a curated knowledge base and technical reference for professional web styling. It serves as a comprehensive guide to modern CSS best practices, focusing on techniques that leverage native browser capabilities to create efficient, maintainable, and scalable stylesheets. The collection emphasizes the use of declarative style logic and modern layout engines to replace brittle, imperative approaches. By prioritizing native pseudo-class state management, logical property mapping, and relative unit scaling, the guide demonstrates how to build responsive interfaces that remain consis

UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia

Yoga is a cross-platform layout engine and embeddable core that determines the dimensions and offsets of hierarchical element trees. It provides a C++ implementation of the Flexbox layout model to calculate element positions and sizes based on web standards, ensuring a uniform appearance across diverse devices and operating systems. The engine is designed for portability via a C API, allowing the layout logic to be integrated into various host languages and platforms. It utilizes an incremental layout system that identifies modified subtrees and recalculates positions only for changed nodes a

This project is a visual layout and styling package for the Hexo static site generator. It provides a static site template that converts Markdown files into a styled website, featuring a responsive interface with built-in support for internationalization and localized content display. The theme includes a specialized presentation layer for source code with syntax highlighting and customizable color schemes. It further enables the creation of professional portfolios by integrating social profile linking and external commenting platforms. The system organizes content through a taxonomy-based o

A minimalist CSS framework.

NexT is a responsive, elegant static blog theme for Hexo that generates HTML pages from Markdown posts. It is designed as a pre-built visual design for the Hexo framework, producing mobile-friendly layouts that adapt across devices with support for dark mode and multiple visual schemes. The theme distinguishes itself through extensive customization options, including five built-in code highlighting themes for technical blog posts and a multilingual interface supporting over 15 languages. It offers configuration flexibility by allowing theme settings to be stored either in the main Hexo config

Radium is a CSS-in-JS styling library that transforms static inline styles into dynamic, responsive, and animated CSS for React components. It functions as a component style toolchain and React inline style enhancer, allowing developers to define styles using plain JavaScript objects while gaining capabilities like browser state handling, vendor prefixing, and style composition. The library extends React's inline style system by automatically resolving browser state styles for hover, focus, and active interactions without manual event handlers. It supports inline media queries that evaluate a

modern-normalize is a CSS reset stylesheet and browser style normalizer. It provides a minimal set of global style overrides designed to remove inconsistent default user-agent styles and prevent browser-specific rendering quirks. The project establishes a predictable frontend layout baseline by standardizing typography and layout properties. It specifically enforces a consistent layout model by applying border-box sizing across all HTML elements. The stylesheet uses tag-based global targeting to apply normalization rules directly to HTML elements, removing the need for specific class names.

Magic of CSS is a structured tutorial series that teaches web developers advanced CSS layout, typography, and animation techniques through hands-on examples. The course covers the full spectrum of CSS capabilities, from foundational box model and positioning concepts to sophisticated animation and interactive state management, all without relying on JavaScript. The series distinguishes itself by teaching practical, real-world CSS patterns such as inline-block justified grids, percentage-based absolute positioning, table-display vertical centering, and letter-span styling techniques. It demons

Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty

carbon-now-cli هي أداة سطر أوامر تعرض كود المصدر في صور عالية الجودة. تعمل كمحول عرض قائم على الطرفية ومصدر للصور، حيث تحول ملفات النصوص الخام أو تدفقات الإدخال إلى أصول مرئية منسقة. تركز الأداة على التحكم الدقيق في المحتوى، مما يسمح للمستخدمين بتحديد نطاقات أسطر دقيقة لاستخراج الكود المستهدف. تدعم خيارات تصدير بتنسيقات متعددة، مما يتيح حفظ الصور كملفات أو إرسالها مباشرة إلى حافظة النظام. تتم إدارة التخصيص المرئي من خلال نظام إعدادات مسبقة للتصميم. يمكن للمستخدمين تحديد وحفظ ألوان وخطوط ودقة مخصصة عبر ملفات إعدادات محلية للحفاظ على أنماط مرئية متسقة عبر مشاريع مختلفة.

Basscss is a lightweight CSS utility toolkit built on an atomic, single-purpose class architecture. Each class performs exactly one visual function, enabling immutable, side-effect-free styling where no class ever overrides or conflicts with another. The system provides a predefined spacing scale, responsive breakpoint prefixes for conditional styling across device widths, and accessible visibility control that keeps content programmatically available to assistive technologies. The framework distinguishes itself through a float-based grid system that constructs layouts using floated percentag

Theme-ui هو إطار عمل سمات React وأداة CSS-in-JS تُستخدم لبناء واجهات مستخدم قابلة للسمات. يعمل كأداة نظام تصميم تنشئ مقاييس مركزية قائمة على القيود للألوان، والطباعة، والتباعد لضمان الاتساق البصري عبر التطبيقات. يتميز إطار العمل باختصار استجابة قائم على المصفوفة للتخطيطات التي تبدأ بالهواتف المحمولة ومدير وضع ألوان مخصص يتزامن مع تفضيلات المتصفح ويحفظ اختيارات المستخدم. كما يتميز بنظام لإنشاء متغيرات أنماط مسماة للتحكم في مظهر المكونات عبر الخصائص ويوفر قدرات مزامنة لترجمة تكوينات السمات إلى Figma Styles. يغطي المشروع مجموعة واسعة من قدرات التصميم، بما في ذلك حقن CSS العالمي لإعادة تعيين العناصر، وتجاوزات السمات المتداخلة عبر السياق، ونظام تكوين دمج عميق لتوسيع إعدادات التصميم المسبقة. يتضمن أيضاً مجموعة من مكونات التخطيط القابلة للسمات، مثل الشبكات المتجاوبة ومدخلات النماذج الموحدة. تتوفر إضافة مخصصة لدمج نظام التصميم داخل مواقع Gatsby.

sanitize.css هي مكتبة تطبيع وإعادة تعيين CSS توفر أساسًا موحدًا للطباعة، وعناصر التحكم في النماذج، وتخطيطات العناصر. تزيل تباينات المتصفح الافتراضية لإنشاء أساس يمكن التنبؤ به لتصميم الويب والتطبيقات الحديثة. ينفذ المشروع أساس CSS حديثًا يركز على خطوط واجهة النظام والعرض المتسق عبر مختلف متصفحات الويب وأنظمة التشغيل. ويدمج مجموعة خطوط نظام لضمان طباعة متسقة وعرض سريع على منصات مختلفة. تغطي ورقة الأنماط إمكانيات التخطيط وإمكانية الوصول الأساسية، بما في ذلك توحيد نموذج حجم الصندوق (box-sizing) وإزالة الأنماط الخاصة بنظام التشغيل من مدخلات النماذج. وتطبق قيودًا متجاوبة على الصور ومقاطع الفيديو لمنع تجاوز التخطيط وتتضمن آليات لاحترام تفضيلات مستوى النظام للحركة المقللة.

sanitize.css هي مكتبة إعادة تعيين CSS (CSS reset) ومُطَبِّع (normalizer) يوفر ورقة أنماط أساسية لمشاريع الويب. تنشئ نقطة بداية بصرية موحدة عن طريق إزالة الأنماط الافتراضية غير المتسقة الخاصة بالمتصفح وتطبيق إعادة تعيين CSS عالمي. يركز المشروع على تطبيع الأنماط عبر المتصفحات، مما يضمن عرض الطباعة، وعناصر التحكم في النماذج، وعناصر HTML بشكل متسق عبر مختلف المتصفحات والأجهزة. وتنفذ مجموعة خطوط نظام (system-font stack) للقضاء على تباينات العرض وتطبق تطبيع حجم الصندوق (box-sizing) لضمان نموذج تخطيط يمكن التنبؤ به. تتضمن المكتبة أيضًا أسس إمكانية الوصول، مثل تعيين أدوار إمكانية الوصول إلى مؤشرات بصرية واحترام تفضيلات النظام للحركة المقللة. بالإضافة إلى ذلك، تتعامل مع الوسائط المتجاوبة عن طريق إجبار الصور والمحتوى المضمن على البقاء داخل حاوياتهم الأصلية.

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

Fuelux هو إطار عمل JavaScript للواجهات الأمامية ومكتبة مكونات تُستخدم لبناء واجهات مستخدم متسقة وموحدة. يوفر مجموعة من عناصر التحكم خفيفة الوزن وإضافات CSS المصممة لضمان الاتساق المرئي والوظيفي عبر واجهات الويب المختلفة. يستخدم المشروع بنية أمامية معيارية، حيث ينظم الوظائف في وحدات تحكم JavaScript مستقلة. يسمح هذا التصميم للإطار بالبقاء خفيف الوزن وقابلاً للتوسيع مع فصل السلوك الوظيفي عن تعريفات CSS المرئية. يتعامل الإطار مع تطوير الواجهة من خلال إدارة الحالة القائمة على المكونات والعرض المعتمد على الحالة، مع تحديث نموذج كائن المستند (DOM) مباشرة. ويستخدم نظاماً من إضافات الأنماط لتوفير سمات موحدة وعرض مرئي متسق عبر التطبيق.

Buttons is a CSS button framework and UI component library providing a set of reusable visual elements for mobile and desktop web environments. It functions as a CSS utility system and variable-driven theming engine that enables the creation of consistent buttons using configurable typography and shapes. The system utilizes a modular CSS architecture where independent style and color classes are composed on single elements to produce varied visual effects, such as 3D or flat designs. It employs a declarative design framework that maps configuration options to real-time visual attributes via c