Über Typ-Muster und Style Guides

In den letzten sechs Jahren habe ich diese Dinge, die ich „Typ-Muster“ nenne, in meiner Webdesign-Arbeit verwendet, und sie haben für mich ziemlich gut funktioniert. Ich werde darauf eingehen, was sie sind und wie sie in CSS Eingang finden können, und vielleicht wird die Idee auch bei Ihnen ankommen und Ihnen bei Ihren täglichen Typografie-Bedürfnissen helfen.

Wenn Sie Desktop-Publishing-Software für Printdesign wie QuarkXPress, Adobe InDesign oder CorelDraw verwendet haben, dann stellen Sie sich diese Idee als eine HTML/CSS-Übersetzung von „Absatzformaten“ vor.

Wenn Sie ein Buch (das Hunderte von Seiten umfasst) gestalten, möchten Sie vielleicht etwas an der Typografie der Überschriften im ganzen Buch (sofort) ändern. Sie würden definieren, wie ein bestimmtes Stück Typografie an einer zentralen Stelle funktioniert, um es im gesamten Projekt (ein Buch, in unserem Beispiel) anzuwenden. Sie brauchen Kontrolle über die Muster.

Die meisten Programme verwenden diesen Benennungsstil, aber ihre Benutzeroberflächen variieren leicht.

Wenn Sie den Bereich aufrufen, gibt es normalerweise einen „Basis“-Absatzstil, zu dem alle Standardtexte gehören. Von dort aus können Sie so viele erstellen, wie Sie möchten. Absatzformate sind für Elemente auf „Block“-Ebene, und Zeichenformate sind für Elemente auf „Inline“-Ebene, wie z. B. Fett oder eindeutige Spans.

Die Benutzeroberfläche spielt keine Rolle – aber Sie können sehen, dass es viele Steuerelemente gibt, um zu definieren, wie dieser Text visuell funktioniert. Unter der Haube sind es nur Schlüssel: Wert-Paare, was genau wie CSS Eigenschaft: Wert-Paare ist.

h1 {
  font-family: "Helvetica Neue", sans-serif; 
  font-size: 20px;
  font-weight: bold;
  color: fuchsia;
}

Nach der Definition können die Stile auf jeden Text angewendet werden. Das kleine + (neben dem Namen des Absatzstils unten) bedeutet in diesem Fall, dass die Stildefinition geändert wurde.

Wenn Sie diese Änderungen auf alles mit diesem Absatzstil anwenden möchten, können Sie den Stil „neu definieren“, und er wird projektweit angewendet.

Wenn ich das so sage, denken Sie vielleicht: Das ist eine CSS-Klasse.

Aber für eine Website ist die Sache etwas komplizierter. Sie wissen nie, wie groß Ihre Website angezeigt wird (sie könnte klein sein, wie auf einem Mobilgerät, oder riesig, wie auf einem Desktop-Monitor, oder sogar auf einem monochromatischen Tablet, wer weiß), daher müssen wir bei diesen Klassen kontextbezogen vorgehen und sie basierend auf ihrem Kontext ändern lassen.

Das absolute Minimum an typografischer Kontrolle

In Ihren frühesten Tagen als Entwickler sind Sie vielleicht mit semantischem HTML in Berührung gekommen, wie diesem

<h1>Here's some HTML stuff. I'm a heading level 1</h1>
<p>And some more. I'm a paragraph.</p>

<h2>This is a heading level 2</h2>
<p>And some more pragraph stuff.</p>

Und das passt zu CSS, das diese Elemente anspricht und Stile anwendet, wie diesem

h1 {
  font-size: 50px; /* key: value pairs */
  color: #ff0066;
}

h2 {
  font-size: 32px;
  color: rgba(0,0,0,.8);
}

p {
  font-size: 16px;
  color: deepskyblue;
  line-height: 1.5;
}

Das funktioniert!

Sie können Regeln schreiben, die die Header ansprechen und sie in absteigender Reihenfolge formatieren, sodass sie größer > groß > mittel sind und so weiter.

Header haben bereits einige Stile, die wir als normal akzeptieren, dank der User-Agent-Stile (d. h. Standardstile, die der Browser selbst auf HTML anwendet). Sie sollen hilfreich sein. Sie fügen Dinge wie font-weight und margin zu den Headern hinzu, sowie kollabierende Abstände. Auf diese Weise können wir – ohne jegliches CSS – sicher sein, dass wir zumindest einige grundlegende Stile erhalten, um eine Hierarchie zu erstellen. Das ist anfängerfreundlich, fehlerverzeihend… und eine gute Sache!

