Awesome GitHub RepositoriesCSS-Only UI Components

WeUI is a mobile web UI library and design system consisting of CSS components and HTML templates. It is specifically designed to replicate the visual identity and interface of the WeChat messaging ecosystem, providing a standardized set of components to build responsive mobile web interfaces. The library functions as a stateless component system, utilizing a pure CSS architecture and HTML templates that rely on external JavaScript for interactivity. It employs a BEM-based class naming convention to manage component nesting and prevent style leakage across complex layouts. The framework incl

NES.css is an 8-bit CSS framework and styling system that transforms standard HTML elements into pixelated interfaces inspired by classic gaming consoles. It serves as a retro UI component library and toolkit for rendering text, borders, and icons with a blocky aesthetic. The framework uses pure CSS to emulate 8-bit graphics without relying on external images or JavaScript rendering. It implements pixel-art border simulations and integrates pixel-style web fonts to maintain a consistent gaming aesthetic across different browsers. The system provides a suite of game-themed interface elements,

Short CSS code snippets for all your development needs

Ratchet is a web-based mobile UI framework and component-based library designed to create responsive mobile application interfaces. It provides a CSS mobile layout system that allows for the development of application frontends using standard web technologies. The framework focuses on mobile app interface design and rapid prototyping, utilizing pre-styled visual elements to ensure consistent styling across various screen sizes and resolutions. The system employs a CSS-only approach to define interactive states and layouts, incorporating a grid-based responsive layout and utility-first styles

This project is a CSS flag icon library and UI component set providing scalable national flag graphics for web interfaces. It delivers a collection of vector-based flags implemented as CSS classes to ensure visual consistency across different screen sizes and resolutions. The library uses ISO-3166-1-alpha-2 naming to map CSS class identifiers directly to international standard two-letter country codes. This allows for predictable asset lookup and the integration of regional visual identifiers to support web interface localization. The system covers CSS-based iconography, utilizing SVG backgr

Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

98.css is a CSS retro UI framework and component library designed to recreate the visual aesthetic of legacy desktop operating systems. It serves as a retro design system and web UI emulator, providing a collection of styles to build faithful reproductions of vintage user interfaces. The framework employs a CSS-only component architecture to emulate classic software environments. It uses border-shadow emulation and state-based visual transitions to simulate physical button presses and three-dimensional panels without requiring external JavaScript logic. The library covers a wide range of int

This project is a curated collection of galleries and component libraries that demonstrate pure CSS visual effects, 3D transforms, animation patterns, and layout solutions. It serves as a visual catalog of interactive UI elements and graphics built exclusively with HTML and CSS. The collection distinguishes itself by implementing complex interactivity, such as state management and animation triggers, using only CSS pseudo-classes and keyframes without any JavaScript. It also features a system for generative art and algorithmic patterns, as well as spatial 3D constructions using perspective an

hint.css is a pure CSS tooltip library and styling framework used to create accessible informational pop-ups. It functions as a lightweight user interface component that transforms ARIA attributes into visible tooltips without the use of JavaScript. The framework is designed to be customizable, offering a system of configurable class prefixes to prevent naming conflicts within larger web projects. It utilizes a BEM-inspired namespace to ensure stylesheets remain conflict-free when integrated into existing environments. The library covers a range of UI capabilities, including directional posi

CSS Layout is a pure CSS pattern library that provides pre-built layout components for common page structures, implemented entirely with CSS using flexbox and grid. The collection focuses on reusable, encapsulated components that handle overlapping elements, vertical centering, sticky footers, and classic page layouts without requiring any JavaScript for rendering or interactivity. The library offers a range of practical layout implementations including centered navigation menus, element stacking techniques, holy grail page layouts, and responsive grid systems. Each pattern is built as a self

This project is a collection of lightweight animated loading indicators and pure CSS UI components. It provides a library of pre-made styles and keyframes for rendering visual motion effects and loading spinners without the use of JavaScript. The library prioritizes minimal document object model overhead by utilizing a single-element HTML structure for each loader. It employs pseudo-elements to create complex shapes and relies on font-size based scaling to ensure proportional resizing across different dimensions. These components function as user interface feedback systems, providing visual

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

