13 Repos
Mechanisms for aligning UI components horizontally or vertically within their parent container.
Distinct from Viewport Centering: Existing candidates focus on viewport-level centering rather than individual element alignment in a layout.
Explore 13 awesome GitHub repositories matching user interface & experience · Element Centering. Refine with filters or upvote what's useful.
AsyncDisplayKit is an asynchronous UI framework and performance library for iOS. It provides a collection of performant alternatives to standard views, allowing developers to build responsive interfaces by offloading layout and rendering tasks to background threads. The framework is centered around a declarative layout engine based on a flexbox model, which calculates element positions and sizes asynchronously. It utilizes a node-based abstraction to wrap native views, enabling the instantiation and configuration of UI hierarchies on background threads to prevent main thread blocking. The sy
Positions child elements within available space based on specified horizontal and vertical centering options.
CSS Layout is a pure CSS pattern library that provides pre-built layout components for common page structures, implemented entirely with CSS using flexbox and grid. The collection focuses on reusable, encapsulated components that handle overlapping elements, vertical centering, sticky footers, and classic page layouts without requiring any JavaScript for rendering or interactivity. The library offers a range of practical layout implementations including centered navigation menus, element stacking techniques, holy grail page layouts, and responsive grid systems. Each pattern is built as a self
Provides pure CSS patterns for centering elements both horizontally and vertically within their parent containers.
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
Demonstrates how to align UI components horizontally and vertically using Flexbox and positioning.
This project is a comprehensive frontend interview preparation resource built around a question bank of over 1000 curated questions. It covers HTML, CSS, JavaScript, Vue, React, Node, TypeScript, Webpack, algorithms, and network security, with each question accompanied by a detailed answer explanation. The content is organized into a hierarchical category tree for browsable exploration, and a daily question rotation algorithm presents one question per day for systematic review. A client-side search index enables instant filtering of questions by title or tag, and the entire question bank is p
Teaches how to center a div both horizontally and vertically without knowing its dimensions using CSS flexbox, grid, or transform techniques.
This repository is a collection of practical code snippets and implementation patterns for Flutter and Dart. It serves as a comprehensive guide and reference for asynchronous programming, state management patterns, and UI component design. The project provides advanced language reference material covering generics, reflection, factory constructors, and null-aware operators. It also includes specific utilities for manipulating Dart collections, such as helper methods for transforming and filtering maps, lists, and iterables. The coverage extends to high-level capabilities including asynchrono
Provides a generic wrapper to align any widget horizontally and vertically within its parent container.
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
Teaches vertical centering using table-cell display properties as a fallback for older browsers.
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
Provides utility classes for horizontally centering block-level elements using auto margins.
Firefox-UI-Fix ist eine Sammlung von CSS-Stylesheets, Stil-Overrides und einem UserChrome-Framework, das darauf ausgelegt ist, das Layout und Erscheinungsbild des Firefox-Webbrowsers neu zu definieren. Es fungiert als Browser-Oberflächen-Anpasser und Styling-Kit, das CSS-Injection und DOM-Overrides verwendet, um die Browser-Shell zu modifizieren. Das Projekt zeichnet sich durch eine tiefe Integration mit Host-Betriebssystemen aus, wodurch Fensterdekorationen, Menüs und Themes des Browsers an Systemakzentfarben und native Desktop-Ästhetik angepasst werden können. Es enthält spezialisierte Funktionen zur Modifikation der visuellen Hierarchie der Oberfläche und bietet vordefinierte visuelle Theme-Distributionen. Breite Funktionsbereiche decken umfassende Layout-Modifikationen ab, einschließlich der Möglichkeit, Elementdichte anzupassen, Tab-Leisten neu zu positionieren und Navigations-Toolbars neu zu organisieren. Das Projekt bietet zudem Werkzeuge für Tab-Management, das Redesign interner Media-Player, das Entfernen von Oberflächenanimationen sowie die Anpassung interner Browserseiten und Typografie. Das System ist in SCSS implementiert und nutzt die internen Styling-Mechanismen des Browsers sowie präferenzgesteuerte Konfigurationen.
Implements horizontal centering for tabs, the URL bar, and the bookmark bar.
Present ist eine Kommandozeilenanwendung, die darauf ausgelegt ist, strukturierte Markdown-Dateien in interaktive, tastaturnavigierbare Präsentationsdecks zu verwandeln. Sie fungiert als Framework für technisches Storytelling und ermöglicht es Benutzern, formatierte Folieninhalte direkt in einem Terminalfenster zu rendern. Das Tool zeichnet sich durch die Integration simulierter Terminalsitzungen und interaktiver Demonstrationen in den Präsentationsfluss aus, was die Anzeige von Live-Befehlsausführungen und technischen Workflows ermöglicht. Es unterstützt visuelle Anpassungen durch konfigurierbare Farbschemata und enthält eine Animations-Engine, die dynamische Muster über Folieninhalte legen kann. Die Software verwaltet die Präsentationsumgebung, indem sie die Positionierung von Elementen automatisch berechnet, um sicherzustellen, dass Inhalte zentriert und ausgewogen bleiben. Sie handhabt den Folienfortschritt durch eventgesteuerte Eingabesteuerungen und verarbeitet Markdown-Markup in terminaloptimierte Layouts, die Standard-Dokumentstrukturen beibehalten.
Automatically positions content elements in the middle of the screen to ensure a balanced layout for slides with minimal text.
Dieses Projekt ist eine Sammlung von Referenzleitfäden und wiederverwendbaren Mustern zur Implementierung von CSS-Layouts, Typografie und visuellen Effekten. Es dient als Bibliothek von Style-Snippets und Implementierungsleitfäden zur Strukturierung von Webseiten und zur Erstellung gängiger UI-Muster. Das Repository bietet spezialisierte Galerien für visuelle Effekte und UI-Komponentenmuster. Dazu gehören Techniken zur Erstellung von Glassmorphism, komplexen geometrischen Formen und interaktiven Elementen wie Akkordeons, Tooltips und animierten Tab-Indikatoren. Das Projekt deckt ein breites Spektrum an Frontend-Funktionen ab, einschließlich responsivem Design, flexiblen und Grid-basierten Layout-Systemen sowie Typografie-Optimierung. Es enthält zudem Ressourcen zum Erstellen interaktiver Bewegungseffekte, Farbmischungen und Bildfilterung, um häufige Rendering-Probleme zu lösen und die Ästhetik der Benutzeroberfläche zu verbessern.
Provides mechanisms for aligning text and images both horizontally and vertically within containers.
toolong ist ein Terminal-Log-Viewer und TUI-Log-Manager, der für die Überwachung von Live-Log-Streams und die Navigation in großen Log-Dateien entwickelt wurde. Er fungiert als Log-Aggregator und JSONL-Formatter, der in der Lage ist, mehrere Log-Dateien zu einer einzigen chronologischen Ansicht zusammenzuführen, indem Zeitstempel automatisch erkannt werden. Die Anwendung unterstützt die Visualisierung strukturierter Daten durch Pretty-Printing von JSONL-Dateien und die Anwendung von Syntax-Highlighting auf gängige Webserver-Log-Muster. Sie verarbeitet große Datenmengen effizient durch scrollbare Ansichten mit virtueller Größe, was es Benutzern ermöglicht, komprimierte Logs oder Dateien beliebiger Größe zu öffnen, ohne das gesamte Dokument in den Arbeitsspeicher zu laden. Das System umfasst Funktionen für das Tailing von Log-Streams, das Fuzzy-Text-Matching und die Navigation über ein Stack-basiertes Screen-Modell. Es bietet zudem eine Befehlspalette zur Entdeckung von Anwendungsfunktionen und unterstützt interaktive Elemente wie anklickbare Links und Hover-Tooltips.
Implements mechanisms for aligning UI components horizontally or vertically within parent containers.
Dieses Projekt ist ein umfassendes Framework für die iOS-App-Entwicklung, das sich auf den Aufbau mobiler Anwendungen mit benutzerdefinierten UI-Komponenten, asynchronem Task-Management und lokaler Datenpersistenz konzentriert. Es dient als technische Wissensdatenbank für Software-Engineering und bietet Tools zur Organisation und Veröffentlichung architektonischer Analysen und Notizen im Markdown-Format. Das Framework zeichnet sich durch eine robuste dokumentenbasierte Speicherschicht aus, die BSON-formatierte Datensätze nutzt, um CRUD-Operationen innerhalb eines NoSQL-Dokumentenspeichers durchzuführen. Es bietet umfangreiche Systemintegrationsfunktionen, einschließlich spezialisierter App-Extension-Kommunikation, Cross-Sandbox-Messaging und nativer Share-Sheet-Präsentation, was eine nahtlose Interaktion zwischen der Host-Anwendung und Systemdiensten ermöglicht. Das Projekt deckt eine breite Funktionsfläche ab, einschließlich fortgeschrittenem Concurrency-Management mit thread-sicherer Synchronisierung, Auslagerung des Hintergrund-UI-Renderings zur Wahrung der Reaktionsfähigkeit und umfassender Internationalisierungsunterstützung. Es enthält zudem entwicklerfokussierte Utilities für statische Typgenerierung, automatisierte Asset-Mappings und interaktive Prototypenkonstruktion sowie spezialisierte Tools für geografisches Beacon-Monitoring und adaptive Diagrammerstellung.
Centers groups of views as a single unit using invisible boundaries to define collective size.
This project is a comprehensive frontend engineering study guide designed to cover the essential technical concepts of modern web development. It serves as a multi-disciplinary reference for mastering the browser execution engine, the JavaScript language, and the structural fundamentals of the web. The collection provides deep dives into JavaScript language internals, including execution contexts, closures, prototypes, and the event loop. It further details web browser internals, focusing on the critical rendering path, DOM construction, and engine mechanics. The guide also covers web securi
Explains various techniques for aligning UI components both horizontally and vertically using Flexbox, Grid, and absolute positioning.