Curso

Impartido por:

Jon Ander Hernández

email: jonan@irontec.com

twitter: @JonAnhp

Dirigido a

• Desarrolladores Web y diseñadores que desean explorar las hojas de estilo en cascada.

Objetivos

• Comprender además de los fundamentos, el diseño, las capacidades y las limitaciones de las CSS.

• Estudiar en profundidad el box model para poder comprender y predecir el comportamiento de cualquier elemento.

• Analizar las soluciones y buenas prácticas más extendidas para la maquetación de los diseños más habituales.

Introducción: historia, filosofía y estado del arte.

Selectores, pseudo-clases, pseudo-elementos y media querys.

Cascada de estilos, herencia y especifidad.

Destripando el Box Model.

Reflexión sobre las CSS.

Flexible Box Layout.

Transformaciones 2D y 3D.

Transiciones y Animaciones.

Patrones de diseño y buenas prácticas.

Recetas de layouts.

Twitter Bootstrap.

Vitaminando y mineralizando CSS hoy con SASS y LESS.

¿Qué nos depara el futuro?

Introducción

historia, filosofía y estado del arte.

Perspectiva histórica

• 1991 HTML
• 1994 HTML 2
• 1996 CSS 1 + JavaScript
• 1997 HTML 4
• 1998 CSS 2
• 2000 XHTML 1
• 2002 Tableless Web Design
• 2005 AJAX
• 2009 HTML 5

A long time ago

http://web.archive.org

CSS zen garden

http://www.csszengarden.com

http://www.csszengarden.com

HTML5

HTML5 ~= HTML + CSS + JS

http://caniuse.com/

HTML5 rocks!

http://slides.html5rocks.com/

http://caniuse.com/

Hyper Text Markup Languaje

• Un lenguaje de marcado para definir páginas

• Un lenguaje SGML (Markup Languaje)

HTML tree

Cascading Style Sheets

• Separar el diseño de la presentación

• Reglas que aplican propiedades a los elementos que seleccionan.

• El standard define:

  • Un modo de direccionamiento, los selectores

  • Un modo de disposición (layout) y unas propiedades.

• El mecanismo no sólo es aplicable a HTML, también a SVG

Esquema de una regla CSS

Origen de las hojas de estilo

• Autor

  Cada página web podrá incluir una serie de documentos, incluidos en el propio HTML o enlazamos externamente.

• Usuario

  Un usuario puede configurar una hoja de estilos personal. Podemos personalizar el comportamiento standard (fuentes, tamaños, colores) Reglas específicas para mejorar la accesibilidad.

• User agent

  Los navegadores modernos implementan el estilo de los elementos standard mediante una hoja de estilo.

http://mxr.mozilla.org/mozilla/source/layout/style/html.css

Shorthands properties

Propiedades que establecer un conjunto de propiedades simultaneamente.

Convenciones

Orden de las agujas del reloj

• bordes

• esquinas

CSS modules

State of art

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3

CSS future

Veamos que está contribuyendo Adobe a Chrome :-)

http://html.adobe.com/webplatform/

Selectores

CSS1

Selectors Level 4

http://dev.w3.org/csswg/selectors4

Selectores elementales

• selector

  Selecciona elementos cuya etiqueta sea "selector"

• *

  Selector universal, selecciona cualquier elemento

Ejemplos

