Awesome GitHub RepositoriesCard Layouts

Bulma is a design-agnostic CSS framework that provides a collection of pre-styled interface components and layout primitives. It is built to be independent of specific JavaScript frameworks or build tools, allowing developers to construct responsive web interfaces by applying standardized classes directly to semantic HTML markup. The framework distinguishes itself through a utility-first approach that combines modular component styling with a flexible grid system. It leverages native CSS variables to manage design tokens, enabling real-time visual customization, automatic dark mode adaptation

This project is a comprehensive UI toolkit that provides a declarative, reactive framework for building modular web interfaces. It centers on a component-based architecture that maps application state to rendered elements, utilizing a twelve-point flexbox grid system and nested containers to manage complex layouts. The library ensures consistent behavior across large-scale applications by providing centralized configuration for component defaults, themes, and global design tokens. What distinguishes this framework is its deep integration of Material Design principles alongside a highly flexib

fullPage.js is a JavaScript full-screen scrolling library and layout engine used to create websites composed of vertical sections and horizontal slides that snap to the viewport. It provides a system for organizing web content into full-screen pages with automatic snapping behavior. The library distinguishes itself through a WebGL transition framework and visual storytelling tools, enabling cinematic effects such as 3D rotations, parallax backgrounds, fading, and water distortion during navigation. It also features a responsive adaptation system that can switch from automatic snapping to stan

Anki is a cross-platform flashcard management system designed to optimize long-term memory retention through spaced-repetition learning. It functions as a digital learning assistant that uses active recall practice and automated scheduling algorithms to determine the ideal timing for card reviews based on individual performance history. The core system relies on a local relational database to ensure data persistence and portability, while supporting complex study workflows through flexible note-type schema modeling and template-driven content rendering. The platform distinguishes itself throu

This project is a comprehensive documentation site framework and static site generator theme designed to transform markdown files into professional, responsive websites. It functions as a technical content platform that supports complex documentation projects, including multi-project management, blog workflows, and advanced content formatting. By processing source files through an extensible pipeline, it generates self-contained HTML sites that can be hosted on any web server without a database. What distinguishes this framework is its focus on developer experience and highly configurable bui

Pico is a lightweight, classless CSS framework designed to provide consistent, accessible, and responsive visual defaults for web interfaces. By prioritizing semantic HTML tags, it allows developers to build clean, structured pages without the need for complex class names or heavy dependencies. The framework functions as a comprehensive design system that automatically applies styling to standard elements, ensuring that typography, spacing, and layout remain cohesive across different screen sizes. The framework distinguishes itself through a modular, variable-driven architecture that emphasiz

CoreUI Free Bootstrap Admin Template is a pre-built, responsive admin dashboard template built on Bootstrap 5 for constructing back-office interfaces. It provides a library of UI components with native wrappers for React, Vue, and Angular applications, alongside a Sass-based theming system for managing brand colors, dark mode, and design tokens via variables and CSS custom properties. The template includes a set of advanced form controls such as autocomplete, date pickers, and multi-step wizards with built-in validation, and supports switching the entire interface between built-in dark and li

Bootstrap Table is a jQuery plugin for rendering interactive data grids with sorting, pagination, and filtering. It features a remote data integration system for fetching and synchronizing content from JSON endpoints using AJAX and server-side processing. The project includes a styling layer that adapts markup to work with various CSS frameworks, such as Bootstrap, Semantic UI, Bulma, and Material Design. It provides specialized rendering modes, including a hierarchical tree grid for parent-child row relationships and a responsive card-view table that transforms grids into mobile-friendly lay

