37 dépôts
Flexible containers and alignment controls used to organize UI elements within a window.
Distinct from Layout Management: Focuses on the internal arrangement of widgets via containers rather than multi-pane view management.
Explore 37 awesome GitHub repositories matching user interface & experience · Component Layout Containers. Refine with filters or upvote what's useful.
libui is a native C GUI library and cross-platform framework used to build desktop applications. It provides a unified C abstraction layer and a native widget toolkit that maps directly to the host operating system's original controls, windows, and menu bars. The project functions as a portable UI wrapper, employing platform-specific backends and a native-API wrapper to maintain visual and behavioral fidelity across different operating systems. It utilizes a C-language binding layer to ensure portability across various compilers and targets. The library covers native interface construction a
Positions interface components using containers and alignment controls to manage sizing across different screen dimensions.
pdf2htmlEX is a tool that converts PDF documents into HTML while preserving the original text, fonts, and layout. It uses CSS positioning and font embedding to replicate the PDF's appearance in a browser, producing output that works without JavaScript. The tool can generate a single self-contained HTML file with all resources embedded, or split the document into separate HTML files per page for individual loading and navigation. The converter offers extensive control over the output, including the ability to embed fonts directly into the HTML using base64-encoded Data URIs, or keep them as se
Provides CSS-based layout replication to preserve exact PDF page geometry in HTML output.
This project is a cross-platform mobile carousel component for creating swipeable image and content sliders. It functions as a virtualized list component that maintains performance by removing off-screen elements and utilizes a native-driver animation library to map scroll offsets to style properties on the native thread for lag-free transitions. The library provides a parallax image gallery capable of shifting images relative to scroll progress to create a sense of depth. It also features a layout system that supports right-to-left orientations for languages such as Arabic and Hebrew. Capab
Offers predefined layout templates for positioning items as cards or tinder-style stacks.
Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a comprehensive kit of interactive elements and layout building blocks that follow screen reader and keyboard navigation standards. The project functions as a UI overlay management library, offering specialized tools for implementing anchored popovers, tooltips, and slide-out panels with smooth transitions. It includes a set of accessible form primitives and selection controls to ensure compatibility across different assistive technologies. Its broader capabilities cover the const
Provides structured containers with dedicated areas for titles, descriptions, and header actions.
Hyperblog is a Git learning resource and static site blog template. It provides a practical codebase and markdown blog theme designed for hands-on implementation of version control and collaborative development. The project focuses on Git workflow practice and GitHub collaborative development. It allows users to master version control and project management by building and deploying a functional static website. The system uses static site generation and markdown-driven content to create blog posts. It includes template-based layouts and client-side search indexing to locate specific text or
Uses reusable HTML structures and predefined layout files to wrap raw blog content.
Logoly is a browser-based logo editor that generates logos mimicking the signature visual style of popular platforms. It renders logo previews by drawing vector graphics directly onto an HTML canvas element, managing all editor state entirely within the browser. The tool provides real-time customization of logo text, color, and font size through an interactive on-screen editor, with instant preview updates as adjustments are made. It applies visual styles by mapping user-selected colors and fonts to CSS-like properties on SVG elements, and uses predefined layout templates to position text and
Uses predefined layout templates to position text and graphics in the signature style of a specific platform.
vue-fabric-editor is a web-based graphic design tool and vector graphics editor built with Vue and Fabric.js. It provides a canvas manipulation framework for creating visual compositions, layouts, and custom vector illustrations. The project features a template-based design system for creating reusable layouts and a bulk image generator that automatically produces multiple image files using data tables or external network interfaces. It also includes a modular plugin system for extending tools and keyboard shortcuts. The editor covers a broad range of capabilities including digital asset man
Uses predefined spatial patterns and layout templates to standardize the creation of graphic designs.
Ce projet est un générateur d'artefacts HTML LLM et un prévisualiseur sandboxé conçu pour le prototypage rapide et la création de contenu. Il fonctionne comme un pont d'agent IA local qui réutilise les sessions authentifiées des agents de codage en ligne de commande pour exécuter des tâches de génération sans nécessiter de clés d'API distinctes. Le système convertit les mises en page web en formats spécifiques à la plateforme via un outil d'exportation vers les réseaux sociaux, utilisant du CSS en ligne et des métadonnées pour assurer une publication cohérente. Il emploie un environnement de rendu sandboxé pour exécuter le code et les scripts générés par IA en isolation, protégeant le navigateur hôte contre l'empoisonnement. La plateforme gère la transformation de contenu en convertissant des données structurées — incluant CSV, JSON et SQL — en artefacts web soignés tels que des pages de destination, des rapports professionnels et des jeux de diapositives de présentation. Elle prend en charge les mises à jour visuelles en temps réel en diffusant le code généré par IA dans le navigateur via des événements envoyés par le serveur. Les capacités d'exportation incluent la conversion des nœuds web rendus en images PNG haute résolution et en fichiers HTML autonomes.
Transforms structured data into visual formats using a library of predefined HTML layout blueprints.
This project is a Bootstrap theme library providing a collection of pre-designed frontend templates and layouts. It functions as a set of frontend UI kits and responsive website templates built specifically with the Bootstrap CSS framework. The library focuses on responsive web design and frontend layout prototyping. It includes specialized themes for creating web dashboards, blogs, and portfolios. The technical implementation utilizes responsive grid layouts, component-based templates, and utility-first class architecture to standardize typography and spacing across different screen sizes.
Implements HTML-first structural templates that separate page hierarchy from visual presentation.
Walk is a comprehensive framework for building native Windows desktop applications. It functions as a GUI library and Windows API wrapper, providing a toolkit of native widgets and a declarative layout system for developing high-performance user interfaces. The project is distinguished by its data-binding framework, which uses reflection and string-based property paths to synchronize data sources with interface widgets. It also provides specialized support for high-DPI interface scaling and an optimized native message loop to reduce runtime overhead. The toolkit covers a wide range of capabi
Uses layout managers to arrange child widgets within parent containers with controlled positioning and spacing.
mtheme is a minimalist visual style for creating presentation slides using the LaTeX Beamer document class. It provides a set of formatting rules and a presentation typesetting style designed to optimize slide layout and content spacing. The theme focuses on a clean, low-noise layout that reduces visual clutter to maximize available content space. It includes a visual progress indicator integrated into each frame to track the viewer's position within the slide deck. The project covers academic presentation formatting and technical slide design, utilizing a document typesetting engine to gene
Implements custom structural patterns and layout overrides for a minimalist spatial arrangement of slide elements.
Unopinionated utilities for resizeable split views
Provides CSS-driven panel resizing that computes dimensions during drag and applies them via inline styles.
Vuido is a framework for building native desktop applications for Windows, macOS, and Linux using Vue.js components, without requiring Electron or Chromium. It maps Vue components directly to native widgets from the libui library, creating lightweight applications that run on a single-threaded event loop and compile templates at build time for optimized runtime performance. The framework provides a complete Vue.js component-to-native bridge, enabling two-way data binding via v-model, component-based window composition, and platform-specific package generation for distributing executables. It
Provides layout containers that arrange child components vertically or horizontally within a window.
Ce projet est un thème CSS pour l'éditeur Typora conçu pour émuler les standards de composition LaTeX. Il fonctionne comme un outil de mise en page académique qui transforme les aperçus Markdown en mises en page formelles adaptées aux documents et rapports universitaires. Le thème inclut des styles de composition localisés adaptés aux standards académiques chinois, fournissant des polices spécifiques et des modèles HTML pour générer des pages de garde, des résumés et des sections de mots-clés professionnels. Le système gère la typographie des documents, les marges de page et le style des listes multiniveaux via des variables CSS et des couches de surcharge. Il utilise des media queries spécifiques à l'impression pour assurer une mise en page contrôlée lors de l'exportation de Markdown vers PDF, incluant des options pour formater la visibilité des hyperliens pour les documents prêts à imprimer.
Inserts pre-defined HTML structures to simulate academic title pages and abstracts.
ngx-bootstrap est un ensemble de widgets et de composants d'interface utilisateur stylisés Bootstrap conçus spécifiquement pour le framework Angular. Il fournit une bibliothèque d'éléments d'interface réutilisables conçus pour fonctionner avec le moteur de compilation et de rendu Angular Ivy. La bibliothèque permet l'intégration de composants Bootstrap dans des applications Angular pour créer des interfaces utilisateur réactives sans nécessiter de CSS ou de JavaScript manuel. Elle remplace le besoin de jQuery en utilisant des directives Angular pour la gestion d'état et un moteur de positionnement adaptatif pour les éléments flottants. L'ensemble de composants couvre un large éventail d'éléments interactifs, notamment des contrôles de navigation comme les onglets et la pagination, des fenêtres de superposition comme les modales et les popovers, et des outils de saisie de données comme les sélecteurs de date et d'heure. Il inclut également des widgets de mise en page et de feedback tels que des accordéons, des barres de progression et des alertes.
Exposes content slots via ng-template to allow custom internal HTML structure for complex widgets.
microui is a minimal immediate-mode graphical user interface library written in C, designed for resource-constrained environments such as embedded systems. It operates without dynamic memory allocation and has no external dependencies beyond standard C, making it a self-contained solution for building lightweight interfaces. The library is delivered as a single header file, simplifying integration into any project. It uses a fixed-allocator heap for all runtime state, guaranteeing deterministic memory use and predictable performance. All drawing is delegated to user-supplied callbacks, keepin
"Uses a single function to push and pop container regions that automatically position and space nested controls."
Ce projet est un canevas visuel piloté par l'IA et un framework de tableau blanc collaboratif. Il fonctionne comme un moteur de dessin vectoriel personnalisable et un outil pour convertir des croquis d'interface et des wireframes dessinés à la main en code fonctionnel via l'intelligence artificielle. Le système se distingue par l'intégration d'agents IA capables de lire, modifier et générer des diagrammes visuels directement sur le canevas. Il fournit également un éditeur de workflow basé sur des nœuds pour construire des pipelines d'automatisation et des flux de traitement de données en connectant des composants multimodaux. La plateforme couvre un large éventail de capacités, incluant la collaboration multijoueur en temps réel avec suivi de présence, un canevas infini avec rendu accéléré par GPU, et une suite complète d'outils de manipulation et d'alignement d'objets. Elle implémente également les standards d'accessibilité web et fournit une interface scriptable pour définir des formes personnalisées et des contrôles de canevas programmatiques.
Manages the automatic positioning and sizing of elements within a flexible container system.
Ce projet est une bibliothèque de patterns d'interface utilisateur déclarative et une implémentation de référence pour structurer les mises en page, les flux de navigation et les collections de données sur les plateformes Apple. Il fournit une collection de patterns d'implémentation pratiques et d'exemples de composants pour construire des interfaces utilisateur en utilisant le framework SwiftUI. La bibliothèque sert de référence multiplateforme pour le rendu de contenu visuel sur iOS et macOS. Elle inclut un guide d'implémentation de vue qui couvre la gestion de la navigation, la gestion des entrées utilisateur et l'intégration de contenu web. La base de code couvre de larges domaines de capacités incluant la gestion de la mise en page via des compositions basées sur des piles (stacks) et l'organisation de formulaires, ainsi que des frameworks de navigation d'application utilisant des barres d'onglets et un routage hiérarchique. Elle fournit des patterns pour l'affichage de données via le rendu itératif de collections, l'interaction utilisateur via des contrôles d'entrée et la gestion d'événements, et l'utilisation d'overlays de contenu interactifs tels que des modales et des alertes. Le projet inclut également des utilitaires pour l'intégration de vues héritées (legacy), permettant l'intégration de composants basés sur des contrôleurs au sein d'une hiérarchie déclarative moderne.
Provides layout composition using nested horizontal and vertical stacks to automate screen positioning.
deck.js est un framework de présentation HTML et un générateur de diapositives utilisé pour créer des diaporamas numériques structurés. Il transforme les technologies web et les éléments HTML standards en un format de présentation séquencé pour une diffusion via navigateur. Le système inclut un utilitaire dédié pour générer des supports de présentation imprimables, qui convertit les diapositives numériques en un format noir et blanc simplifié pour une distribution physique.
Utilizes CSS-driven layout containers to handle slide transitions and maintain visual consistency across different screen sizes.
Ce projet est un site web de documentation technique et un générateur de site statique conçu pour servir de hub centralisé pour les références API, les guides et les tutoriels. Il fonctionne comme un système de gestion de contenu basé sur le markdown qui sépare la rédaction technique de la couche de présentation. Le site utilise une architecture routée par le système de fichiers, mappant la structure physique des répertoires et fichiers du code source directement aux chemins URL publics. Cette approche permet la transformation des fichiers markdown et des templates en HTML pré-rendu pour la diffusion web. Le système englobe des capacités d'hébergement de documentation technique et de communication de projets open source, utilisant des mises en page basées sur des templates et un pipeline d'assets pour organiser la documentation du projet et optimiser l'expérience développeur.
Uses reusable HTML structure templates to wrap content blocks and maintain consistent navigation and branding.