@namespace foo url(http://www.example.com);

foo|h1 { color: blue }  /* first rule */

foo|* { color: yellow } /* second rule */

Logical Combinations

• s, s Listas de selectores

  • Disyunción lógica de selectores.

• :matches()

  • Pseudo clase funcional que selecciona un elementos que son selecionados por su argumento.

• :not()

  • Pseudo clase funcional que selecciona un elementos que no sean selecionados por su argumento.

• :has()

  • Pseudo clase funcional que selecciona un elemento, si el argumento

Ejemplos

html|*:not(:link):not(:visited)

*|*:matches(*:hover, *:focus) 

a:has(> img)

section:not(:has(h1, h2, h3, h4, h5, h6))
/* the order matters */
section:has(:not(h1, h2, h3, h4, h5, h6))

Pseudo selectores linguisticos

• :dir()

  Selecciona elementos según la direccionalidad del texto.

• :lang()

  Selecciona elementos según el idioma.

Ejemplos

<div lang=fr>
  <p>Je suis français.</p>
</div>

:dir(ltr)

html:lang(fr-be)

:lang(fr-be) > q

Selectores de atributos

• [att]

  Selecciona elementos con un attributo att definido.

• [att=val]

  Selecciona elementos con un attributo att cuyo valor sea exactamente "val"

• [att~=val]

  Selecciona elementos con un attributo att cuyo valor es una lista separada por espacios Uno de dichos elementos es exactamente "val"

• [att|=val]

  Selecciona elementos con un attributo att cuyo valor es exactamente "val" o "val" seguido de un "-"

Ejemplos

h1[title]

a[rel~="copyright"]

a[href="http://www.w3.org/"]

a[hreflang|="en"] /* <a hreflang="en-US"></a> */

Selectores de atributos

Substring matching attribute selectors

• [att^=val]

  Selecciona elementos cuyos atributos compiezan con el prefijo "val"

• [att$=val]

  Selecciona elementos cuyos atributos terminan con el sufijo "val"

• [att*=val]

  Selecciona elementos cuyos atributos contienen el texto "val"

Ejemplos

object[type^="image/"]

a[href$=".html"]

p[title*="hello"]

Pseudo clases

• El concepto de pseudo clase se introduce para permitir seleccionar elementos en base a información no presente en el arbol DOM o imposible de expresar usando simples selectores.

Pseudo elementos

• Representan un elemento no directamente presente en el arbol DOM, usado para crear abstracciones más allá de las definidas en el lenguaje del documento.

• ::before, ::after

  • Permite crear un elemento e insertarlo antes o después del contenido apuntado.

  • Sin la propiedad content no tienen sentido

• ::first-line, ::first-letter

  Permite seleccionar la primera linea o la primera letra como si fuera un objeto.

• ::selection

  Permite seleccionar la selección.

• content

  • content: 'texto'.

  • content: url(image.jpg);.

  • content: attr(href); Inserta como contenido el valor especificado por un atributo

Pseudo clases de acciones de usuario

• :hover Selecciona un elemento cuando el ratón

• :active Selecciona un elemento cuanddo este es activado por el usuario.

• :focus Selecciona un elemento cuando este obtiene por el foco.

• :drop o :drop(active|valid|invalid) Selecciona elementos que son el objetivo de una acción de arrastrar y soltar

Input Pseudo-classes

Input Control States

• :enabled, :disabled.
• :read-only, :read-write.
• :placeholder-shown.
• :default.

Input Value States

• :checked.
• :indeterminate.

Input Value-checking

• :valid, :invalid.
• :in-range, :out-of-range
• :required, :optional
• :user-error

Pseudo clases estructurales

• :root

  Selecciona elemento raiz del documento.

• :empty

  Selecciona elementos que no posean hijos.

• :blank

  Selecciona elementos que no posea hijos, solo espacios en blanco.

Pseudo clases estructurales

Child-indexed Pseudo-classes

• :nth-child(An+B | even | odd [of sel]?)

  Selecciona los hijos que cumplan el selector

• :nth-last-child()

• :first-child

  Selecciona el primer hijo.

• :last-child

  Selecciona el último hijo.

• :only-child

  Selecciona si único hijo.

Pseudo clases estructurales

Type child-indexed Pseudo-classes

Igual que los anteriores, pero sólo considerando los nodos con el mismo tipo.

• :nth-of-type()

• nth-last-of-type()

• :first-of-type

• :last-of-type

• :only-of-type

:nth-child(even)   /* represents the 2nd, 4th, 6th, etc elements
:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc elements */

tr:nth-child(even of :not([hidden])) {
  background: silver;
}

div > p:first-child

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

/*
Example: To represent all h2 children of an XHTML 
body except the first and last, one could use the 
following selector:
*/

body > h2:nth-of-type(n+2):nth-last-of-type(n+2) 

/*
In this case, one could also use :not(), although
the selector ends up being just as long:
*/

body > h2:not(:first-of-type):not(:last-of-type)

Combinadores

• a b Combinador de descendencia

  Selecciona elementos seleccionados por b cuyo ancestro haya sido seleccionado por a.

• a > b Combinador hijo

  Selecciona elementos seleccionados por b cuyo padre haya sido seleccionado por a.

• a + b Combinador próximo hermano

  Selecciona elementos seleccionados por b cuyo hermano anterior haya sido seleccionado por a.

• a ~ b Combinador siguiente hermano

  Selecciona elementos seleccionados por b cuyo hermano anterior (y lejano) haya sido seleccionado por a.

• a || b Combinador columna

  Selecciona elementos seleccionados por b pertenecientes a las columnas seleccionadas por a

div p *[href]

div ol>li p

h1.opener + h2

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

CSS media queries

Consiste un de un tipo de medio y al menos una expresión que limita el ámbito de los estilos definidos con expresiones como la anchura, altura o color.

• aspect-ratio

  @media screen and (min-aspect-ratio: 1/1) { ... }

• height

  @media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

• orientation.

  @media all and (orientation: portrait) { ... }

• resolution.

  @media print and (min-resolution: 300dpi) { ... }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Ejemplos

@media screen and (max-width: 900px), (max-height: 600px) {
    .reveal .slides {
        font-size: 0.82em;
    }
}

@media screen and (max-width: 700px), (max-height: 400px) {
    .reveal .slides {
        font-size: 0.66em;
    }
}

Cascada de estilos, herencia y especifidad.

¿De donde viene la palabra cascada?

• La cascada es el corazón de las CSS.

• Las propiedades se obtienen mediante la aplicación de decenas de reglas.

• La cascada asigna un peso a cada regla, este peso determinará que regla determinará el orden de aplicación.

• El valor de una propiedad puede ser definirse explicitarmente, heredarse, computarse a partir del valor heredado.

Ordenación de reglas

Buscar todas las declaraciones que se aplican a un elemento.

Ordenar según la importancia y origen (autor, usuario, o user agent)

Ordenar las reglas con la misma importancia y origen según la especifidad del selector.

Ordenar por el orden de definición. Si 2 reglas tienen el mismo peso, origen y especificidad, la última que haya sido definida en el código gana.

Calculando la especifidad

a + b + c + d

a = 1 si es inline,
b = númbero de IDs,
c = número de atributos, clases y pseudo-clases.
d = número de nombre de elementos y pseudo-elementos.

/* a=1, b=0, c=0, d=0 → 1000 */

<p style="color:#000000;">

/* a=0, b=0, c=1, d=3 → 0013 */

footer nav li:last-child

/* a=0, b=1, c=1, d=1 → 0111 */

#sidebar input:not([type="submit"])

Ejercicio

*             {}
li            {}
li:first-line {}
ul li         {}
ul ol+li      {}
h1 + *[rel=up]{}
ul ol li.red  {}
li.red.level  {}
#x34y         {}
style=""

Resultado

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

Problemas de especificidad

• Si no se considera adecuadamente, la specificidad puede convertir las hojas de estilo en una jerarquía compleja de reglas inecesariamente complejas.

• Guía para evitar la mayoría de los problemas:

  • Usar selectores genéricos.

  • Usar especificidad según se vaya requiriendo.

  • Usar selectores avanzados no implica necesariamente complejidad.

Herencia

Mecanismo que propaga el valor de un padre a un elemento hijo.

ejemplos:

• El color.

  body { color: red; }

• La fuente.

  body { font-size: 12px; }

Ignorar la herencia puede ser contraproducente

<div id="test2">
    <p>A sample paragraph with some
    <em>emphasised</em> text.</p>
</div>

La regla

#test2 * { font-size: 12px; }
#test2 p { font-size: 18px; }

Equivale a:

#test2 p    { font-size: 18px; }
#test2 p em { font-size: 12px; }

¿Lo arreglamos con...?

#test2 *    { font-size: 12px; }
#test2 p    { font-size: 18px; }
#test2 p *  { font-size: 18px; }

Computo del valor de una propiedad

Specified value

Se determina si el valor proviene de una hoja de estilo, heredado o se emplea su valor inicial.

Computed value

Resolución a un valor heredable. La disposición de elementos no es necesaria para calcular este valor.

Used value

El valor es convertido a un valor absoluto si es necesario, una vez que han dispuesto todos los elementos.

Los portenges por ejemplo requieren la disposición de los elementos.

Actual value

Valor final usado en el renderizado, tras la aplicación por ejemplo de aproximaciones.

Analicemos la definición de background-color

Name: background-color
Value: <color>
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: the computed color(s)

Destripando el box model

Display

Establece el tipo y el comportamiento del elemento.

Display

Establece el tipo y el comportamiento del elemento.

Valores

• none
• inline
• block
• list-item
• inline-block
• inline-table
• table
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group
• flex
• inline-flex
• grid
• inline-grid
• run-in

• inline

  • Genera una o más cajas inline.

  • Dichas cajas fluirán horizontalmente mientras haya espacio, cuando no lo haya saltarán a la siguiente linea.

  • Cada elemento se colocará sobre la baseline.

Cajas anónimas

• block

  • Genera un elemento de bloque.

  • La caja ocupará todo el espacio horizontal disponible, saltando a una nueva linea y empujando el siguiente elemento garantizando que es el único elemento no reemplazado en dicha linea.

• inline-block

  • Genera un elemento de bloque que fluirá en el contenido como si fuera una única caja inline, comportandose de manera similar a como lo haría a un elemento reemplazado).

