Desarrolla aplicaciones web flexibles con Flexbox

Desarrolla aplicaciones web flexibles con FLEXBOX Imanol Terán Maruri -
@itermar

¿QUIÉN SOY?

¿QUIÉN SOY? ๏ Desarrollador Frontend ๏ Desarrollador iOS ๏ Formador
imanolteran.com @itermar [email protected]

widdiapps.com @widdiapps [email protected] ๏ Web ๏ iOS ๏ E-Commerce ๏
Publicaciones Digitales ๏ Formación ¿QUIÉN SOY?

PROGRAMA ๏ Introducción ๏ Tablas / Modelo de cajas /
Rejillas / Flexbox ๏ Propiedades y compatibilidad con navegadores ๏ Ejemplos y casos de uso ๏ Referencias y documentación ๏ Frameworks que utilizan Flexbox ๏ Ejercicios Prácticos

INTRODUCCIÓN ¿Cómo maquetamos nuestras web?

Evolución Table Box Model Grid Systems Flexbox

Table ๏ Surgió en 1995 con la especificación HTML 3.0
๏ Se “hizo fuerte” con la versión HTML 3.2 ๏ El “tag” <table> creado para crear layouts, además de mostrar datos en tablas

Table - Características ๏ <table border=0> ๏ <body bottomMargin=0 leftMargin=0>
๏ <td valign=top> ๏ <table cellspacing=10 cellpadding=10> ๏ <td colspan=3 rowspan=1>

Table - Problemas ๏ Estilo, contenido y marcado juntos ๏
Accesibilidad ๏ Código poco legible

BOX MODEL

Box Model ๏ Surgió en 1996 con CSS 1 y
HTML 3.2 ๏ Empezamos a hablar del concepto CSS: separar estilo y marcado ๏ Aparecen elementos de bloque: <div>, <h1>, <p>…

Box Model - Evolución I ๏ width, height ๏ display,
float ๏ margin, padding y border

Box Model - Evolución II ๏ position ๏ top, bottom,
left, right ๏ max-width, min-width, max-height, min-height

Box Model - Fin de las tablas ๏ <table> :
para mostrar datos en tablas ๏ box model : layouts con CSS

Box Model - Evolución III ๏ box-sizing

Box Model - Problemas ๏ Alinear objetos en vertical ๏
Posicionar unas cajas junto a otras (float, inline o inline-block) ๏ Clearfix, clear:both ๏ Altura automática de las cajas ๏ …y unos cuantos más

GRID SYSTEMS

Grid Systems ๏ Comienzan en 2007 con Blueprint ๏ Nacen
para solucionar problemas de layout y crear sistema de columnas estándar ๏ 12, 16 o 24 columnas ๏ Abstracción del modelo de cajas ๏ Éxito en 2009, con 960.gs

Antes de GRID 1 2 3

Después de GRID 1 2 3 <div class=“container clearfix”> <div
class=“span-8”>1</div> <div class=“span-8”>2</div> <div class=“span-8 last”>3</div> </div>

Tipos de Grid ๏ Columna ๏ Fluída / Fija ๏
Semántica / No-semántica ๏ Responsive ๏ … y más

Ejemplos ๏ Blueprint: http://www.blueprintcss.org ๏ 960.gs: http://960.gs ๏ Bootstrap: http://getbootstrap.com
๏ Foundation: http://foundation.zurb.com

FLEXBOX

Flexbox ๏ 19 años sin especificación CSS concreta para trabajar
con layout ๏ W3C empieza con ello en 2009 ๏ Ha habido varias sintaxis durante el proceso

Flexbox - Estado actual ๏ Soporte a navegadores está mejorando
๏ Muchos frameworks lo están incluyendo

Flexbox Consiste, principalmente, en proporcionar al contenedor la habilidad para
cambiar la anchura y altura de los elementos que contiene, con el fin de rellenar de la forma más eficiente posible el espacio en blanco y prevenir los desbordes

Propiedades y compatibilidad con Navegadores