nodeppt هو مولد عروض تقديمية Markdown ومولد مواقع ثابتة يحول ملفات Markdown المصدرية إلى شرائح عرض تفاعلية قائمة على الويب. يتكون من أداة بناء بسطر الأوامر ووقت تشغيل واجهة أمامية متخصص يُستخدم لتقديم العروض التقديمية في متصفح الويب. يتميز المشروع بوقت تشغيل عرض تقديمي ثنائي الشاشة يزامن عرض الجمهور مع شاشة ملاحظات المتحدث الخاصة. ويستخدم خط أنابيب Markdown قائماً على المكونات الإضافية ونظام تحويل DOM للمعالجة اللاحقة لتحويل النحو المخصص إلى محتوى HTML مهيكل. يدعم إطار العمل توليد المحتوى التقني بما في ذلك عرض الصيغ الرياضية، وتسليط الضوء على نحو الكود، وتضمين الرسوم البيانية التفاعلية. ويوفر نظام تخطيط لتصميمات الشبكة والبطاقات، ومؤثرات حركية بصرية، وتصورات قائمة على البيانات. يتم تضمين خادم تطوير محلي للتكرار في الوقت الفعلي، ويتم توفير أداة لتصدير العروض التقديمية كمستندات PDF.

Hexo Theme Butterfly is a visual template for Hexo that transforms Markdown content into a responsive website featuring card-based layouts. It functions as a technical content renderer capable of displaying complex data such as mathematical formulas, Mermaid diagrams, and interactive charts within blog posts. The interface is PWA enabled, utilizing service workers and manifest files to provide offline access and installation on mobile devices. The theme distinguishes itself through a wide array of specialized content rendering tools, including musical score rendering, chronological timelines,

wifi-card is a utility for creating printable network credential cards and QR codes to facilitate guest wireless network access. It functions as a generator that produces physical or digital cards containing network names and passwords, automating the process of joining a WiFi network through scannable image formats. The tool operates using a pure-client runtime model, processing all user input and generating the final document entirely within the browser. It employs SVG-based layout rendering and a CSS grid template system to ensure high-resolution, crisp lines across different paper sizes.

This project is a collection of practical implementation examples and demonstrations for building mobile applications using a JavaScript-based native framework. It serves as a cross-platform mobile framework demo, providing a gallery of interactive interface patterns and native integration suites. The repository showcases specialized capabilities including high-performance 2D and 3D visual content through OpenGL graphics implementation. It also features a suite of native hardware integrations, covering biometric authentication via fingerprint scanning and gesture-based unlock patterns. The p

Card-style Hugo theme designed for bloggers

WebSlides is an open-source tool for creating HTML presentations, landing pages, and longform articles directly in the browser. It provides a full-screen slide deck system where each section element becomes an individual slide with horizontal and vertical navigation, keyboard shortcuts, touch gestures, and remote presenter support. The project distinguishes itself by offering over 40 pre-built slide components such as covers, cards, quotes, and flexible block grids that can be assembled without writing custom layout code. It includes built-in support for embedding rich media like background i

Polaris React is a production-ready component library that implements Shopify's Polaris design system for building consistent merchant-facing admin interfaces. It provides a comprehensive set of reusable React components, including accessible form inputs, data display elements, layout and navigation structures, and visual feedback indicators, all styled through a semantic color token system applied via CSS custom properties for dynamic light and dark mode support. The library distinguishes itself with an icon-first visual language featuring over 400 commerce-specific SVG icons delivered as fi

هذا المشروع عبارة عن مجموعة من المكونات المرئية ونماذج الواجهة المصممة لإنشاء انتقالات متحركة بين معاينات الشبكة المكثفة وطرق عرض التفاصيل الموسعة. يوفر مكتبة انتقالات البطاقات ومكونات واجهة مستخدم متحركة SwiftUI تتيح واجهة نظرة خاطفة (peek-and-pop) حيث تتوسع بطاقات المعاينة الصغيرة إلى محتوى بملء الشاشة. ينفذ النظام تخطيط شبكة متحركاً يسمح لمجموعات البطاقات بالتوسع والتقلص للكشف عن مزيد من المعلومات. يتم دعم هذه التفاعلات بواسطة رسوم متحركة تحول خلايا المحتوى الصغيرة إلى واجهات بملء الشاشة للحفاظ على الاستمرارية المرئية وتدفق المستخدم.

BulletinBoard is a SwiftUI component library and interface framework for iOS. It provides a set of reusable elements designed to render interactive, accessible information cards at the bottom of a screen to guide users through onboarding and configuration tasks. The framework functions as an onboarding UI kit, offering pre-defined card templates and the ability to create custom layout structures. These components are built with integrated accessibility support to ensure that interface updates and interaction states are announced to screen readers and assistive controllers. The library covers

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

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