Grid und Responsivität

Breakpoints

Die Darstellung ist fluid bis 560 und oberhalb adaptiv.

Breakpoints gibt es bei den Browserbreiten 560px, 740px, 980px und 1100px.

Bei 560px existieren nur minimale Änderungen im Artikel, ansonsten beziehen sich die meistens responsiven Anpassungen auf 740px und 980px. Bei 1100px werden nur die Spalten etwas breiter, während Schriftgrößen, Anordnung etc gleich bleiben.

1100px entspricht 980er Darstellung, ausser etwas breitere Elemente

Das Grid hat gedachte 12 Spalten, für die es aber keine speziellen Klassen gibt. Elemente im grid (Teaser, Images) werden nach ihren Prozentanteilen vom Gesamtgrid an den drei Breakpoints mobil, 740px und 980px benannt. Ein Teaser-100-50-33 ist also mobil 100% breit, ab 740px Browserbreite 50% (6 Spalten) breit und ab 980px 33% (4 Spalten) breit.

Grid

Um das HTML möglichst von nicht semantischen Klassen zur Responsivität frei zu halten, gibt es keine col-xy Klassen wie z.B. bei Bootstrap. 

Daher sind Elemente, die nicht 100% breit sind jeweils einzeln in der Breite an den Breakpoints definiert.

@include mq740 {
   .article-image-100-50-50 {
      width: 280px;
   }
}

Das führt einerseits zu einigen Doppelungen von Größenangaben für verschiedene Elemente. Andererseits bleibt das HTML verdichteter und die vielen Ausnahmen von Breiten, die sich auf den Viewport oder nur den Artikel beziehen sind leichter umzusetzen.

Grid-box

Es gibt einen zentrierten grid-box Container, der den äusseren Rahmen des Grids darstellt.

.grid-box {
     margin: 0 20px;
}

@include mq560 {
     .grid-box {
          margin-left: auto;
          margin-right: auto;
          width: 520px;
     }
}

@include mq740 {
     .grid-box {
          width: 700px;
     }
}

@include mq980 {
     .grid-box {
          width: 940px;
     }
}

@include mq1100 {
     .grid-box {
          width: 1060px;
     }
}


Section .article

Der Artikelinhalt ist weitestgehend schmaler als das grid und wird mit der Klasse .article in der Breite begrenzt. Einzelne Elemente wie Bilder im Artikel können aber auch als Section die volle Viewportbreite oder die Gridbreite haben.

Beispielsweise ist ein Artikelbild mit der Klasse article-image-vp-vp-grid mobil und bei 740px so breit wie der Viewport (Browser) und ab 980 so breit wie das Grid.

Teilen