¿Qué podemos controlar con Flexbox? ๏ Orientación de los elementos
๏ Espacio entre elementos ๏ Orden entre elementos

<div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div> </div> Empezando
con Flexbox

Sin Flexbox 1 2 3

.container { display: flex; } Empezando con Flexbox

Con Flexbox 1 2 3

Propiedades Flexbox ๏ display ๏ flex-direction ๏ flex-wrap ๏ flex-flow
๏ justify-content ๏ align-items ๏ align-content ๏ order ๏ flex-grow ๏ flex-shrink ๏ flex-basis ๏ align-self Contenedor Items

Available space = (container size - flex-basis siblings total) Grow
unit = (Available space / Sum Grow siblings total) Flex item size = (Flex basis + (Grow Unit * num)) Calcular espacio disponible http://chriswrightdesign.com/experiments/flexbox-adventures/

Contenedor

flex-direction

๏ row (default) / row-reverse ๏ column / column-reverse flex-direction

flex-wrap

๏ nowrap (default) ๏ wrap ๏ wrap-reverse flex-wrap

flex-flow +

๏ row nowrap (default) ๏ row wrap flex-flow

justify-content

๏ flex-start (default) ๏ flex-end ๏ center ๏ space-between ๏
space-around justify-content

align-items

๏ stretch (default) ๏ flex-start ๏ flex-end ๏ center ๏
baseline ๏ space-around align-items

align-content

๏ stretch (default) ๏ flex-start ๏ flex-end ๏ center ๏
space-between ๏ space-around align-content

order .item { order: <integer>; }

flex-grow

flex-grow .item { flex-grow: <number>; }

flex-shrink .item { flex-shrink: <number>; }

flex-basis .item { flex-basis: <length> | auto; }

flex .item { flex: 0 1 auto; /* default */
} flex-grow + flex-shrink + flex-basis

align-self

align-self ๏ auto (default) ๏ flex-start ๏ flex-end ๏ center
๏ baseline ๏ stretch

http://caniuse.com/#feat=flexbox Compatibilidad con navegadores

Internet Explorer 11

Edge 12

Firefox 41

Chrome 45

Safari 8

Opera 32

iOS Safari 9

Opera Mini 8

Android browser 44

Android Chrome 44

Ejemplos y casos de uso

Layouts de ejemplo ๏ Ejemplo 1: http://codepen.io/_Billy_Brown/full/ACamb/ ๏ Ejemplo 2:
http://codepen.io/dudleystorey/full/umrnE/ ๏ Ejemplo 3: http://codepen.io/HugoGiraudel/pen/qIAwr ๏ Ejemplo 4: http://codepen.io/HugoGiraudel/pen/pkwqH ๏ Ejemplo 5: http://callmenick.com/_development/flexbox-examples/index.html

Referencias y Documentación

๏ http://www.w3.org/TR/css3-flexbox/ ๏ https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ๏ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ๏ http://apps.workflower.fi/css-cheats/?name=flexbox ๏
http://zomigi.com/blog/flexbox-syntax-for-ie-10/ ๏ https://github.com/10up/flexibility Referencias

๏ http://philipwalton.github.io/solved-by-flexbox/ ๏ http://cssflexbox.com ๏ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex- wrap ๏ https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-
properties ๏ https://github.com/philipwalton/flexbugs ๏ http://heydesigner.com/css-flexbox/ Referencias

๏ http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ ๏ https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align- itemscenter-overflow-their-container Problemas actuales

Ejercicios prácticos a jugaaaaar

๏ http://bennettfeely.com/flexplorer/ ๏ http://the-echoplex.net/flexyboxes/ ๏ http://flexboxin5.com ๏ https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/ demos/ ๏
http://flexboxfroggy.com Ejercicios Prácticos

GRACIAS Imanol Terán Maruri @itermar [email protected]

Desarrolla aplicaciones web flexibles con Flexbox

Desarrolla aplicaciones web flexibles con Flexbox

More Decks by Imanol Terán

Other Decks in Programming

Featured

Transcript