webbloqs: Building Blocks for your Website

webbloqs: Modulare Building Blocks für moderne Websites

Websites werden aus HTML-Markup und CSS-Styles gebaut, oft mit einem Frontend-Framework wie React, Lit oder Vue.js. webbloqs bieten HTML custom elements, die mit global themed CSS-Styling und einer durchdachten API zusammengefügt werden.

Mit webbloqs kannst du das Frontend-Framework deiner Wahl verwenden, um konsistent gestylte Web-Komponenten zu erstellen - ohne zusätzliches CSS. Wiederverwende deine Komponenten in verschiedenen Projekten und ändere ihr Styling einfach durch Anpassung von Custom Properties im globalen Theme. Nutze Komponenten aus verschiedenen Frontend-Frameworks zusammen und entwickle grössere Produkte schneller.

Was ist ein webbloq?

Ein webbloq ist ein visuelles Pattern mit modularem Styling und isoliertem Markup. webbloqs ermöglichen es Entwicklern, sich auf die Implementierung der Business-Logik zu konzentrieren, ohne sich um Browser-Quirks oder Seiteneffekte von umgebenden Styles sorgen zu müssen.

webbloqs werden mit Web Component Technologie gebaut. Ein Compiler übersetzt die Standard HTML API in höhere Abstraktionen, die für die native Verwendung in Frontend-Frameworks wie React, Lit oder Vue.js geeignet sind.

Ein Katalog von webbloqs bietet visuelle Patterns, die verwendet werden können, um Inhalte im Web zu indizieren, zu illustrieren, zu strukturieren und mit ihnen zu interagieren. Jeder webbloq ist für einen bestimmten Zweck entwickelt und berücksichtigt drei Hauptcharakteristika:

Parameterizable

Ein webbloq ist parameterisierbar durch eine Reihe von Properties, die sein HTML-Markup oder sein Verhalten ändern. Du kannst Komponenten über ihre Properties konfigurieren, ohne das Styling zu beeinflussen.

Styleable

Ein webbloq ist stylebar mit einer Reihe von CSS Custom Properties, die visuelle Aspekte seiner Darstellung modifizieren. Ändere das Aussehen durch Anpassung von Custom Properties im globalen Theme.

Composable

Ein webbloq ist komponierbar durch die Standard Web Component API. Erstelle komplexere Komponenten, indem du webbloqs oder anderes HTML-Markup kombinierst.

Warum webbloqs?

Mehr Konsistenz

webbloqs helfen dabei, eine konsistente Benutzeroberfläche zu erreichen und die Wartung zu erleichtern. Durch die Verwendung eines globalen Themes bleibt das Design über verschiedene Komponenten und Projekte hinweg einheitlich.

Ein Codebase

webbloqs verwenden ein Codebase, um auf verschiedenen Plattformen zu arbeiten. Die gleichen Komponenten können in React, Lit, Vue.js oder sogar in reinem HTML verwendet werden.

Bessere Teamarbeit

webbloqs unterstützen die Zusammenarbeit zwischen Designern, Entwicklern und Marketern. Designer können das globale Theme definieren, Entwickler können sich auf die Business-Logik konzentrieren, und Marketer können Inhalte einfach anpassen.

Fokus auf Business-Logik

Durch die Isolierung von Markup und Styling können sich Entwickler vollständig auf die Implementierung der Geschäftslogik konzentrieren, ohne sich um Browser-Quirks oder Seiteneffekte von umgebenden Styles sorgen zu müssen.

Technologie und Framework-Unterstützung

webbloqs basieren auf Web Components, dem Standard für wiederverwendbare HTML-Elemente. Ein Compiler übersetzt die Standard HTML API in höhere Abstraktionen, die für die native Verwendung in Frontend-Frameworks geeignet sind.

React-Unterstützung

webbloqs können nativ in React-Komponenten verwendet werden. Das @webbloqs/react Package bietet React-Wrapper für alle webbloqs-Elemente:

