Komponenteninventar #

Diese Seite ist für Theme-Designer, die eine vereinbarte Liste aller wiederverwendbaren Teile ihres Themes möchten. Ein Komponenteninventar ist eine Tabelle, kein Werkzeug: eine Zeile pro Komponente, mit ihren Zuständen, den Tokens, die sie verwendet, dem Template, das sie zeichnet, und der CSS-Klasse, die sie gestaltet. Es ist der Vertrag zwischen Design und Code, und Prüfende vergleichen dagegen. Die Administration hat ihre eigenen gemeinsamen Komponenten (admin4-Komponenten), die Sie wiederverwenden und nie kopieren; diese Seite handelt von den Komponenten eines öffentlichen Themes.

Inhalt #

1. Was als Komponente zählt
2. Ein Eintrag
3. Ein Inventar für den Anfang
4. Vom Inventar zum Code
5. Benennung
6. Aktuell halten

Was als Komponente zählt #

Etwas ist eine Komponente, wenn es in mehr als einem Template erscheint oder wahrscheinlich erscheinen wird. Eine Karte, die in einer Ordnerliste, einer Liste verwandter Inhalte und einem Layoutblock erscheint, ist eine Komponente. Ein Schlagzeilenstil, der nur in der Vollansicht des Artikels verwendet wird, ist keine; er gehört zu diesem Template.

Ein Eintrag #

Ein Inventar für den Anfang #

Die meisten Inhaltswebsites brauchen etwa zwanzig Komponenten. Nehmen Sie diese Liste als Anfang und streichen Sie, was die Website nicht verwendet:

Jede Komponente hat die interaktiven Zustände aus Interaktive Zustände gestalten.

Vom Inventar zum Code #

• Markup. Komponenten, die mehrere Templates verwenden, liegen in einem Template-Teil, der bei Bedarf eingebunden wird (Include): {include uri='design:parts/card.tpl' node=$child heading_level=3}. Eine Komponente, ein Template-Teil, damit sich das Markup an einer Stelle ändert.
• Stile. Komponenten kommen in ein Komponenten-Stylesheet des Designs, das in den Stylesheet-Einstellungen des Designs aufgeführt und gepackt wird (Stylesheets laden); nie ein <style>-Block oder ein style=""-Attribut (Kein Inline-CSS).
• Werte. Komponenten verwenden nur Tokens (Design-Tokens). Braucht eine Komponente einen Wert ohne Token, ist das ein Zeichen, einen Token samt dunklem Wert zu ergänzen, nicht den Wert hineinzuschreiben.
• Varianten. Eine Variante ist eine Modifikatorklasse, nie ein Inline-Stil oder ein Stylesheet pro Seite.

Benennung #

• Ein Präfix für das ganze Theme (mytheme-), damit Ihre Klassen nie mit denen des Kernels, einer Erweiterung oder eines anderen Themes kollidieren.
• Benennen Sie nach der Rolle: mytheme-card, mytheme-alert--error, nicht mytheme-blue-box.
• Derselbe Name im Inventar, im Designtool, im Template-Teil und in der CSS-Klasse. Nennt das Designtool es "Teaser" und das CSS "card", baut es jemand zweimal.

Aktuell halten #

• Das Inventar liegt im Repository des Themes neben dem Code, als Markdown-Tabelle oder als Seite in der Dokumentation des Themes (Die README eines Themes schreiben).
• Eine Änderung an einer Komponente ändert das Inventar im selben Commit.
• Prüfen Sie es einmal pro Release: Entfernen Sie Komponenten, die kein Template verwendet, und führen Sie fast gleiche zusammen.
• Eine Styleguide-Seite auf einer Entwicklungswebsite zeigt jeden Eintrag live; so sehen Sie am einfachsten, was abgedriftet ist.

Verwandte Seiten #

• Eine Styleguide-Seite bauen
• Vom Mockup zum Theme
• Styleguide für Templates
• Freie Dokumentation: Diese Seite dürfen Sie unter der GNU FDL 1.3 frei kopieren, übersetzen und verbessern.