Box model

total width = width + left padding + right padding

Margin y Padding

• Ambos sirven para añadir espacio alrededor de un contenido.

• Padding

  • Espacio interior, espacio hasta el borde.
  • Espacio dibujado con el fondo.
  • Sólo acepta valores positivos.

• • Margin
  • Espacio exterior
  • Espacio hasta el objeto anterior o posterior.
  • El valor auto para el margen derecho e izquierdo repartirá el espacio disponible entre ambos centrando el objeto

• El espacio se colapsa asegurando el mayor de los espacios.

• El espacio puede ser negativo arrastrando el objeto

  • actual:

    padding-left padding-top

  • posterior:

    padding-right padding-bottom

Margin collapse

Fusión de márgenes entre elementos contiguos

Margen de un objeto traspasando el padre.

Fórmulas para evitarlo

• Con un borde transparente

    border:1px solid transparent;

• Con padding

    padding:1px;

• Con un clearfix

    objeto::before, objeto::after {
        content:'';
        display: block;
        clear:both;
    }

Posicionamiento

• static

  • Establece el comportamiento normal

  • Se ignoran las propiedades: top, left, right, bottom.

• relative

  • Posición relativa a la actual.

  • El objeto simplemente se desplazará sin alterar la posición de ningún otro elemento.

