@_kulturbanause

05.06.2018 Webinale Berlin

Grid loves Flexbox

Jonas Hellwig
kulturbanause.de
@_kulturbanause

Jonas Hellwig

Front-End-Designer @_kulturbanause

Autor, Dozent

Was erwartet euch?

Web-Layouts im Wandel der Zeit

Flexbox- und Grid-Syntax

Modulares Design

Flexbox als Fallback für Grid

Flex und Grid in Kombination

Web Layouts im Wandel der Zeit

HTML pur

Frames

<frameset rows="25%,75%">
  <frameset cols="100%">
    <frame src="header.html">
  </frameset>
  <frameset cols="25%,75%">
    <frame src="sidebar.html">
    <frame src="content.html">
  </frameset>
</frameset>

Demo

Tables

<table border="1" width="100%">
  <tr>
    <th colspan="2">Header</th>
  </tr>
  <tr>
    <td width="25%">Sidebar</td>
    <td width="75%">Content</td> 
  </tr>
</table>

Demo

CSS Layouts

display: table;

float: left;

CSS Grid Systeme

>>> Jetzt kam RWD :) <<<

CSS Frameworks

Das "selbstgebaute" CSS Grid

aka Bootstrap Grid

Das "selbstgebaute" CSS Grid

aka Bootstrap Grid

Das "selbstgebaute" CSS Grid

aka Bootstrap Grid

Das "selbstgebaute" CSS Grid


<div class="container">
  <div class="row">
    <div class="xs-12 s-12 m-6 l-6 xl-3 columns"> … </div>
    <div class="xs-12 s-12 m-6 l-6 xl-3 columns"> … </div>
    <div class="xs-12 s-12 m-6 l-6 xl-3 columns"> … </div>
    <div class="xs-12 s-12 m-6 l-6 xl-3 columns"> … </div>
  </div>
</div>

aka Bootstrap Grid

CSS Layoutmodelle

Flexbox

Grid


Unabhängiges Layout

Sauberer Code

Logical Properties

Flexbox Syntax

Container + direkte Kind-Elemente


<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

Flexbox

Steuerung über Achsen

1
2
3

Flexbox

Mehrspaltigkeit mit flex-wrap

1
2
3
4

Flexbox

Flexibilität der Flex-Items

1
2
3
4

Flexbox arbeitet eindimensional!

Grid Syntax

Container + direkte Kind-Elemente


<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Grid

Steuerung über grid-template

1
2
3
4

Grid

Explicit vs. Implicit, grid-auto-flow

1
2
3
4
5
6
7

Grid arbeitet zweidimensional!

Modulares Design

Entscheidend ist der Überblick!

Seitentypen über alle Displaygrößen hinweg planen

Major Breakpoints für globale Layoutentscheidungen

Entscheidend ist der Überblick!

Flexible Komponenten für kleinere Bereiche planen

Minor Breakpoints für kleine Sinnabschnitte

Ein Blick in die Frameworks

Bootstrap

Raster mit Flexbox

Komponenten mit Flexbox


Foundation

Raster mit Floats, Flexbox oder Grid

Komponenten mit Flexbox

Flexbox als Fallback

Feature Queries


/* Hier steht die Flexbox-Variante */

@supports (display:grid) {

  /* Nutze CSS Grid */

}

8 Boxen im 9er Grid

Flexbox als Fallback

1
2
3
4
5
6
7
8

Gleich hohe Cards

Grid als Progressive Enhancement

Vorschau Demo

Grid to Flex

gridtoflex.com

Flexbox und Grid in Kombination

Boxed Layout

Inspiration

1
2
3
4
5
6
7
8
9
10
11
12
13

Desktop-Application Layout

Desktop-Application Layout

Fazit

Alle Techniken haben Ihren Wert!

Verwendet Flex, Grid, Float & Co. in Kombination

Nutzt Grid ab sofort und plant Fallbacks!

Designed responsive im Browser

griddy.io

Vielen Dank!



Jonas Hellwig

kulturbanause.de

blog.kulturbanause.de

@_kulturbanause