import { Button, Title, Box } from "@webbloqs/react";

function MyComponent() {
    return (
        <Box>
            <Title level={2}>Willkommen</Title>
            <Button variant="primary" onClick={() => console.log("Clicked")}>
                Klicken Sie hier
            </Button>
        </Box>
    );
}

Custom Properties für Styling

Das Styling kann über CSS Custom Properties angepasst werden:

<Title
    level={3}
    style={{
        "--wb-title__bezel-top": 0,
        "--wb-title__bezel-bottom": "var(--wb-ds-space--m)",
    }}
>
    Überschrift
</Title>

Komposition

webbloqs können einfach kombiniert werden, um komplexere Komponenten zu erstellen:

<Form>
    <FieldGroup>
        <FieldLabel>Name</FieldLabel>
        <TextField name="name" required />
    </FieldGroup>
    <Button type="submit">Absenden</Button>
</Form>

Wie verwendet man webbloqs?

Der webbloqs Catalog bietet eine interaktive Umgebung, um Komponenten zu entdecken, anzupassen und zu verwenden.

1. Catalog durchsuchen

Durchsuche den webbloqs Catalog nach Inhalten nach Zweck und finde einen webbloq, um Inhalte zu illustrieren, zu indizieren oder zu strukturieren. Interagiere mit jedem webbloq, um ihn in Aktion zu sehen.

2. Komponente auswählen und anpassen

Wähle einen webbloq aus, der in deinem Anwendungs-Theme angezeigt wird. Passe ihn an, bevor du seinen Code in deinen Editor kopierst.

3. API entdecken

Entdecke die API eines webbloqs. Finde Element- und Styling-Properties zur Anpassung. Sieh die Effekte direkt im Catalog.

4. Code kopieren und einfügen

Kopiere den generierten Code und füge ihn in dein Projekt ein. webbloqs funktionieren nativ in Frontend-Frameworks mit Standard JSX, Code-Completion und HMR.

Best Practices

Design System "as is" verwenden

Beginne damit, jegliches Styling in deinem Code zu vermeiden. Verwende die Elemente und passe sie nur mit ihren Attributen an. Wenn das Design System es schwierig macht, das erforderliche Design zu erreichen, setze ein FIXME in deinen Code und öffne einen PR, um eine Alternative vorzuschlagen.

Design System herausfordern statt lokal zu fixen

Wenn du etwas bemerkst, das nicht in das Design System passt oder das ständig angepasst werden muss, schlage eine Änderung im Theme vor. Es ist wie Politik: Nimm an der Diskussion teil, anstatt deine eigene Republik zu gründen.

Keine inline Styles ohne Notwendigkeit

Verwende style="" oder innerCss="" nicht, ohne sicher zu sein, dass du dein Problem nicht mit einer anderen Lösung lösen kannst. Inline-Styles sollten nicht verwendet werden, um Farben, Padding oder responsive Design zu erreichen.

Komposition über Vererbung

Kombiniere einfache Komponenten zu komplexen, anstatt auf Vererbung zu setzen. Jede Komponente sollte eine klare Aufgabe haben (Single Responsibility).

Fazit

webbloqs sind der Grundstein für moderne Web-Entwicklung mit modularen Komponenten. Sie ermöglichen es Teams, schneller und effizienter zu arbeiten, während gleichzeitig die Qualität und Konsistenz der Anwendungen steigt.

webbloqs wird von Quatico Solutions entwickelt, einem Software-Entwicklungsunternehmen mit Sitz in Zürich. In zahlreichen Projekten und für verschiedene Kunden hat Quatico hochwertige Komponenten für digitale Produkte entwickelt. Diese Erfahrung und Expertise fliesst in webbloqs ein.

Erkunde den webbloqs Catalog oder sieh dir die Dokumentation an, um mehr zu erfahren.

Bei Quatico setzen wir auf webbloqs und diese bewährten Prinzipien, um Enterprise-Portale zu entwickeln, die skalierbar, wartbar und zukunftssicher sind.