• absolute

  • Posición relativa al elemento posicionado más cercano.

    • Habitualmente definiremos a un ancestro como relative para posicionarnos respecto a él.

• fixed

  • Posición relativa al viewport.

  • El elemento no se moverá con el scroll.

• sticky

  • Es un posicionamiento híbrido entre relativo y fijo.

Float

El término flotar se refiere a la forma en un objeto puede flotar sobre un texto.

La práctica de flotar textos se remonta a la antiguedad.

Este imagen nos ayudará a comprender su funcionamiento.

http://en.wikipedia.org/wiki/Gutenberg_Bible

Comportamiento

• Un objeto float se coloca inicialmente como un elemento más.

  Si está en medio de un texto, las lineas de texto previas quedarán por encima de este.

• El objeto será movido al extremo (izquierdo o la derecho) hasta:
  • alcanzar el borde del objeto que lo contiene.
  • alcanzar otro float.

• El objeto es extraido del "normal flow"

  • Los elementos de bloque se colocarán ignorando el float.

  • Serán los elementos inline los que eviten el float.

• Se transforman en elementos de bloque.

  Aunque permitirá elementos a su lado, a diferencia que un bloque normal.

Clear

• Determina si un elemento puede estar a continuación de un objeto float que lo precede, o si debe moverse hacía abajo después de él.

Float y Overflow

• Podemos usar la propiedad overflow:hidden para evitar que un float escape de su interior.

Tamaño

• <cantidad>

• <percentage>

  • Porcentaje del tamaño del bloque contendor.

• available

  • Tamaño disponible sin tener en cuenta ni el margen, ni el borde, ni el contenido.

• max-content
  • El tamaño intrinseco preferido.

• min-content
  • El tamaño intrinseco mínimo.
  • Ejemplo: Si disponemos de una imagen y un texto, el tamaño intrínseco mínimo será la anchura de la imagen.

• fit-content
  • El máximo entre:
    • El tamaño intrinsico mínimo
    • El mínimo entre el tamaño intrínseco preferido y el tamaño disponible.

box-sizing

• Cambia el comportamiento que calcula la altura y anchura del box model.

• El modo standard de la W3C no tiene en cuenta el borde y el padding

• Internet explorer implementó originalmente el calculo contando con esos espacios.

  • La diferencia de comportamiento causaba muchos problemas.

• Impide heredar el 100% del tamaño y disponer de un borde y un padding, obligando a hacer trucos.

• content-box

  Modo standard. La altura y anchura se calculan incluyendo sólo el contenido, sin el borde, el margen, ni el padding.

• padding-box

  El tamaño incluye el padding pero no el borde.

• border-box

  El tamaño incluye tanto el padding como el borde.

overflow

• Establece si el contenido debe recortarse, mostrarse con barras de scroll o desbordarse.

• visible

  • El contenido desbordará.

• auto

  • Se mostrarán barra si el contenido no entra.

• hidden
  • El contenido se recortará

• scroll
  • Se mostrarán siempre las barras de scrll.

Baseline

http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

• font-size

  • Altura de la fuente.

  • Porcentaje se aplica al tamaño de la fuente heredada.

• line-height

  • Establece el tamaño de las lineas.

  • El porcentaje se aplica respecto al tamaño de la fuente.

  • No se aplica a replaced inline elements como botones o campos de entrada.

CSS3

Veamos rapidamente algunas de las nuevas propiedades

http://slides.html5rocks.com/#css3-title

Máscaras

http://www.html5rocks.com/en/tutorials/masking/adobe/

Clip

img {
  position: absolute;
  clip: rect(10px, 290px, 190px, 10px);
}

Clip-path

img:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}

mask-box-image

img {
  mask-box-image: url("stamp.svg") 35 repeat;
}

Reflexión sobre las CSS

