Awesome GitHub RepositoriesFlexbox

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

This is a layout library for Android applications that implements the CSS Flexible Box layout model. It provides a view container and engine that arrange child views by distributing space and aligning content according to a flexible box model. The framework enables the creation of responsive user interfaces that automatically adjust element positioning, wrapping, and growth based on available screen dimensions and orientations. The system includes capabilities for adaptive layout workflows, dynamic element alignment, and a virtualized rendering system for recycling views to display large dat

tview is a library for building interactive text-based user interfaces in Go. It functions as a toolkit for managing event loops, user input, and screen rendering, providing a framework of pre-built widgets and an integrated layout engine for creating command-line applications. The project distinguishes itself through a comprehensive layout system that uses grid and flexbox models to create responsive designs. It also supports UI layer stacking to manage multiple screens and modal overlays. The framework includes a diverse suite of interactive components for data display, such as tables and

Proton Native is a cross-platform desktop framework that compiles React code into native applications for Windows, macOS, and Linux. It enables developers to build desktop applications using the same component syntax and patterns as React Native, with the ability to reuse existing React Native components with minimal modifications. The framework integrates a flexbox layout engine for positioning native desktop widgets and embeds the Node.js runtime for direct filesystem and system-level access. The framework translates React component trees into native desktop widgets through a bidirectional

Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys

Flexbox Froggy is a CSS flexbox learning game that teaches layout properties through interactive positioning puzzles. Players learn flexbox by writing CSS rules to move frogs onto lily pads, with each level presenting a new layout challenge that reinforces a specific flexbox concept. The game embeds a code editor with syntax highlighting and inline error hints, allowing players to write and test CSS rules in a live preview environment. A hint and solution system provides optional guidance for stuck players, while the visual feedback loop updates frog and lily pad positions in real-time based

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

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

Flexibility هي مكتبة JavaScript ومحرك تخطيط مصمم لـ polyfill قدرات CSS Flexbox. تضمن محاذاة وتوزيع العناصر بشكل متسق عبر إصدارات المتصفحات المختلفة، مستهدفةً بشكل خاص البيئات القديمة التي تفتقر إلى الدعم الأصلي لمواصفات الصندوق المرن. يوفر المشروع توافق التخطيط عبر المتصفحات من خلال محاكاة سلوك الحاوية المرنة. تدير خصائص flexbox الديناميكية للحفاظ على واجهة مستخدم مستقرة ويمكن التنبؤ بها بغض النظر عن إصدار متصفح الزائر. يغطي النظام اجتياز DOM، وحساب الإحداثيات يدوياً، وحقن الأنماط لفرض الهياكل المرئية. يتضمن آليات لإعادة حساب التخطيط الديناميكي وترجمة خصائص CSS الحديثة إلى أنماط متوافقة مع المتصفحات القديمة.