Awesome GitHub RepositoriesFlexbox Layouts

Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application. The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It uti

NativeScript is a cross-platform mobile development framework that enables the creation of native iOS and Android applications using JavaScript or TypeScript. It provides a direct bridge to native platform APIs, allowing developers to invoke native classes, methods, and properties directly from script code while maintaining full access to underlying mobile operating system features. The framework distinguishes itself through its direct native UI rendering, which maps declarative markup components to actual platform-native widgets rather than web-based views. This architecture is supported by

This project is a comprehensive JavaScript programming tutorial and language reference. It serves as a web development education resource providing instruction on modern language fundamentals, object-oriented design, and advanced asynchronous programming patterns. The resource functions as both a frontend development guide and a technical reference. It covers core language features such as closures, prototypes, promises, and typed arrays, while providing practical lessons on managing browser data and handling network requests. The content spans several key capability areas, including browser

This project is a themed technical art collection and visual archive of stylized illustrations depicting computer science literature. It serves as a technical book illustration gallery that pairs anime-style characters with specific programming and technical textbooks. The repository functions as a static technical asset library, utilizing a JSON-driven image gallery to map visual assets to their corresponding metadata. This structured approach allows for the sourcing of theme-consistent artwork for use in developer blogs, presentations, and technical documentation. The system employs a resp

This project is a cross-platform user interface framework that maps mobile-native component primitives to standard web elements. It enables developers to build consistent applications that function across both mobile and web environments by providing a unified library of components and shared logic. The framework distinguishes itself through a specialized style engine that converts JavaScript object-based declarations into optimized, scoped CSS at runtime. It also features a responsive layout engine that implements a flexbox-based system, ensuring that interfaces adapt dynamically to differen

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

Tamagui is a cross-platform user interface framework designed to build high-performance, themeable applications that share logic and styling across web and mobile environments. It functions as a comprehensive design system orchestrator, providing a collection of type-safe components that compile to optimized atomic CSS for the web and native code for mobile platforms. By utilizing a build-time compiler, the framework eliminates runtime overhead, ensuring consistent visual output and interaction behavior regardless of the target platform. The framework distinguishes itself through its advanced

This project is a collection of programming language references and syntax cheat sheets designed for rapid developer onboarding. It serves as a library of code-based documentation that uses valid source code files to provide whirlwind tours of various language specifications. The project focuses on programming language learning by providing concise, commented code examples that explain core features and syntax in place. This approach enables developers to quickly grasp language-specific patterns, data types, and execution flow through a consistent reference format. The content covers a broad

FTXUI is a C++ terminal user interface library and cross-platform console framework used for building interactive command line applications. It functions as a declarative terminal layout engine and a component-based UI toolkit that enables the creation of responsive interfaces. The library is distinguished by its terminal graphics and animation capabilities, allowing for the rendering of custom shapes, data plots, and smooth visual transitions using easing functions. It provides a comprehensive set of interactive widgets and a layout system utilizing flexbox and grid containers that adapt to

This project is a minimalist visual layout and template for blogs generated using the Hexo static site generator. It provides a responsive static site template designed to maintain a distraction-free content presentation across different screen sizes. The theme focuses on personal brand presentation by integrating built-in support for social profile links and a curated directory of affiliated websites. It further enables reader engagement through the integration of third-party commenting systems and web traffic analytics. The underlying structure utilizes configuration-driven metadata, templ

Rebass is a React design system library that provides a collection of theme-driven, responsive UI primitives. It functions as a theme-based layout engine, using a set of stateless components to standardize spacing, typography, and colors across a user interface. The library distinguishes itself by mapping style properties to a central design theme through a styled-system approach. This allows for responsive style mapping where components automatically adapt their appearance based on screen size and provides the ability to swap underlying HTML elements while preserving styling logic to maintai

This project is a front-end interview study guide and a collection of structured notes designed for technical job preparation. It serves as a comprehensive reference for web technologies, common technical interview questions, and JavaScript algorithm implementation. The notebook distinguishes itself by integrating specialized guides for web performance optimization, browser API documentation, and JavaScript algorithm references. It provides a structured approach to solving coding challenges involving data structures like binary trees, linked lists, and array manipulation. The content covers

go-questions is a technical knowledge base and study resource for the Go programming language. It serves as a curated collection of interview questions and detailed explanations focused on the internal principles and advanced patterns of the Go ecosystem. The project is implemented as a static site generated from markdown files, which separates the technical educational content from the presentation logic. The site uses a file-system-based content hierarchy to automate navigation and maps folder structures directly to public URLs. The platform covers areas of technical knowledge synthesis, l