Analicemos su diseño, sus capacidades y sus limitaciones.

Horizontalidad

• El algoritmo está diseñado para diponer los elementos de manera horizontal.

  • La anchura es un valor de entrada y la altura es un valor de salida.

• La gestión del espacio.

  • Los elementos no pueden extenderse para ocupar el espacio libre disponible.

  • Las tablas tampoco no suplen esta carencia.

  • El centrado horizontal con márgenes es un síntoma de los problemas de diseño.

height, min-height y max-height

• Como ya hemos visto existe diferencia entre valores iniciales, computados, usados y actuales.

• El valor min-height no se hereda, dando que se aplica sobre el height, y este require la distribución final de los elementos.

• Esto significa que no podremos hacer que un elemento crezca como mínimo hasta ocupar la pantalla y que este valor se herede.

• Esto convertiría el algoritmo en cuadrático, redefiniendo cada elemento con backtracking. Actualmente el comportamiento es lineal.

Tamaños intrínsecos.

• Sin los parámetros intrínsecos no podriamos hacer que una imagen se estire hasta ocupar un tamaño sin romper las proporciones.

• Tampoco podríamos definir un tamaño preferido.

• Minimizar el tamaño posible.

• Máximizar el espacio disponible.

https://developer.mozilla.org/en-US/docs/Web/CSS/width

Componentes

• HTML está diseñado para ser semántico.

• No podremos realizar cualquier diseñado con un HTML concreto.

  • Los objetos visualizados y los objetos HTML tienen una correspondencia 1 a 1.

  • El orden del HTML también limitará el diseño.

  • A diferencia de la web planteada hace años con XML + XSLT.

Selectores

• Los selectores son autómatas evaluados de derecha a izquierda.

• Los operadores de ascendencia obligan a evaluar con backtracking.

• La semántica actual no permite seleccionar un nodo en función de sus hijos.

  • El elemento más a la derecha será el seleccionado.

Flexible Box Layout

¿Por qué necesitamos un nuevo sistema de layout?

• Más intuitivo que el box model
• Cubrir las limitaciones del box model
• Adaptación al espacio disponible
• Disposición tanto eje horizontal como en el vertical
• Orden independiente del orden en el HTML

display

Define un objeto como contendor flex.

• display: flex

  • El objeto se comportará como un bloque.

• inline-flex.

  • El objeto se comportará como un bloque inline.

flex-direction

Cambiará el eje principal

• row, row-reverse, column, column-reverse.

flex-wrap

Definirá si permite que los elementos fluyan en más de una linea.

flex-flow

Permite definir simutaneamente flex-direction y flex-wrap.

justify-content

Define como los elementos flex se colocarán respecto al eje principal.

• flex-start
• flex-end
• center
• space-between
• space-around

align items

Define como se alinean los elementos respecto a el eje cross.

• flex-start

  El objeto será pegado al cross-start de la linea.

• flex-end

  El elemento será pegado al cross-end de la linea.

• center

  Los elementos serán centrados respecto al cross-axis. Si el tamaño es mayor que el contenedor, el objeto sobresaldrá en ambas direcciones.

• baseline

  Los elementos son alineados según la linea base. El elemento con la mayor distancia entre su cross-start y la baseline será quien esté pegado al cross-start.

• stretch

  Los elementos son estirados de modo que el cross-size del elemento es igual que la linea respetando los límites de anchura y altura.

align-self

Define como se situa un único elemento flex según el eje cross y sobrecarga el valor por defecto definido por align-items.

flex

Define las propiedades flex-grow, flex-size, flex-basis.

• none -> 0 0 auto.

• auto -> 1 1 auto.

• initial -> 0 1 auto.

flex-grow

Define el factor de crecimeinto de un flex item.

flex-shrink

Define el factor de encogimiento

div:nth-child(2) {
    flex: 1;
}

div:nth-child(2) {
    flex: 20;
}

flex-basis

Define el tamaño principal de un elemento flex.

• <percentage>

  Se computa respecto al tamaño principal del contendor flex.

• auto

  Equivale al tamaño principal del contendor flex.

Flex Order

Permite cambiar el orden de un elemento

• flex-order: <número>

Propietades ignoradas

• column-*

  La propiedades de columna no tendrán efecto sobre los elementos.

• float y clear

  No tienen efectos sobre los elementos. Usar float sobre el elemento hará que se comporte como un bloque.

• vertical-align No tendrá efecto en el alineado, para el cual ya disponemos el propio align-items y align-self.

Problemos el modelo con una demo

http://the-echoplex.net/flexyboxes/

Ejemplo animación flex

http://dev.opera.com/articles/animating-flexboxes-the-lowdown/transition.html

Transformaciones 2D y 3D

Transformaciones

