Die Projektkarte

Im Portfolio steht jedes Projekt auf einer Projektkarte, und die begleitet dich durch den Rest des Kurses. In Abschnitt 7 bekommt sie einen Schatten, in Abschnitt 9 einen Button, der unten sitzt, und im Raster von Abschnitt 10 taucht sie wieder auf. Du baust sie in der Aufgabe dieser Lektion. Die Teile dafür sind dieselben wie im ersten Beispiel, dort an einem Hinweiskasten.

Neu ist nur border-radius, das die Ecken rundet. Alles andere kennst du aus den letzten fünf Lektionen.

01 / 04Alle Ringe an einem Kasten

<div class="hinweis">
  <h3>Gut zu wissen</h3>
  <p>Ältere Projekte stehen im Archiv, mit allem, was dazugehört.</p>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

.hinweis {
  /* Die Grenze, damit die Zeilen lesbar kurz bleiben */
  max-width: 320px;

  /* Luft nach innen */
  padding: 16px;

  /* Der Rahmen und seine Rundung */
  border: 2px solid #93c5fd;
  border-radius: 8px;

  /* Der Abstand nach außen, nur nach unten */
  margin-bottom: 24px;

  background-color: #eff6ff;
}

.hinweis h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.hinweis p {
  margin: 0;
}

Im Beispiel stehen alle Teile an einem Hinweiskasten, vom Reset über max-width statt width, padding und border bis zum Abstand nach unten. Dazu kommen eigene Abstände für Überschrift und Text, damit die Vorgaben des Browsers nicht durchschlagen.

Nimmst du box-sizing heraus, ist der Kasten im Inspector 356 statt 320 Pixel breit. Ohne max-width läuft er über die ganze Breite, sobald die Seite breiter wird.

02 / 04Abstand nur in eine Richtung

Die unauffälligste Entscheidung ist die wichtigste. Der Außenabstand geht nur nach unten.

<div class="reihe">
  <div class="karte rundum">Abstand rundum</div>
  <div class="karte rundum">Abstand rundum</div>
</div>

<div class="reihe">
  <div class="karte nur-unten">Abstand nur unten</div>
  <div class="karte nur-unten">Abstand nur unten</div>
</div>

.reihe {
  margin-bottom: 24px;
  background-color: #fef9c3;
}

.karte {
  padding: 12px;
  border: 1px solid #d4d4d8;
  background-color: #ffffff;
}

/* Zwischen den beiden fallen 24 und 24 auf 24 zusammen,
   und oben hängt der Abstand außen am gelben Kasten. */
.rundum {
  margin: 24px;
}

/* Vorhersagbar: 24px zwischen den Karten, sonst nichts. */
.nur-unten {
  margin-bottom: 24px;
}

Bei den oberen beiden Karten steht margin: 24px. Zwischen ihnen liegen trotzdem nur 24 Pixel, weil die beiden Abstände zusammenfallen. Oben und unten hängt der Abstand außerdem außerhalb der gelben Hülle, denn auch dort fällt er zusammen und bricht nach außen aus.

Bei den unteren beiden steht nur margin-bottom: 24px, und das Ergebnis ist das, was auf dem Zettel stand.

Was über einer Komponente steht, wechselt von Seite zu Seite. An der Komponente selbst soll man das nicht berücksichtigen müssen, und deshalb setze ich ihren Abstand nur in eine Richtung.

03 / 04Die Breite begrenzen

<div class="karte">Ohne Grenze zieht sich die Karte über die volle Breite, die da ist, und die Zeile wird so lang, dass das Auge am Zeilenende die nächste Zeile nicht mehr sicher findet.</div>
<div class="karte schmal">Mit einer Grenze von 220px bleibt die Zeile kurz genug, um bequem gelesen zu werden.</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

.karte {
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid #d4d4d8;
  background-color: #ffffff;
}

.schmal {
  max-width: 220px;
}

Eine Karte ohne Breitengrenze zieht sich über den ganzen Bildschirm. Auf einem Telefon ist das richtig. Auf einem breiten Monitor wird die Textzeile aber so lang, dass das Auge am Ende die nächste Zeile nicht mehr zuverlässig findet.

max-width löst beides mit einer Zeile. Die Karte bleibt schmal genug zum Lesen und flexibel genug für kleine Bildschirme. Am ehrlichsten gibt man diese Grenze übrigens nicht in Pixeln an, sondern in einer Einheit, die sich an der Schrift orientiert. Die kommt in Lektion 5.1.

Die 220 Pixel im Beispiel sind bewusst klein gewählt, damit du den Unterschied auch auf einer schmalen Seite siehst. Für eine echte Karte liegt die Grenze eher zwischen 300 und 400 Pixeln.

04 / 04Warum die Komponente nicht weiß, wo sie steht

In der Regel des Hinweiskastens fehlt einiges, und zwar mit Absicht. Keine Position, keine Angabe, wie viele nebeneinander passen, kein Abstand nach oben.

In die Regel einer Komponente gehört nur, was die Komponente selbst betrifft. Alles, was mit ihrer Umgebung zu tun hat, gehört dorthin, wo sie eingesetzt wird. So kann die Projektkarte später in einer Spalte stehen, in einem dreispaltigen Raster und in einer Seitenspalte, und an ihr selbst ändert sich dabei keine einzige Zeile.

In Abschnitt 5 wird sie noch einmal umgebaut. Statt fester Zahlen stehen dann Custom Properties drin, und ab da änderst du das Aussehen aller Karten an einer einzigen Stelle.

In der Aufgabe entsteht die Projektkarte selbst, zweimal untereinander.