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 es un componente wrapper utilizado para integrar una interfaz de reproducción de video personalizable en aplicaciones Vue y React utilizando el framework Video.js. Proporciona un sistema estandarizado para embeber reproductores de video en una capa de UI reactiva. El proyecto maneja la configuración de la apariencia del video, incluyendo la gestión de imágenes de póster, relaciones de aspecto y layouts fluidos y responsivos para adaptarse a varios tamaños de pantalla. Proporciona mecanismos para gestionar propiedades de reproducción como volumen, velocidad, reproducción automática y estados de silencio. El sistema incluye herramientas para monitorizar hitos de reproducción y eventos del sistema, junto con un objeto de estado que rastrea datos en tiempo real sobre el tiempo de reproducción, duración y estado.

FitVids.js es un plugin de jQuery y gestor de relaciones de aspecto CSS diseñado para automatizar el escalado de vídeos embebidos dentro de contenedores responsivos. Funciona como un wrapper para embeds de vídeo que asegura que los iframes mantengan sus proporciones correctas al ajustarse a diferentes tamaños de pantalla. El proyecto permite la integración de reproductores de vídeo de terceros mediante el mapeo de selectores CSS específicos a configuraciones de relación de aspecto predefinidas. También ofrece mecanismos para excluir elementos del escalado, permitiendo ignorar contenedores específicos mediante clases o selectores para mantener dimensiones fijas. La utilidad gestiona la visualización de medios en distintos dispositivos mediante cálculos de relación intrínseca y un diseño web fluido. Emplea una combinación de padding basado en porcentajes y manipulación del DOM para ajustar las dimensiones del embed sin distorsionar el contenido visual.

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

Este proyecto es una biblioteca CSS responsiva y un monitor de dimensiones de elementos. Proporciona un polyfill para consultas de contenedores CSS, permitiendo que los estilos se apliquen en función de las dimensiones específicas de un elemento en entornos donde el soporte nativo del navegador no está disponible. La biblioteca monitorea el ancho y el alto de los elementos DOM objetivo en tiempo real, activando devoluciones de llamada personalizadas cada vez que cambian las dimensiones. Adapta los componentes de la UI ejecutando ajustes de diseño y cambios de estilo basados en umbrales de tamaño predefinidos en lugar del tamaño general de la ventana del navegador. La herramienta gestiona estas adaptaciones a través de varios mecanismos, incluyendo la inyección de variables CSS dinámicas, el cambio de clases basado en umbrales y el uso de la API ResizeObserver para sincronizar las dimensiones de los elementos con las hojas de estilo.

RmlUi es un renderizador de UI multiplataforma y librería middleware que permite la creación de interfaces de usuario utilizando un subconjunto de HTML y CSS. Funciona como una capa agnóstica de renderizado diseñada para integrar layouts y estilos estándar web en motores de juegos personalizados y aplicaciones embebidas. El framework se distingue por su integración de Lua para lógica y control dinámico, así como por un kit de herramientas especializado para renderizar imágenes SVG y animaciones Lottie. Utiliza un backend de renderizado conectable que desacopla la generación de geometría de la visualización final, permitiéndole generar geometría texturizada para varios pipelines gráficos. El sistema cubre una amplia gama de capacidades, incluyendo un motor de layout de modelo de caja (box-model), un motor de estilos en cascada y enlace de datos (data-binding) para sincronizar modelos con vistas. Proporciona una gestión integral de entrada para ratón, teclado y táctil, junto con servicios de internacionalización para la traducción de texto basada en la configuración regional. Las características adicionales incluyen escalado de alta densidad (high-DPI), composición alfa basada en capas y un conjunto de componentes interactivos como sliders de rango y menús desplegables. El código fuente puede compilarse en binarios WebAssembly para su ejecución en navegadores web.

devices.css es una biblioteca de componentes CSS puros utilizados para renderizar marcos de dispositivos responsivos y maquetas de hardware. Proporciona una colección de estilos que crean representaciones visuales de smartphones, tablets y laptops sin el uso de imágenes externas o JavaScript. El proyecto permite la simulación de bordes y biseles de hardware a través de un sistema de marcos y maquetas basados en CSS. Estos componentes permiten la visualización de diseños responsivos y componentes de UI en varios tamaños de pantalla y modelos de dispositivos. La biblioteca utiliza propiedades personalizadas de CSS para definir colores y dimensiones, empleando unidades relativas y pseudo-elementos para renderizar detalles de hardware como lentes de cámara y rejillas de altavoces. Estos estilos soportan diferentes orientaciones de hardware y cambio de modelos mediante clases CSS.

pattern.css es una librería de patrones de fondo y generador de texturas CSS. Proporciona una colección de estilos CSS puros utilizados para crear diseños geométricos y orgánicos decorativos y repetitivos para fondos de sitios web e interfaces de usuario. El proyecto se centra en generar efectos visuales utilizando solo propiedades CSS, eliminando la necesidad de archivos de imagen. Este enfoque optimiza los recursos al reemplazar texturas basadas en imágenes con código para reducir los tiempos de carga de la página. La librería utiliza capas de degradados lineales y radiales, apilamiento de fondos y dimensionamiento con unidades relativas para producir formas y texturas en mosaico. También emplea propiedades personalizadas de CSS para permitir temas de color dinámicos en todos los documentos.

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