• Permite modificar el espacio de coordenadas sobre el que dibujará el elemento.

• Las operaciones permitirán transladar, rotar, escalar o torcer dicho espacio.

• Al igual que ocurre con cualquier API 3D, las operaciones de transformación generarán una matrix de conversión que también se puede definir explicitamente.

• Cualquier transformación 3D generará composición por hardware, incluso para una transformación 2D.

• transform-origin

  • Define la posición de origen. Por defecto será el centro del elemento.

  • Usado para operaciones como la rotación, escalado y torsión.

• transform

  • Especifica la transformación a aplicar al elemento.

  • Consiste en una lista de transformaciones.

  • Las transformaciones se aplicarán una detrás de la otra.

Transformaciones 2D

• rotate(angle);
• scale(sx[, sy]);

• translate(tx[, ty]);

• scaleX(sx);

• scaleY(sy);
• skewX(angle);
• skewY(angle);
• translateX(tx);
• translateY(ty);

Transformaciones 3D

• Para activar el espacio 3D necesitaremos definir la perspectiva.

Operaciones 3D

• translate3d( tx, ty, tz )
• scale3d( sx, sy, sz )

• rotate3d( rx, ry, rz, angle )

• rotateX( angle )

• rotateY( angle )
• rotateZ( angle )
• translateZ( tz )
• scaleZ( sz )

• -transform-style

  • preserve-3d

    Indica que los hijos deben ser posicionados en el espacio 3D.

  • flat

    Indica que los hijos deben colocarse en el plano del elemento.

Ejemplos

• Tutorial

  http://desandro.github.io/3dtransforms/

• Cubo con rotaciones animadas

  http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html

• Prisma con rotaciones animadas

  http://desandro.github.io/3dtransforms/examples/box-02-show-sides.html

Transiciones y Animaciones

Es superar o igualar estas transparencias :-)

http://animateyourhtml5.appspot.com

Frameworks de animaciones

• animate.css

  • http://daneden.github.io/animate.css/

• Effeckt.css

  • http://h5bp.github.io/Effeckt.css/dist/

AngularJS

• Framework javascript para desarrollar páginas web dinámicas.

• HTML como lenguaje de templating.

• Sistema de componentes extendiendo la sintaxis HTML.

• El data binding y la inyección de dependencias simplifica la programación.

• Versión minificada y gzipeada ocupa 104Bs.

• A pesar de estar diseñado para aplicaciones complejas, su sintaxis declarativa lo hace ideal para diseñadores.

• Sistema de animaciones versatil y simple

  • Tanto mediante transiciones como animaciones.

http://dfsq.github.io/ngView-animation-effects/app/

Patrones de diseño y buenas prácticas

Reemplazo de imágenes

<h1 class="technique-three">
  CSS-Tricks
</h1>

h1.technique-three {
  width: 350px; 
  height: 75px;
  background: url("images/header-image.jpg");
  text-indent: -9999px;
}

http://css-tricks.com/css-image-replacement/

Clear fix

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

https://github.com/twbs/bootstrap/blob/v2.3.0/less/mixins.less

CSS sprites

• Combinar múltiples imagen en una sola

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

http://css-tricks.com/css-sprites/

SVG stacks

• Similar al anterior, pero usando SVGs

  • http://simurai.com/blog/2012/04/02/svg-stacks/

  • http://hofmannsven.com/demo/svg-stacking/

Centrado vertical fijo

objeto {
    position: absolute;
    top: 50%;
    margin: 50;
    /* pseudo código */
    margin-top: - (height / 2);
    margin-left: - (width / 2);
}

http://css-tricks.com/centering-in-the-unknown/

Centrado vertical general