balloon.css هو إطار عمل خفيف الوزن يعتمد على CSS لتنفيذ تلميحات (Tooltips) وتراكبات نصية قابلة للتخصيص. إنها مكتبة CSS بحتة تتيح إنشاء عناصر منبثقة معلوماتية دون الحاجة إلى وقت تشغيل JavaScript. يستخدم إطار العمل متغيرات CSS للسماح بتخصيص الألوان والخطوط والرسوم المتحركة. يمكن وضع التلميحات في اتجاهات محددة بالنسبة لعنصر التفعيل، وتدعم تضمين محتوى غني مثل رموز HTML الخاصة وخطوط الأيقونات. تتم إدارة الرؤية بشكل أساسي من خلال مشغلات التمرير (Hover)، على الرغم من أن النظام يدعم الرؤية البرمجية عن طريق تبديل سمات HTML محددة. يستخدم محرك العرض التموضع المطلق والعناصر الزائفة (Pseudo-elements) لعرض المحتوى بناءً على تفاعل المستخدم أو الحالات المحددة.

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

hugo-book is a documentation theme and static site framework for Hugo designed to create structured technical manuals, documentation books, and multilingual knowledge bases. It transforms directory structures into hierarchical navigation menus and formatted technical content. The framework includes a specialized OpenAPI documentation renderer that converts specifications into structured reference pages. It also provides a full-text client-side search integration and supports multilingual content with right-to-left layout mirroring. The project covers a wide range of content rendering capabil

instagram.css is a CSS image filter library and a pure CSS UI component. It provides a collection of predefined stylesheets designed to apply photographic filters and color grading to web images. The library achieves these visual effects without the use of JavaScript or external image processing libraries. It uses a system of CSS filter functions to orchestrate brightness, contrast, and saturation, mapping specific aesthetic names to hardcoded property sets. The project covers client-side image processing and frontend UI customization. It allows for the application of photo filters to create

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

Picnic هو إطار عمل CSS خفيف الوزن مصمم لتسريع تطوير واجهات الويب المتجاوبة. يوفر قاعدة تصميم أساسية تطبق التصاميم المرئية مباشرة على عناصر HTML الأصلية، مما يسمح بإنشاء تخطيطات نظيفة وسهلة الوصول دون الحاجة إلى أسماء فئات مخصصة واسعة النطاق. يتميز إطار العمل بتنفيذ مكونات واجهة مستخدم تفاعلية—مثل النوافذ المنبثقة (modals)، وعلامات التبويب، وقوائم التنقل—بالكامل من خلال CSS. من خلال استخدام الفئات الزائفة (pseudo-classes) ومحددات الأشقاء، فإنه يدير حالة المكون والتفاعل دون الحاجة إلى منطق JavaScript خارجي. يضمن هذا النهج بقاء عناصر الواجهة المعقدة وظيفية وخفيفة الوزن. تتضمن المكتبة مجموعة شاملة من الأدوات الهيكلية والتقديمية، بما في ذلك نظام شبكة يعتمد على flexbox، وتكديس العناصر الرأسي، ومحركات تخطيط متجاوبة تتكيف تلقائياً مع أحجام الشاشات المختلفة. كما توفر تصميماً موحداً لعرض البيانات، مثل الجداول والبطاقات، إلى جانب مكونات إدخال متخصصة مثل مناطق تحميل الملفات بالسحب والإفلات وتلميحات الأدوات السياقية.

This project is a comprehensive frontend engineering study guide designed to cover the essential technical concepts of modern web development. It serves as a multi-disciplinary reference for mastering the browser execution engine, the JavaScript language, and the structural fundamentals of the web. The collection provides deep dives into JavaScript language internals, including execution contexts, closures, prototypes, and the event loop. It further details web browser internals, focusing on the critical rendering path, DOM construction, and engine mechanics. The guide also covers web securi