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 lässt sich das Frontend-Framework der eigenen Wahl verwenden, um konsistent gestylte Web-Komponenten zu erstellen - ohne zusätzliches CSS. Komponenten sind über Projekte hinweg wiederverwendbar; ihr Styling ändert sich durch Anpassung von Custom Properties im globalen Theme. Komponenten aus verschiedenen Frontend-Frameworks lassen sich kombinieren, und grössere Produkte entstehen 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. Komponenten lassen sich ü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. Das Aussehen ändert sich durch Anpassung von Custom Properties im globalen Theme.

Composable

Ein webbloq ist komponierbar durch die Standard Web Component API. Komplexere Komponenten entstehen, indem webbloqs oder anderes HTML-Markup kombiniert werden.

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

Durchsuchen Sie den webbloqs Catalog nach Zweck und finden Sie einen webbloq, um Inhalte zu illustrieren, zu indizieren oder zu strukturieren. Jeder webbloq lässt sich direkt ausprobieren.

2. Komponente auswählen und anpassen

Wählen Sie einen webbloq aus, der in Ihrem Anwendungs-Theme angezeigt wird. Passen Sie ihn an, bevor Sie seinen Code in den Editor kopieren.

3. API entdecken

Entdecken Sie die API eines webbloqs. Element- und Styling-Properties zur Anpassung sind dort dokumentiert, die Effekte direkt im Catalog sichtbar.

4. Code kopieren und einfügen

Kopieren Sie den generierten Code und fügen Sie ihn in Ihr Projekt ein. webbloqs funktionieren nativ in Frontend-Frameworks mit Standard JSX, Code-Completion und HMR.

Best Practices

Design System «as is» verwenden

Vermeiden Sie zunächst jegliches Styling im eigenen Code. Verwenden Sie die Elemente und passen Sie sie nur mit ihren Attributen an. Wenn das Design System es schwierig macht, das erforderliche Design zu erreichen, setzen Sie ein FIXME in den Code und öffnen Sie einen PR, um eine Alternative vorzuschlagen.

Design System herausfordern statt lokal zu fixen

Wenn Ihnen etwas auffällt, das nicht in das Design System passt oder das ständig angepasst werden muss, schlagen Sie eine Änderung im Theme vor. Es ist wie Politik: Nehmen Sie an der Diskussion teil, anstatt eine eigene Republik zu gründen.

Keine inline Styles ohne Notwendigkeit

Verwenden Sie style="" oder innerCss="" nicht, ohne sicher zu sein, dass sich das Problem nicht auf einem anderen Weg lösen lässt. 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.

Erkunden Sie den webbloqs Catalog oder sehen Sie sich 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.