The Future is now! Flexbox und fancy Stuff im Responsive Webdesign

  • View
    577

  • Download
    1

Embed Size (px)

Text of The Future is now! Flexbox und fancy Stuff im Responsive Webdesign

  • CodeTalks 2015

    The Future is now! Flexbox und fancy Stuff im Response Webdesign

    Peter Rozek@webinterface Grafik: http://www.planningforaliens.com/

    http://www.planningforaliens.com/

  • PETER ROZEK

    Arbeite bei ecx.io (Digital Agentur)

    Themengebiete: UX

    Usability Accessibility

    Frontend

    Peter Rozek@webinterface

  • Where No Man Has Gone Before

    @webinterface

  • Flexbox =Zukunft?

    Big Bot, by Benedict Campbell@webinterface

  • @webinterface

    DesigningProgressive Enhancement!

  • @webinterface

    Progressive Enhancement als Prozess verstehen nicht nur Technik.

  • @webinterface

    1. Kern Funktion identifizieren. 2. Funktion fr ltere Technologien

    zugnglich machen. 3. Enhance.

  • @webinterface

    Design Fluid Experience und nicht ein Layout.

  • @webinterface

  • @webinterface

    Screensize Universum

  • @webinterface

    Progressive Enhancement adressiert Responsive Webdesign.

  • @webinterface

    Responsive Webdesign vereint Prinzipien von Coherence, Adaptability und Fluidity.

  • @webinterface

    Coherence, Adaptability und Fluidity ergnzen sich zum Meta Prinzip Fluid Experience.

  • @webinterface

    Enhance und du gestaltest Sexy Experience.

    http://stuffpoint.com/

    http://stuffpoint.com/science-fiction/image/249898-science-fiction-tron-legacy-wallpaper.jpg

  • @webinterface

    dann bist du ein Superheld.

    browsergames-testen.de

    http://www.browsergames-testen.de/wp-content/uploads/bg_avengers_01.jpg

  • @webinterface

    ein UX Enthusiasts.

  • @webinterface

    ein Coding Ninja.

  • oder ein anderer macht es!

    @webinterface http://images7.alphacoders.com/303/303105.jpg

  • Fluid Experience mit der Flexbox.

    @webinterface

  • @webinterface

    Tables Floats Inline

    CSS Frameworks

    CSS Flexbox

    CSS Grid Layout

    Layout Entwicklung

    Erreichte Evolutionsstufe

  • Leidige Probleme mit CSS Layouts:

    @webinterface

    Floating, equal height, vertikal zentrieren, Reihenfolge ndern

  • Flexbox lst die Probleme.

    @webinterface

  • Du kannst die Flexbox nutzen!

    @webinterface

    Progressive enhancement fr UI Komponenten.

  • Du musst den IE8 supporten?

    @webinterface

  • I work for Booking.com, and we support IE 7, and I use flexbox.

    @webinterface

    Zoe Gillenwater

    https://www.flickr.com

    https://www.flickr.com/photos/placenamehere/8213369466

  • Viel zu lernen du noch hast.Joda

    @webinterface www.wall321.com/

    http://www.wall321.com/Entertainment/Movies/star_wars_movies_clone_wars_cgi_jedi_yoda_episode_1920x1080_wallpaper_34484

  • Layouts die zuvor eine Herausforderung waren, sind nun verstndlicher.

    @webinterface

  • Flexible Layouts erstellen und die Berechnungen macht der Browser.

    @webinterface

  • Elemente lassen sich beliebig positionieren und aneinander ausrichten.

    @webinterface

  • Boxen lassen sich nebeneinander in Zeilen oder untereinander in Spalten anordnen.

    @webinterface

    Space

  • Elemente lassen in der Hhe, und in der Breite unterschiedlichsten Verhltnissen anpassen.

    @webinterface

    Placement

  • Reihenfolge verndern

    @webinterface

    ordredisplay

    ohne das HTML-Dokument anzupassen mit:

  • @webinterface

    Flexbox aktivieren.

    http://oneofus.net/

    display: flex;

    http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/

  • ... ... ...

    .wrapper {display: flex;flex-flow: row wrap;

    }

    wrapper = flex containercontent und sidebar = flex items

    {css}

    @webinterface

  • @webinterface

  • main start main endmain axis

    @webinterface

    cross start

    cross end

    cross axis

    Flex Container

    flex items

  • Reihenfolge umkehren oder beliebig ndern.

    @webinterface

  • 4 3 2 1

    1 2 3 4

    4

    3

    2

    1

    1

    2

    3

    4

    flex-direction: column;

    flex-direction: row-reverse;

    flex-direction: row;

    flex-direction: column-reverse;

    @webinterface

  • @webinterface

    flex-direction: column;

    flex-direction: column-reverse;

  • @webinterface

    ordredisplay

  • ... ... ...

    @webinterface

  • {css}

    @webinterface

    .wrapper {display: flex;flex-flow: row wrap;

    }

    @media screen and (min-width: 60em) {

    .primery { order: 2;

    }.secondary {

    order: 1;}

    }

  • @webinterface

  • @webinterface

    flex-flow: row wrap;Syntax aus: flex-direction flex-wrap

  • @webinterface

    Mehrzeilige Anordnungflex-wrap

  • @webinterface

    flex-wrap: nowrap;

    flex-wrap: wrap;

    flex-wrap: wrap-reverse;

  • @webinterface

    Horizontale Ausrichtung

  • {css}

    Horizontale Navigation display: table-cell;

    @webinterface

    nav {display: table;width: 100%;

    }.list-nav {

    margin: 0;padding: 0;list-style: none;display: table-row;

    }.list-nav li {

    text-align: center;}

  • @webinterface

    ohneFlexbox

  • {css}

    Navigation mit Flexbox

    @webinterface

    nav {display: table;width: 100%;

    }.list-nav {

    display: flex;flex-direction: row;justify-content: space-around;margin: 0;padding: 0;list-style: none;display: table-row;

    }.list-nav li {

    text-align: center;}

  • @webinterface

    ohneFlexbox

    Flexbox

  • {css}

    Pagination

    @webinterface

    .pagination {margin: 0 0 40px 0;padding: 0;list-style: none;text-align: center;

    }.pagination li {

    display: inline-block;}

  • @webinterface

    ohne Flexbox

  • {css}

    @webinterface

    .pagination {display: flex;flex-wrap: wrap;justify-content: space-between;

    }.pagination li {

    order: 2;}.pagination li:first-child {

    order: 0;} .pagination li:last-child {

    order: 1;}.flexbox .pagination li:first-child, .flexbox .pagination li:last-child {

    width: 50%;}

  • @webinterface

    ohne Flexbox Flexbox

  • {css}

    @webinterface

    @media screen and (min-width: 48em) {

    .pagination li,

    .flexbox .pagination li:first-child,

    .flexbox .pagination li:last-child { order: 0;width: auto;text-align: center;

    }

    }

  • @webinterface

    ohne Flexbox

    Flexbox

  • {css}

    @webinterface

    @media screen and (min-width: 60em) {

    .pagination { justify-content: center;

    }

    }

  • @webinterface

    ohne Flexbox

    Flexbox

  • @webinterface

    justify-content

    Definiert Ausrichtung und Abstand auf der horizontalen.

  • flex-start

    flex-end

    center

    space-between

    space-around

    @webinterface

    justify-content

  • Vertikale Ausrichtung

    @webinterface

  • @webinterface

    align-items: flex-start; align-items: flex-end;

    align-items: center; align-items: stretch;

  • Enhance Responsive Form

    @webinterface

    mit flex-grow, flex-shrink und flex-basis

  • .flexitem { flex: 2 1 100px; } flex-grow flex-basis

    flex-shrink

    @webinterface

    Eigenschaft flex gibt den Flex-items flexible Ausmae mit.

  • @webinterface

    Newsletter example with flexbox

    Name

    Email

    Absenden

    Einfaches Formular mit flex.

  • {css}

    Enhance Responsive Form:

    @webinterface

    .flex-container {display: flex;flex-flow: row wrap;

    }.flex-container .form {

    display: flex;flex-direction: column;flex: 1 2 auto;

    }.flex-container button {

    width: 100%;flex: 0 0 auto;

    }

  • @webinterface

    Flexbox ohne Flexbox

  • {css}

    Enhance Responsive Form:

    @webinterface

    @media screen and (min-width: 48em) {

    .flex-container .form {flex: 1 2 auto;flex-flow: row nowrap;

    }.flex-container label {

    align-self: self;}

    }

  • @webinterface

    Flexbox

    ohne Flexbox

  • {css}

    Enhance Responsive Form:

    @webinterface

    @media screen and (min-width: 60em) {

    .flex-container button {flex: 2 0 auto;

    }

    }

  • @webinterface

    Flexbox

    ohne Flexbox

  • Fluid Experience!

    @webinterface

  • Browsersupport Flexbox?

    @webinterface

  • @webinterface

    Edge 39 44 8 30

    Browsersupport Desktop

    11 38 43 7.1 29

    Can i use, Stand: 01.08.2015

    Supported teilweise Supported nicht Supported

  • Supported teilweise Supported nicht Supported

    @webinterface

    8.4* 8 40 10 30 42 38 11

    iOS MiniOpera Mobile

    Chrome Andriod

    Firefox Andriod

    Browsersupport Mobile

    8* 4.4.4 7 12.1 10

    Can i use, Stand: 01.08.2015

  • @webinterface

    CSS Fallback

    Flexbox berschreibt Space

    Flexbox wird nicht berschrieben

    floats

    display: inline-block

    table-cell

    position: absolute;

  • Viewport Units

    @webinterface

    fr flexiblere Grenangaben in Relation zum Browserfenster.

  • @webinterface

    vw (view width)

    vh (view height)

  • div { width: 100v