Awesome GitHub RepositoriesSizing Unit Systems

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

QuestPDF is a C# PDF generation library and layout engine used to create structured documents, reports, and invoices. It utilizes a fluent API and a component-based layout approach to convert code into high-fidelity PDF and XPS files. The library distinguishes itself with a dedicated layout debugger that provides real-time previews, hot-reload capabilities, and visual boundary tools to map rendered elements back to source code. It also functions as an accessibility tool, providing semantic tagging and navigational aids to ensure documents comply with international accessibility and archival s

Isotope is a JavaScript grid layout library used to create filterable and sortable grids with automatic element positioning in the browser. It functions as a layout engine that calculates absolute coordinates for elements to maintain a dense grid regardless of individual item dimensions. The library features a masonry layout engine that arranges items of varying heights into a compact grid to eliminate vertical gaps. It includes a coordinate-based layout animator for smooth transitions during layout shifts and a CSS selector filtering tool to show or hide elements without reloading the page.

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

This repository contains the HTML specification, which defines the core standards for web page structuring, content organization, and document rendering. It establishes the fundamental algorithms for state-machine-based tokenization, tree construction for the document object model, and origin-based security isolation. The specification provides a framework for defining custom elements with independent lifecycles and registries. It also details the requirements for cross-document communication, session history management, and the synchronization of interface properties with content attributes.

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

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

Golden Layout is a framework-agnostic UI container and web window layout manager designed to organize application interfaces into a flexible grid of draggable and resizable multi-pane windows. It functions as a hierarchical grid system that arranges page elements into a tree of nested rows and columns to create complex professional interfaces. The system acts as a multi-window workspace orchestrator, allowing components to be detached from the main layout into independent native browser windows. It also serves as a serializable layout engine that captures the arrangement of user interface com

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

AndroidAutoLayout is an Android library that converts pixel values from design mockups into percentage-based layouts, enabling consistent scaling across different screen resolutions. At its core, it functions as a pixel-to-percentage converter and screen resolution scaling tool, allowing developers to design layouts using exact pixel dimensions from mockups and have them automatically adapt to any target device. The library provides several distinctive approaches to screen adaptation. It can generate resolution-specific dimension resource files from a single baseline design, eliminating manua

vue-video-player is a wrapper component used to integrate a customizable video playback interface into Vue and React applications using the Video.js framework. It provides a standardized system for embedding video players into a reactive UI layer. The project handles the configuration of video appearance, including the management of poster images, aspect ratios, and responsive fluid layouts to adapt to various screen sizes. It provides mechanisms for managing playback properties such as volume, rate, autoplay, and mute states. The system includes tools for monitoring playback milestones and

FitVids.js 是一个 jQuery 插件和 CSS 宽高比管理器，旨在自动化处理响应式容器内嵌入视频的缩放。它作为一个响应式视频嵌入包装器，确保 iframe 在缩放以适应不同屏幕尺寸时保持正确的比例。 该项目通过将特定的 CSS 选择器映射到预定义的宽高比配置，支持集成自定义的第三方视频播放器。它还提供了视频缩放排除机制，允许通过指定的类或选择器忽略某些元素，从而保持固定尺寸。 该工具通过固有比例计算和流式 Web 布局设计来管理跨设备的媒体显示。它结合了基于百分比的内边距和 DOM 操作，在不扭曲视觉内容的情况下调整嵌入尺寸。

Infographic is a declarative SVG infographic engine and AI-powered generator that transforms structured specifications and natural language descriptions into complete visual layouts. At its core, it provides a data storytelling framework that combines AI-driven layout generation with multi-pattern composition, supporting linear, circular, radial, tree, and mirror arrangements for sequential, hierarchical, and comparative data structures. The project distinguishes itself through a canvas-based interactive editor with real-time element manipulation and state history management, alongside a serv

该项目是一个响应式 CSS 库和元素尺寸监控器。它为 CSS 容器查询提供了 Polyfill，使得在原生浏览器支持不可用的环境中，能够根据元素的特定尺寸应用样式。 该库实时监控目标 DOM 元素的宽度和高度，并在尺寸发生变化时触发自定义回调。它通过根据预定义的尺寸阈值而不是整个浏览器窗口尺寸执行布局调整和样式更改来适配 UI 组件。 该工具通过多种机制管理这些适配，包括注入动态 CSS 变量、基于阈值的类切换，以及使用 ResizeObserver API 将元素尺寸与样式表同步。

RmlUi 是一个跨平台 UI 渲染器和中间件库，支持使用 HTML 和 CSS 的子集创建用户界面。它作为一个渲染无关层，旨在将 Web 标准布局和样式集成到自定义游戏引擎和嵌入式应用中。 该框架通过集成 Lua 进行动态逻辑和控制，以及用于渲染 SVG 图像和 Lottie 动画的专用工具包而脱颖而出。它利用可插拔的渲染后端，将几何生成与最终显示解耦，从而能够为各种图形管道生成纹理几何体。 该系统涵盖了广泛的功能，包括盒模型布局引擎、层叠样式引擎，以及用于同步模型与视图的数据绑定。它为鼠标、键盘和触摸提供全面的输入管理，以及用于基于区域的文本翻译的国际化服务。其他功能包括高 DPI 缩放、基于层的 Alpha 合成，以及一系列交互式组件（如范围滑块和下拉菜单）。 该源码可编译为 WebAssembly 二进制文件，以便在 Web 浏览器中执行。

devices.css 是一个纯 CSS 组件库，用于渲染响应式设备框架和硬件模型。它提供了一系列样式，无需使用外部图像或 JavaScript 即可创建智能手机、平板电脑和笔记本电脑的视觉表示。 该项目通过基于 CSS 的框架和模型系统实现硬件边框和边框的模拟。这些组件允许在各种屏幕尺寸和设备型号上可视化响应式设计和 UI 组件。 该库利用 CSS 自定义属性进行颜色和尺寸的主题化，使用相对单位和伪元素来渲染相机镜头和扬声器格栅等硬件细节。这些样式支持通过 CSS 类进行不同的硬件方向和型号切换。

pattern.css 是一个 CSS 背景图案库和纹理生成器。它提供了一系列纯 CSS 样式，用于为网站背景和用户界面创建装饰性的、重复的几何和有机设计。 该项目专注于仅使用 CSS 属性生成视觉效果，无需图像文件。这种方法通过用代码替换基于图像的纹理来优化资源，从而缩短页面加载时间。 该库利用线性渐变和径向渐变分层、背景堆叠以及相对单位尺寸来产生平铺形状和纹理。它还采用 CSS 自定义属性，允许在文档中进行动态颜色主题设置。

Makie.jl is a high-performance Julia data visualization library and hardware-accelerated plotting engine used to create interactive 2D and 3D visualizations. It functions as a reactive visualization framework where plots update automatically via observables and compute graphs, and as a vector graphics generator for high-resolution academic output. The system is distinguished by its backend-agnostic rendering pipeline, which supports OpenGL, WebGL, and ray-traced scenes. It employs a grammar-of-graphics approach to map variables to aesthetic attributes and utilizes a hierarchical scene graph t