.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.block > * {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

http://css-tricks.com/centering-in-the-unknown/

Simulación exclusiones

• Particiones de imágenes con floats para simular exclusiones

http://meyerweb.com/eric/css/edge/raggedfloat/demo.html

Fondos fijos

• Actualmente usados frecuentemente junto con efectos parallax.

• Múltiples diseños aplicados sobre elementos diferentes permiten efectos sorprendentes, y con muy poco impácto de rendimiento comparado con un filtro.

http://meyerweb.com/eric/css/edge/complexspiral/glassy.html

CSS Arrow

Flechas CSS

.arrow_box {
    position: relative;
    border: 1px solid black;
}

.arrow_box:before {
    top: 50%; right: 100%;
    border: solid transparent;
    content: " ";
    height: 0; width: 0;
    border-color: transparent;
    border-right-color: black;
    border-width: 36px;
    margin-top: -36px;
    position: absolute;
}

http://cssarrowplease.com/

BEM

Bloque, elemento modificador

¿Qué es?

• Es una metodología de nombrado

• Similar a la programación orientada a objetos

Identificamos componentes

.block {}
.block__element {}
.block--modifier {}

• .block

  Representa abstractamente un componente.

• .block__element

  Representa un descendiente del componente block.

• .block--modifier

  Representa un estado diferente o una versión del bloque.

Ejemplo

<form class="site-search  full">
    <input type="text" class="field">
    <input type="Submit" value ="Search" class="button">
</form>

Convertido a BEM

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

CSS independiente

• El bloque debe tener un nombre único

• No deben usarse elementos html en los selectores.

• Selectores para varios bloques deben ser evitados

http://bem.info/

Object Oriented CSS

Objetivos

• Crear hojas de estilo rápidas, mantenibles y concisas.

• Maximizar la reutilizacion de css.

• En vez de mantener una guerra de especificidades, mantener modulos donde la cascada cumpla un rol importante.

• Fundamento en 2 principios

  • Separar el contenedor del contenido.
  • Separar la estructura de la apariencia.

Guidelines

• Evitar selecetores descendentes

  .sidebar h3

• Evitar añadir vincular elementos a las clases

  div.header h1.title

• Evitar identificadores para asignar estilos

• Evitar salvo casos de necesidad el !important

• Usar CSS Lint para verificar las CSS

  http://csslint.net/

• Usar CSS Grids

  http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/

Contenedor vs Contenido

• El contenido puede colocarse de manera diferente cambiando la clase contenedora.

• El contenedor y el contenido no tienen porque ir siempre separados, pero podrían.

Estructura vs apariencia

<aside class="structure skin">...</aside>

.structure {
    float: left;
    width: 8em;
    max-height: 20em;
}

.skin {
    color: #2faced;
    border: 1px;
}

CSS reutilizable

Ejemplo de código reutilizable

.button { 
    width: 200px; height: 50px;
} 
.box { 
    width: 400px; overflow: hidden;
}
.widget { 
    width: 500px; min-height: 200px; 
    overflow: auto;
} 
.skin { 
    border: solid 1px #ccc; 
    background: linear-gradient(#ccc, #222); 
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

Hojas de estilo mantenibles

• En vez de mantener una guerra de especificidades, podremos mantener un conjunto de modulos donde la cascada natural cumple un rol importante.

• Añadir nuevas reglas, no será añadir nuevas reglas al final de la hoja de estilo sin tener en cuenta que había previamente.

Ventajas

• Las mejoras de rendimiento son claros.

  • Menos estilos repetidos
    • Hojas de estilo más pequeñas (tiempo de descarga).
    • Menor calculo de reglas.

• Cada vez que se reutiliza una CSS, estas aplicando un estilo a una hoja con cero lineas de código.

• Es posible crear nuevas páginas con muy poco CSS.

• Un modulo existente puede servir como base para futuras páginas.

• El carácter modular dificulta romper el comportamiento al ser extendidas o modificadas por un nuevo desarrollador.

Contras

• Incrementaremos la cantidad de markup en el HTML, pero será menos significativo.

Transparencias interesantes

http://www.slideshare.net/unscriptable/oocss-for-javascript-pirates-jqcon-boston

Recetas de layouts

Layout

http://foundation.zurb.com/templates.html

Grids

Bootstrap

Bootstrap posee

• Una base de estilos CSS para los elementos HTML

  • Estilo básico para elementos básicos HTML consistente entre navegadores y extensible mediante clases, y un sistema de grid avanzado.

• Componentes CSS

  • Componentes reutilizables: listas desplegables, barra de navegación responsive, alertas, grupos de cuadros de texto, icónos.

• Componentes JavaScript

  • Componentes dinámicos: ventanas modales, pestañas, tooltips, espia de scroll, fijador (affix), un carousel de imágenes.

normalize.css

• Biblioteca CSS que mejora la consistencia entre navegadores de los elementos HTML.
• Preserva los valores por defecto para la mayoría de los elementos en vez de resetarlos (normalización vs reset).
• Corrige bugs e inconsistencias entre navegadores comunes.
• Normaliza los estilos para un amplio rango de elementos HTML.
• Mejora la usabilidad.

Viewport

<meta name="viewport" content="
    width=device-width, initial-scale=1">

Desactivar el modo responsive

<meta name="viewport" content="
    width=device-width, initial-scale=1, 
    maximum-scale=1, user-scalable=no">

Media queries

• Tendremos reglas diferentes en función de la anchura de la ventana.

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { ... }

Ejemplo de componentes

HTML de un progress bar

<div class="progress">
  <div 
    class="progress-bar progress-bar-success" style="width: 40%"
    role="progressbar" 
    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">

    <span class="sr-only">40% Complete (success)</span>

  </div>
</div>

Ejemplo formulario horizontal

HTML formulario horizontal

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Ejemplo validación formulario

HTML de un formulario

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Colores

• Podemos obtener diferentes versiones (y colores) de algunos componentes añadiendo los sufijos

• default
• primary (azul)
• success (verde)
• warning (amarillo)
• danger (rojo)

Ejemplo colores botones

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
...
<button type="button" class="btn btn-danger">Danger</button>

• Paneles

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>

• Alertas

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
  <a href="#" class="alert-link">...</a>
</div>

Variables colores bootstrap

$brand-primary:         #428bca !default;
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;

vendor/assets/stylesheets/bootstrap/_variables.scss

Bootstrap Grid

Grid system

• Grid responsive

  • Escala hasta 12 columnas según crece el tamaño del viewport.

• Media queries

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { ... }

Configuración grid

$grid-columns:              12 !default;

//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default;

//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;

//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;

Configuración contenedor

$container-tablet:             ((720px + $grid-gutter-width)) !default;

$container-sm:                 $container-tablet !default;

Personalización

• Realmente no será tan fácil, tendremos que tener cuidado con la especificidad

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

Desactivación responsive

• Desactiva directiva meta viewport

• Sobreescribir la anchura de la clase .container con una anchura fija.

  • for example width: 970px !important;

• Eliminar los elementos de colapsado de las barras de navegación.

• Usar las clases .col-xs-*, funcionan a cualquier resolución.

Problemas con IE

• IE 8 no soporta box-sizing, tendremos que cambiar a content-box.

    * { box-sizing: border-box; }

• Activar el motor de IE en modo html5

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

Media Queries polyfill

• A fast & lightweight polyfill for min/max-width CSS3 Media Queries

• https://github.com/scottjehl/Respond

Vitaminando y mineralizando CSS hoy con SASS y LESS

SASS

Syntactically Awesome StyleSheets

Características

• 100% compatible con CSS3.
• variables, anidamiento de estilos y mixins.
• Funciones para manipular colores y otros valores.
• Elementos de programación como directivas y librerías.

Sintaxis

• SASS

  • Sintaxis original
  • Permite escribir de manera más concisa
  • Indentación para separar bloques
  • Saltos de linea para separar reglas

• SCSS (Sassy CSS)

  • Usa el formato de bloques de CSS
  • Cualquier hoja de estilos CSS3 válida también es un archivo SCSS válido.

sass

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

scss

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 20%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Comentarios

• Además de los comentarios multilinea de CSS permite comentarios unilinea.
• Lo comentarios unilinea serán eliminados de la versión final.

Reglas anidadas

• Evitan repetir los selectores
• Facilita la lectura y comprensión de la estructura

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

• El código anterior produce

#main p {
  color: #00ff00;
  width: 97%;
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000;
}

Referencia al selector padre

• El simbolo & será reemplazado por el sector padre

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}

Propiedades anidadas

• Algunas propiedades CSS están agrupadas para un mismo espacio de nombres.
• Acorta la escritura de estas propiedades.

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

• Producirá

.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

Variables

$width: 5em;

#main {
  width: $width;
}