Je komplexer Ihre Websites werden, desto komplizierter wird es

Sie fügen mehr Seiten hinzu. Mehr Module. Mehr Komponenten. Die Dinge werden komplizierter. Sie beginnen vielleicht damit, eindeutige Klassen und Stile für jedes kleine Detail hinzuzufügen, aber das wird Sie einholen.

Zuerst haben Sie Klassen für spezielle Situationen

<h1 class="page-title">
  Be <span class='super-ultra-magic-rainbow'>excellent</span> to each other
</h1>

<p class="special-mantra">Party on, <em>dudes</em>.</p>

<p>And yeah. I'm just a regular paragraph.</p>

Dann haben Sie überall Klassen (die meisten CSS-Methodologien ermutigen dies sogar)

<header class="site-header">
  <h1 class="page-title">
    Be <span class='ultra-magic-rainbow'>excellent</span> to each other
  </h1>
</header>

<main class="page-content">
  <section class="welcome">
    <h2 class="special-mantra">Party on <em>dudes</em></h2>

    <p class="regular-paragraph">And yeah. I'm just regular</p>
  </section>
</main>

Neueinsteiger versuchen, die Standard-Schriftgrößen und kollabierenden Abstände zu umgehen, wenn sie sich nicht sicher fühlen, „zurückzusetzen“ sie.

Hier beginnen die Leute, margin-top: -20px auszuprobieren… und dann werden die Dinge verrückt. Wenn Sie immer mehr Regeln schreiben, um die Dinge in den Griff zu bekommen, wird es sich anfühlen, als würden Sie Dinge „reparieren“, anstatt zu deklarieren, wie Sie tatsächlich möchten, dass sie funktionieren. Es kann sich schnell anfühlen, als würden Sie gegen die CSS-Kaskade „kämpfen“, wenn Sie sich der User-Agent-Stile des Browsers nicht bewusst sind.

Ein Beispiel aus der Praxis

Stellen Sie sich vor, Sie sind bei Ihrer richtigen Arbeit und Ihr Chef (oder der Grafikdesigner) gibt Ihnen dieses „Pixel-perfekte“ Adobe Photoshop-Dokument. Es gibt eine Menge Farben, Layout und Typografie.

Sie öffnen Photoshop und fangen an, herumzustochern, aber es gibt so viele Seiten und so viele verschiedene Schriftarten, dass Sie Inventur machen und herausfinden müssen, welche Stile kombiniert oder in Kombination verwendet werden können.

Es fühlt sich gut an, ein visuelles Layout fertigzustellen und es abzugeben. Ich kann Ihnen jedoch nicht sagen, wie viele ganze Tage ich damit verbracht habe, herauszufinden, was zum Teufel in einem Photoshop-Dokument vor sich geht. Zum Beispiel werden manchmal kleine Bildschirme überhaupt nicht berücksichtigt; und wenn sie es sind, werden die Muster, die Sie finden, nicht immer von jeder Gruppe geteilt, da sie sich für verschiedene Bildschirmtypen ändern. Einige Schriftarten beginnen bei 16px und gehen bis 18px, während andere bis 19px gehen und kursiv werden. Wie kann man Kontextänderungen in einem statischen Mockup erkennen?

Manchmal geschieht dies mit glühendem Eifer; manchmal verlässt sich der Grafikdesigner einfach auf sein Gefühl und rundet Dinge gerne auf und ab, um wiederverwendbare Muster zu erstellen. Sie müssen mit ihnen darüber sprechen. Aber dieser Artikel plädiert dafür, dass wir viel früher im Prozess darüber sprechen.

Sie erhalten möglicherweise eine Stilvorlage als Referenz. Aber selbst die ist möglicherweise nicht spezifisch genug, um Kontexte zu identifizieren.

Zoomen wir in eine dieser Richtlinien hinein

Sie erhalten möglicherweise sogar eine formelle, aber generische Stilvorlage ohne Pixelgrößen oder Hinweise auf unterschiedliche Bildschirmgrößen!