Unopinionated utilities for resizeable split views

Material Kit is an open-source UI component library that provides pre-styled Material Design elements for building responsive web interfaces with Bootstrap 5. It offers a collection of reusable components like buttons, inputs, navbars, cards, and modals that follow Google's Material Design guidelines, along with a 12-column flexbox grid system for fluid layouts that adapt to any screen size. The kit distinguishes itself by including pre-built page sections such as headers, feature blocks, pricing tables, and footers that can be combined into complete page layouts, reducing the time needed to

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

Dieses Projekt ist ein responsives Layout-Framework für Angular, das ein System von Direktiven bereitstellt, um adaptive Benutzeroberflächen mittels CSS Flexbox und CSS Grid zu erstellen. Es enthält spezialisierte Bibliotheken zur Verwaltung der Ausrichtung flexibler Boxen und zur Strukturierung komplexer zweidimensionaler Seitengitter. Das Framework bietet einen Breakpoint-Monitoring-Service, um Media-Query-Änderungen programmatisch zu beobachten und Logik auszulösen, wenn Viewport-Dimensionen definierte Grenzen überschreiten. Zur Performance-Optimierung enthält es einen Build-Time-CSS-Generator, der SASS-Mixins verwendet, um statische Media-Query-Stylesheets zu erstellen, was den Bedarf an Laufzeit-Stilberechnungen reduziert. Das System deckt ein breites Spektrum an Layout-Funktionen ab, einschließlich Viewport-gesteuerter Sichtbarkeit, Drucklayout-Optimierung und suffixbasiertem responsivem Markup. Es bietet Werkzeuge zur Verwaltung von Container-Flow, Element-Skalierung und Layout-Abständen für sowohl Flexbox- als auch Grid-basierte Positionierung.

ComponentKit is a declarative UI framework for building iOS interfaces through composition of small, reusable components. It provides a structured approach to constructing user interfaces where each component is defined as an immutable, pure function of its inputs, enabling predictable rendering and state management. The framework supports both stateless and stateful components, with controllers that can be attached to manage persistent state across component updates. The framework distinguishes itself through its component architecture that emphasizes explicit data flow and compile-time safe

Dieses Projekt ist ein fortgeschrittener CSS-Lernlehrplan, bestehend aus Starter-Dateien und Abschlussprojekten. Es bietet eine Sammlung von Implementierungen aus der Praxis und eine Projektgalerie, die darauf ausgelegt ist, moderne Layout- und Styling-Techniken zu meistern. Der Lehrplan konzentriert sich auf einen modularen Ansatz für Stylesheets unter Verwendung von Sass-Variablen und Architektur. Er betont die Block-Element-Modifier-Namenskonvention (BEM), um wartbares und wiederverwendbares CSS zu erstellen. Das Material deckt mehrere Kernfunktionsbereiche ab, einschließlich Responsive Web Design mittels CSS Grid, Flexbox und Media Queries. Es umfasst zudem die Entwicklung von Bewegungseffekten durch CSS-Keyframes und Transitions sowie die Integration von skalierbaren Vektorgrafiken und optimierten Bildern für das Frontend-Styling.

Flexibility ist eine JavaScript-Layout-Engine und CSS-Kompatibilitätsschicht, die als Polyfill für die CSS-Flexbox-Spezifikation fungiert. Sie simuliert das Verhalten von Flexbox-Layouts in Webbrowsern, die die Spezifikation nicht nativ unterstützen. Das Projekt erreicht Cross-Browser-Layout-Konsistenz durch die Implementierung eines programmatischen Systems zur Berechnung und Anwendung von Ausrichtungs-, Richtungs- und Umbruchseigenschaften auf DOM-Elemente. Es bietet Hilfsprogramme sowohl für die Anwendung als auch für die Extraktion dieser Layout-Styles, um die visuelle Struktur einer Seite zu verwalten. Die Engine arbeitet durch DOM-Tree-Traversal und manuelle Koordinatenberechnung, um die Dimensionen und Positionen von Elementen zu bestimmen. Anschließend nutzt sie Runtime-Style-Injection, um die resultierenden Breiten-, Höhen- und Margin-Werte direkt in die Style-Attribute der Elemente zu schreiben.