Awesome GitHub RepositoriesCustom Breakpoints

Elementor is a visual page builder for WordPress that provides a drag-and-drop interface for creating responsive layouts and custom themes. It functions as a comprehensive design system manager and theme builder, allowing for the creation of global website components such as headers, footers, and archive pages without writing code. The platform distinguishes itself through a dedicated popup builder with custom trigger conditions and a visual landing page creator that utilizes pre-made kits. It includes a global style registry to synchronize fonts and colors across all site elements and a widg

Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty

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.

Theme-ui ist ein React-Theme-Framework und CSS-in-JS-Utility für den Aufbau themenfähiger Benutzeroberflächen. Es fungiert als Design-System-Tool, das zentralisierte, einschränkungsbasierte Skalen für Farben, Typografie und Abstände festlegt, um visuelle Konsistenz über Anwendungen hinweg zu gewährleisten. Das Framework zeichnet sich durch eine Array-basierte responsive Kurzschreibweise für Mobile-First-Layouts und einen dedizierten Color-Mode-Manager aus, der mit Browsereinstellungen synchronisiert wird und Benutzerauswahlen beibehält. Es bietet zudem ein System zur Erstellung benannter Style-Varianten, um das Komponenten-Erscheinungsbild über Eigenschaften zu steuern, und bietet Synchronisationsfunktionen, um Theme-Konfigurationen in Figma-Styles zu übersetzen. Das Projekt deckt eine breite Palette an Styling-Funktionen ab, einschließlich globaler CSS-Injektion für Element-Resets, verschachtelter Theme-Overrides via Context und ein Deep-Merge-Konfigurationssystem zur Erweiterung von Design-Presets. Es enthält zudem eine Reihe themenfähiger Layout-Komponenten, wie responsive Grids und standardisierte Formulareingaben. Ein dediziertes Plugin ist für die Integration des Design-Systems in Gatsby-Sites verfügbar.