Verstehen Sie mich nicht falsch: Diese Art von Sache ist definitiv ein schöner Gedanke, und sie mag sogar für andere nützlich sein, zum Beispiel bei einem Kundengespräch oder so. Aber was die Frontend-Entwicklung angeht, ist es eher verwirrend als hilfreich. Ich habe sehr gründliche Stilvorlagen erhalten, die gut aussahen und viele ausgezeichnete Anleitungen für Dinge wie Schriftgrößen gaben, aber völlig unpassend zum begleitenden Photoshop-Dokument waren. Am anderen Ende des Spektrums gibt es Stilvorlagen, die eine unheilige Menge an Spezifikationen für jede Art von Überschrift und Kombination aufweisen, die Sie sich jemals vorstellen können – und noch mehr.

Es ist schwer, diese Dinge zu entschlüsseln, selbst mit den besten Absichten!

Früh in Ihrer Entwicklungskarriere würden Sie wahrscheinlich annehmen, dass es Ihre Aufgabe ist, „es herauszufinden“ und mit der Arbeit zu beginnen, alle Pixel aufzuschreiben und Ihr Bestes zu geben, um Sinn daraus zu machen. Machen Sie sich ran!

Aber wenn Sie anfangen, alle Spezifikationen zu codieren, kann es mit der Menge an Duplizierung ein wenig überwältigend werden. Schauen Sie sich nur all die wiederholten Eigenschaften an, die hier vorkommen.

