Tag 5: Breakpoints nutzen und anpassen

Transkript

Moin und herzlich Willkommen zum fünften Tag von „Bessere Websites mit OPTIMIST“. Im heutigen Video zeige ich dir, welche Breakpoints es gibt, wie du diese anpassen kannst und an welchen Stellen diese verwendet werden.

Im letzten Video habe ich ja bereits erwähnt, das es die Breakpoints von XS bis XL gibt. Dies sind die Standard-Breakpoints und sie kommen direkt aus dem Nutshell Framework, auf dem das OPTIMIST Theme basiert.

Bevor wir uns aber die Breakpoints ansehen, werde ich noch ein kleines Snippet einbauen, mit dem ich mir den jeweils aktiven Breakpoint anzeigen lassen kann:

body {
    &::after {
      font-size: 0.75rem;
      padding: 0 var(--base-spacing-unit);
      border-radius: 0 var(--base-border-radius) 0 0;
      background-color: var(--color-text);
      color: var(--color-text-inverted);
      position: fixed;
      bottom: 0;
      z-index: 1005;
      content: 'screen-xs';
    }

    @include media-query(screen-sm) {
      &::after {
        content: 'screen-sm';
      }
    }

    @include media-query(screen-md) {
      &::after {
        content: 'screen-md';
      }
    }

    @include media-query(screen-lg) {
      &::after {
        content: 'screen-lg';
      }
    }

    @include media-query(screen-xl) {
      &::after {
        content: 'screen-xl';
      }
    }
  }

Dieses füge ich in die _helper.scss ein und nun wird mir unten links immer der jeweilige Breakpoint angezeigt.

Zurück zum Nutshell Framework. Die Breakpoints sind in der _config.scss definiert. Hier sehe ich, dass der XS-Viewport von 0 bis 549 Pixel geht, der SM-Viewport von 550 bis 767 Pixel geht und so weiter.

Wenn ich in OPTIMIST einen Viewport ändern möchte, dann kann ich das machen, indem ich die Sass-Map $breakpoints kopiere und in OPTIMIST in die _config.scss einfüge. Wichtig ist, dass ich außerdem das !default am Ende entferne.

Am Besten schauen wir das anhand eines Beispiels an. Ich möchte, dass der Medium Viewport zwar ab 768 Pixel beginnt, aber er soll bis 1024 Pixel oder genauer gesagt bis 1023 Pixel gehen. Dafür ändere ich den Medium max-Wert indem ich 1024 durch 16 teile, das ergibt 64em und diesen Wert für max eintrage. Durch das Minus $max-diff wird daraus ein Wert, der etwas kleiner als 1024 Pixel ist.

Jetzt muss ich außerdem noch den Min-Wert für den Large Viewport anpassen. Auch hier trage ich 64em ein, damit ich keine Lücken habe und wenn ich jetzt die Datei speichere, dann sollte sich mein Medium Viewport angepasst haben.

Wenn das geklappt hat, dann sollte ich bei einer Auflösung von 940 Pixel nun nicht mehr im Large Viewport sein, sondern weiterhin im Medium Viewport. Ich lade also die Seite neu und sehe unten links, den geänderten Viewport. Ich sehe die Änderung aber auch bei meiner Text-Bild-Kombination hier oben, die ich mit der Grid-Erweiterung gestaltet habe. Hier wird nun über 940 Pixel hinaus der Text 7 spaltig und das Bild 5-spaltig dargestellt. Erst ab 1024 Pixel greifen die Anweisungen für den Large-Breakpoint.

Nun kann es sein, dass du die Standard-Breakpoints gar nicht unbedingt anpassen willst. Es gibt aber noch einen zusätzlichen Breakpoint und dieser könnte durchaus relevant für dich sein.

Und zwar findest du weiter unten die Möglichkeit zusätzliche Breakpoints zu definieren und du siehst auch, dass bereits einer definiert ist. Der Menu-Breakpoint ist nur für die Darstellung des Menüs da, also den Bruch, an dem aus einem mobilen Menü eine vollwertige Navigation werden soll.

Aktuell ist dieser Bruch bei 832 Pixel und wenn wir uns das mal im Browser ansehen, dann sehen wir, dass das schon ziemlich knapp ist. Aber Navigation und Logo passen gerade noch so nebeneinder. Solltest du mehr oder längere Menüpunkte haben, dann solltest du den Breakpoint entsprechend anpassen, sodass alle Menüpunkte und das Logo gut sichtbar sind.

Schauen wir uns zu guter Letzt nochmal 3 Beispiele an, bei denen diese Breakpoints berücksichtigt werden. Du findtest sie alle in der _variables.scss. In Zeile 63 bis 65 erhöhe ich ab dem Small Breakpoint den Spaltenabstand des Grids. Vorher war er 1rem, ab 768 Pixel ist er 1.875rem, das sind umgerechnet 30 Pixel.

Und auch ein paar Zeilen weiter unten werden die definierten Breakpoints verwendet, wenn auch nicht ganz so offensichtlich, wie beim Grid. In OPTIMIST ist für jeden Breakpoint eine eigene Schriftgröße für die Überschriften definiert. Ich kann also sagen, dass eine H1 auf dem Smartphone kleiner sein soll, als auf dem Desktop und so unschöne Umbrüche bei Wörtern wie Dampfschifffahrtskapitän vermeiden.

Und hier ab Zeile 150 bis 153 erhöhe ich mit dem Media Query-Mixin den Standard Artikel-Innenabstand ab dem Large-Breakpoint, damit Artikel auf großen Bildschirmen etwas mehr Luft nach oben und unten haben.

Auch hier gilt wieder, dass du dir am Besten nochmal ein paar Minuten Zeit nimmst und selbst ein paar Anweisungen anpasst.

Ich wünsche dir viel Spaß beim Ausprobieren, Mach's gut und Erstmal!