Tipos

• Números

  1.2, 13, 10px

• texto:

  "foo", 'bar', baz

• Colores:

  blue, #04a3f9, rgba(255, 0, 0, 0.5)

• booleanos:

  true, false

• nulos

• Listas de valores

  • separados por espacios en blanco o comas
  • 1.5em 1em 0 2em
  • Helvetica, Arial, sans-serif

• array asociativos:

  • key1: value1, key2: value2

Operaciones

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

Interpolación

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

Directiva @extend

• Simula herencia

.error {}
.error.intrusion {}

a.error:hover {}

.seriousError {
  @extend .error;
  @extend .error:hover;
}

.error, .seriousError {}

.error.intrusion, .seriousError.intrusion {}

a.error:hover, a.serious {}

.seriousError {
  border-width: 3px;
}

.error:hover, .seriousError

Placeholder parameter

• No se compilarán, sólo existen para ser usados por directivas @extend

#context a%extreme { }

.notice {
  @extend %extreme;
}

Genera:

#context a.notice { }

Directiva @media

@media screen {
  .sidebar {
    @media ($orientation: $value) {
      width: 500px;
    }
  }
}

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

.container {
  @include container-fixed();

  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  @media (min-width: $screen-md-min) {
    width: $container-md;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}

Directiva import

• Sass mejora la regla @import de CSS para poder importar también archivos SCSS y Sass.

• Un import se incluye sin procesar si:

  • Si la extensión del archivo importado es .css
  • Si el nombre del archivo empieza por http://
  • Si el nombre del archivo se indica mediante url()
  • Si la regla @import tiene alguna media query

• También se puede usar interpolación en el nomb