.blog article p {
  font-family: 'Georgia', serif;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.welcome .main-message {
  font-family: 'Georgia', serif;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

@media (min-width; 700px) {
  .welcome .main-message {
    font-size: 18px;
  }
}

.welcome .other-thing {
  font-family: 'Georgia', serif;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.site-footer .link list a {
  font-family: 'Georgia', serif;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

Sie könnten die gemeinsamen Deklarationen nehmen und sie stattdessen auf den Body anwenden. In kleineren Projekten könnte das sogar ein guter Weg sein. Es gibt Möglichkeiten, die Kaskade zu Ihrem Vorteil zu nutzen, und andere, die zu viele Dinge miteinander zu verbinden scheinen. Genau wie in einer objektorientierten Programmiersprache möchten Sie nicht unbedingt, dass alles alles erbt.

body {
  font-family: 'Georgia', serif;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

Die Dinge werden schon gut gehen. Ein Großteil des Webs wurde so gebaut. Wir suchen nur nach etwas noch Besserem.

Umgang mit Design-Überarbeitungen

Eines Tages wird es eine Besprechung geben. Bei dieser Besprechung erfahren Sie, dass der Kunde und der Grafikdesigner beschlossen haben, einen Großteil der Typografie zu ändern. Jetzt müssen Sie zurückgehen und sie an 293 Stellen in der CSS-Datei ändern. Wenn Sie nach Stunden bezahlt werden, könnte das großartig sein!

Wenn Sie anfangen, die Regeln anzupassen, werden die Dinge anfangen zu kollidieren. Diese Regel, die für zwei Dinge funktionierte, funktioniert jetzt nur noch für eines. Oder Sie bemerken Muster, die jetzt an viel mehr Stellen als zuvor verwendet werden könnten. Sie könnten sogar versucht sein, das CSS komplett zu löschen und neu zu beginnen! Yikes!

Ich werde es hier nicht aufschreiben, aber Sie werden im Laufe der Zeit viele verschiedene Dinge ausprobieren, und die Leute kommen normalerweise zu dem Schluss, dass Sie eine Klasse erstellen – und sie dem Element hinzufügen können, anstatt Regeln/Deklarationen für jedes Element zu duplizieren. Sie werden noch weiter gehen, um Muster aus den Dokumenten des Grafikdesigners zu extrahieren. (Sie könnten sogar ein paar 19px auf 18px abrunden, ohne es ihnen zu sagen…)

.standard-text { /* or something */
  font-family: serif;
  font-size: 16px; /* px: up for debate */
  line-height: 1.4; /* no unit: so it's relative to the font-size */
  letter-spacing: 0.02em; /* em: so it's relative to the font-size */
}

.heading-1 {
  font-family: sans-Serif;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.medium-heading {
  font-family: sans-Serif;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

Dann würden Sie die Klasse auf alles anwenden, was sie braucht.

<header class="site-header">
  <h1 class="page-title heading-1">
    Be <mark>excellent</mark> to each other
  </h1>
</header>

<main class="page-content">
  <section class="welcome">
    <h2 class="medium-heading">Party on <em>dudes</em></h2>

    <p class="standard-text">And yeah. I'm just regular</p>
  </section>
</main>

Diese Vorgehensweise kann für Teams, in denen Personen aller Erfahrungsstufen das HTML ändern, sehr hilfreich sein. Sie können Plug and Play mit diesen CSS-Klassen verwenden, um den gewünschten Stil zu erhalten, auch wenn Sie der neue Praktikant sind.

Es ist wirklich hilfreich, die Idee von „Layout“-Elementen (Struktur/Eltern) und die Idee von „Modulen“ oder „Komponenten“ zu trennen. Auf diese Weise behandeln wir die Textteile als Komponenten auf niedrigerer Ebene.

Der Schlüssel ist, die Typografie vom Layout getrennt zu halten. Sie möchten nicht, dass alle .medium-heading-Elemente die gleichen Abstände oder Farben haben. Das hängt davon ab, wo sie sich befinden. Auf diese Weise gestalten Sie basierend auf dem Kontext. Sie „verwenden“ nicht unbedingt die Kaskade, aber Sie „kämpfen“ auch nicht dagegen, weil Sie die Techniken getrennt halten.

.site-header {
  padding: 20px 0;
}

.welcome .medium-heading { /* the context — not the type-pattern */
  margin-bottom: 10px;
}

Das hält die Dinge vernünftig und ordentlich. Diese Technik wird überall im Web eingesetzt.

Arbeiten mit einem CMS

Großartig, aber was ist mit Situationen, in denen Sie das HTML nicht ändern können?

Sie tippen vielleicht nur einen schnellen CodePen oder eine Visitenkarten-Website. In diesem Fall scheinen diese Bedenken übertrieben zu sein. Auf der anderen Seite arbeiten Sie vielleicht mit einem CMS, bei dem Sie nicht sicher sind, was passieren wird. Sie müssen sich auf alles und jedes vorbereiten, was Ihnen vorgeworfen werden könnte. In diesen Fällen können Sie nicht einfach Klassen zu einzelnen Elementen hinzufügen. Sie erhalten wahrscheinlich einen HTML-Dump aus einer Vorlagensprache.

<?php echo getContent()?>
<?=getContent()?>
${data.content}
{{model.cmsContent}}

Wenn Sie also nicht mit dem HTML arbeiten können, was können Sie tun?

<article class="post cms-blog-dump">
  <h1>Talking type-patterns on CSS-tricks</h1>
  <p>Intoduction paragraph - and we'd like to style this with a slightly different size font then the next (normal) paragraphs</p>
  <h2>Some headings</h2>
  <h2>And maybe someone accidentally puts 2 headings in a row</h2>
  <ol>
    <li>and some <strong>list</strong></li>
    <li>and here</li>
  </ol>

  <p>Or if a blog post is too boring - then think of a list of bands on an event site. You never know how many there will be or which ones are headlining, so you have to write rules that will handle whatever happens.
</article>

Sie haben keine Kontrolle über dieses Markup, daher können Sie keine Klassen hinzufügen, was bedeutet, dass die coolen Plug-and-Play-Klassen, die Sie erstellt haben, nicht funktionieren werden! Sie könnten sie einfach kopieren und in eine größere .article { }-Klasse einfügen, die die Regeln für einen All-in-one definiert. Das könnte funktionieren.

Welche anderen Werkzeuge gibt es zum Spielen?

Mixins

Wenn Sie ein wiederverwendbares Konzept eines „Typ-Musters“ mit Sass erstellen könnten, könnten Sie diese ähnlich anwenden, wie Klassen funktionieren.

@mixin my-useful-rule { /* define the mixin */
  background-color: blue;
  color: lime;
}

.thing {
  @include my-useful-rule(); /* employ the mixin */
}

/* This compiles to: */
.thing {
  background-color: blue;
  color: lime;
}
/* (just so that we're on the same page) */

Less, Sass, Stylus und andere CSS-Präprozessoren haben alle ihre eigene Syntax dafür. Ich werde Sass/SCSS in diesen Beispielen verwenden, da es zum Zeitpunkt des Schreibens am gebräuchlichsten ist ist.

@mixin standard-type() { /* define the mixin */
  font-family: Serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.context .thing {
  @include standard-type(); /* employ it in context */
}

Sie können heading-1() und heading-2() verwenden, und viele große Stilvorlagen machen das. Aber was ist, wenn Sie diese Typstile auf etwas anwenden möchten, das keine „Überschrift“ ist? Ich persönlich verbinde die Überschriften nicht mit „Größe“ und verwende die Muster an allen möglichen verschiedenen Orten. Manchmal sind meine Überschriften „ernst“ und „kräftig“. Sie können durchdringend rot und großgeschrieben sein mit der gleichen x-Höhe wie der normale Text.

Stattdessen definiere ich die visuellen Stile in Verbindung damit, wie die „Stimme“ des Inhalts rüberkommen soll. Dies hilft dem Team auch, über „Ton“ und andere Content-Strategie-Themen über Disziplinen hinweg zu sprechen.

Zum Beispiel spricht Jason Santa Maria in seinem Buch On Web Typography von „Typografie für einen Moment“ und „Typografie zum Leben“. Es gibt Typografie, um Ihre Aufmerksamkeit zu erregen und die Seite aufzubrechen, und dann die Absätze, in die Sie sich vertiefen können. Anstelle von .standard-text oder .normal-font genieße ich die Idee, Stile nach Stimme zu organisieren. Dies ist all die Typografie, mit der ein Benutzer Zeit verbringen soll. Dies ist das, was ich wahrscheinlich für die meisten Absätze und Listen verwenden würde, und ich werde es nicht auf den Body anwenden.

@mixin calm-voice() { /* define the mixin */
  font-family: Serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

@mixin loud-voice() {
  font-family: Sans-Serif;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

@mixin attention-voice() {
  font-family: Sans-Serif;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

Diese Idee der „Stimmen“ hilft mir, die Dinge sinnvoll zu halten, da sie Sie zwingt, Dinge nach Kontext zu benennen. Der Name heading-1b beispielsweise hilft mir nicht, eine Verbindung zum Inhalt herzustellen, zu irgendeiner Art von Storytelling oder zu den anderen Leuten im Team.

Jetzt formatieren wir den Mysterium-Artikel. Ich werde hier SCSS-Syntax verwenden.

article {
  padding: 20px 0;
  h1 {
    @include loud-voice();
    margin-bottom: 20px;
  }
  h2 {
    @include attention-voice();
    margin-bottom: 20px;
  }
  p {
    @include calm-voice();
    margin-bottom: 10px;
  }
}

Hübsch, oder?

Aber so einfach ist das nicht, oder? Nein. Es ist etwas komplizierter, weil Sie nicht wissen, was über oder untereinander stehen könnte – oder was weggelassen werden könnte, weil Artikel nicht immer gleich strukturiert oder organisiert sind. Diese CMS-Autoren können alles hineinstellen! Drei <h3>-Elemente hintereinander? Sie müssen auf viele mögliche Ergebnisse vorbereitet sein.

/* Styles */
article {
  padding: 20px 0;

  h1 {
    @include loud-voice();
  }

  h2 {
    @include attention-voice();
  }

  p {
    @include calm-voice();

    &:first-of-type {
      background: lightgreen;
      padding: 1em;
    }
  }

  ol {
    @include styled-ordered-list();
  }

  * + * {
    margin-top: 1em 
  }
}

Um das reguläre CSS zu sehen, können Sie in CodePen immer auf „Kompiliert anzeigen“ klicken.

Manche Leute sind wirklich glücklich mit dem Lobotomized-Owl-Ansatz (* + *), aber ich schreibe normalerweise explizite Regeln für „jede <h2>, die auf einen Absatz folgt“ und werde wirklich detailliert. Schließlich ist es der geschriebene Inhalt, den jeder lesen möchte… und ich muss es nur einmal an einer Stelle perfektionieren.

/* Slightly more filled out pattern */
@mixin calm-voice() {
  font-family: serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  max-width: 80ch;

  strong {
    font-weight: 700;
  }

  em {
    font-style: italic;
  }

  mark {
    background-color: wheat;
  }

  sup {
    /* maybe? */
  }

  a {
    text-decoration: underline;
    color: $highlight;
  }

  @media (min-width: 600px) {
    font-size: 17px;
  }
}

Stylus

Es ist schön, über den „idealen“ Workflow nachzudenken. Was könnten Browser implementieren, um dies unterhaltsam und kompatibel mit ihren zukünftigen Systemen zu machen?

Hier ist ein Beispiel für die am meisten gestraffte Präprozessor-Syntax

calm-voice()
  font-family: serif
  font-size: 16px
  line-height: 1.4
  letter-spacing: 0.02em

article
  h1
    loud-voice()
  h2
    attention-voice()
  p
    calm-voice()

Ich werde ehrlich sein… ich liebe Stylus. Ich liebe es, es zu schreiben, und ich liebe es, es für Beispiele zu verwenden. Es hält die Leute auf Trab. Es ist so schnell, in CodePen zu tippen! Wenn Sie bereits Ihr eigenes kleines Framework von Stilen haben wie dieses, ist es verrückt, wie schnell Sie Benutzeroberflächen erstellen können. Aber! Die Werkzeuge sind zurückgeblieben und zu diesem Zeitpunkt kann ich niemandem empfehlen, es zu benutzen.

Ich füge es nur hinzu, weil es wichtig ist, zu träumen. Wir haben, was wir haben, aber was, wenn Sie eine neue Art des Schreibens erfinden könnten? Das ist auch ein entscheidender Teil der Konversation. Wenn Sie nicht beschreiben können, was Sie wollen, werden Sie es nicht bekommen.

Hier sind wir: Typ-Muster

Können Sie sehen, wohin das alles führt?

Sie können diese „Muster“ oder „Mixins“ oder wie auch immer Sie sie nennen wollen, verwenden und Plug-and-Play anwenden. Es macht Spaß. Und Sie können es auch perfekt mit der Utility-Klassen-Idee kombinieren (wenn Sie müssen).

.calm-voice {
  @include calm-voice();
}

<p class="calm-voice">Welcome to this code snippet!</p>

Stilvorlagen

Wenn Sie anfangen können, eine gemeinsame Sprache zu teilen und die Barrieren zwischen „Kreativen“ und „Codern“ abzubauen, können alle von Anfang an mit diesen Typ-Mustern arbeiten.

Manchmal können Sie eine Stilvorlage einfach als „Brand“-Subdomain veröffentlichen oder direkt auf der Website, z. B. unter /style-guide. Es gibt unzählige davon im Web. Der Punkt ist, dass einige Stilvorlagen eigenständig sind, andere sind in die Website selbst integriert. Wo auch immer sie sich befinden, sie gelten als „live“ und ermöglichen es Ihnen, Dinge an einem Ort zu entwickeln, die sich global auswirken, und die Vorlage selbst als eine Art Artefakt zu verwenden.

Durch die Erstellung von Live-Stilvorlagen mit Typ-Mustern als Kern- und gemeinsamem Konzept werden alle mehr Spaß haben und Zeit sparen, wenn sie versuchen, herauszufinden, was die anderen meinen. Das ist nicht nur etwas für große Unternehmen.

Seien Sie vorsichtig, wenn Sie sich Stilvorlagen für andere Organisationen ansehen. Stilvorlagen dienen je nach Benutzer und Verwendungszweck unterschiedlichen Zwecken. Das einfache Eintauchen in die Arbeit anderer kann tatsächlich mehr Verwirrung stiften.

Bekannte Unbekannte

Manchmal weiß man nicht, was der Inhalt sein wird. Das bedeutet CMS-Sachen, aber auch Logik. Was ist, wenn Sie eine Liste von Bands und Veranstaltungen haben und ein Modul mit bedingten Komponenten erstellen? Es könnte eine Band geben… oder fünf… oder zwei Co-Headliner. Die Veranstaltung könnte abgesagt werden!

Als ich versuchte, einige Vorlagenideen für Ticketfly auszuarbeiten, trennte ich die Belange von Layout und Typ-Mustern.

Variable Schriftmuster

Einige Muster ändern die Größe an verschiedenen Haltepunkten.

@mixin attention-voice() {
  font-family: Serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  @media (min-width: 700px) {
    font-size: 24px;
  }
  @media (min-width: 1100px) {
    font-size: 30px;
  }
}

Früher habe ich so etwas gemacht, und es hatte ein paar eklige Nebenwirkungen. Was ist zum Beispiel, wenn Sie Plug-and-Play basierend auf den Haltepunkten verwenden und es Größen gibt, die kollidieren oder durchrutschen?

clamp() und vmin Einheiten zur Rettung!

@mixin attention-voice() {
  font-family: Serif;
  font-size: clamp(18px, 10vmin, 100px);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

Nun, theoretisch könnten Sie sogar nahtlos zwischen den Mustern wechseln.

.context {
  @include calm-voice();
  @media (min-width: 840px) {
    @include some-other-voice();
  }
}

Aber jetzt müssen Sie sicherstellen, dass beide die gleichen Eigenschaften haben und dass sie nicht mit anderen kollidieren oder durchsickern! Und denken Sie auch an die neuen variablen Schriftoptionen. Manchmal möchten Sie, dass Ihre Überschrift auf kleineren Bildschirmen etwas weniger schwer ist oder etwas höher, um mit dem Platz zu arbeiten.

Duplizieren Sie nicht überall Stilregeln?

Yikes! Sie haben mich erwischt. Mir ist der Prozess der Erstellung und Wartung viel wichtiger als die CSS-Bytegröße. Ich bin aber zwiegespalten. Ich verstehe es. Aber ich denke auch, dass die Lösung irgendwo anders in der Pipeline erfolgen sollte. Es gibt einen Grund, warum wir keinen Maschinencode von Hand schreiben.

Manchmal muss man ein Programmiermuster genau untersuchen und es genau untersuchen, es überall ausprobieren, um zu beweisen, wie nützlich es ist. Humorieren Sie mich für einen Moment und schauen Sie sich an, wie Sie dieses Typ-Muster und andere Mixins verwenden würden, um eine gängige „Card“-Oberfläche zu gestalten.

In gewisser Weise sind Typ-Muster wie der Utility-Klassen-Stil von Bootstrap oder Tailwind. Aber diese sind menschlich lesbar. Die Muster werden in der CSS statt im HTML hinzugefügt. Das Konzept ist dasselbe. Ich denke gerne, dass jeder sich die Live-Stilvorlage ansehen und in eine Komponente eintauchen und sie gestalten kann. Was meinen Sie?

Es erzeugt zwar mehr CSS. Diese Kilobytes stapeln sich. Aber ich denke, wir sollten auf etwas Ideales hinarbeiten, anstatt nur auf etwas „Mögliches“. Wir können wahrscheinlich etwas bauen, das dies zur Bauzeit löst. Ich muss mehr über das CSSOM lernen, und es gibt viele neue Dinge in der Pipeline, die dies ohne Präprozessor möglich machen könnten.

Es ist mehr als nur CSS. Es geht um die Menschen.

Ein Satz von Mustern für Typografie in Ihrem Projekt ermöglicht es Grafikdesignern, sich auf ihre Magie zu konzentrieren. Immer mehr bauen wir schnell und im Browser. Grafikdesigner konzentrieren sich auf Gefühl, Typografie und Farbe mit einfachen Frameworks wie Style Tiles. Dann können Entwickler die Daten, Ressourcenstrukturen und Layouts organisieren, und jeder kann gleichzeitig arbeiten. Wir können eine klarere Kommunikation und ein gemeinsames Verständnis des gesamten Prozesses haben. Wir sind alle UX-Designer.

Wenn Live-Stilvorlagen als Team erstellt werden, gibt es viel weniger Notwendigkeit für Pixel-Schubsen. Grafikdesigner können tatsächlich mehr Zeit mit Nachdenken und Ausprobieren von Ideen in Prototypen verbringen und weniger Zeit mit dem Mockup unnötiger Produktionskunst. Dies ermöglicht es Ihnen, an Ihrer Marke als Ganzes zu arbeiten und eine einzige Quelle der Wahrheit zu haben. Es hilft sogar bei wirklich kleinen Websites, wie dieser.

InDesign und Illustrator hatten aus diesem Grund schon immer „Absatzformate“ und „Zeichenformate“, aber sie berücksichtigen keine variablen Bildschirmgrößen.

Fügen Sie ein paar Padding-Typgrößen/-verhältnisse, einige Farben und einige Linienbreiten hinzu. Es muss nicht wirklich „Pixel-perfekt“ sein, sondern eher eine Sammlung von Mustern, die zusammenarbeiten. Farben als Variablen und vielleicht einige Konventionen wie $thick, $thin oder $pad*2 können helfen, Designmuster zu optimieren.

Sie können Ihre Inspiration in dem Grafikprogramm finden, dann direkt zur Live-Stilvorlage springen. Menschen aller Hintergründe können anfangen, mit den Stilen in einem CodePen zu spielen und sie auf verschiedenen Geräten abzustimmen.

Am Ende entscheiden Sie die Details auf realen Geräten – gemeinsam, als Team.