Exportar assets de Sketch a Invision

Lo primero que tienes que hacer es instalar el plugin Craft en Sketch, para poder sincronizar tus diseños con Invision.

Cuando estos diseños ya están sincronizados y los tenemos dentro de un proyecto de Invision, se habilitará una función llamada Inspect Mode.

Con esta herramienta, la persona que maquetará el diseño, podrá ver tamaños de elementos, espacios, colores, tipografía, etc. e implementar los diseños de manera más rápida y eficaz. ¡Y no solo eso! También podrá descargar todos los assets que hayamos exportado en Sketch previamente.

¿Cómo exportar los assets correctamente?

Para que la iconografía esté bien exportada y no de problemas a la hora de maquetar, debemos seguir estos pasos:

  • Selecciona todas las capas del icono que quieres exportar y pulsa “Layer” > “Convert to outlines”. Esta función hará que tu icono este compuesto por formas rellenas y no por trazos.

  • Une todos los elementos con el buscatrazos (“Union”)

  • ¿Se te ha roto el icono? No te preocupes! Es normal. Abre el icono y cambia todas aquellas capas que tengan el símbolo de “Union” a “None”.

Cuando veas correctamente el icono, debemos exportarlo al formato necesario. Para eso, selecciona el icono y dale a “Make Exportable” (esquina inferior derecha). Establece el formato (lo normal es SVG).

Acto seguido, en tu carpeta aparecerá un icono de una cuchilla, que indica que ya está exportado, y cuando sincronices con Craft, ya se habrá añadido como asset al proyecto de Invision.

Acuérdate de nombrar el icono con su nombre correspondiente para no crear varios con el mismo nombre, si no Invision no los reconocerá.

 

¿Y si el icono lo tengo como símbolo?

No pasa nada, puedes exportarlo igualmente siempre y cuando el símbolo esté bien ejecutado tal y como hemos explicado anteriormente.

 

Te recomendamos que sigas estos pasos desde que creas el primer icono del documento, así no se hará tan pesado después.

 

 

Micro-interacciones multimedia. La diferencia está en los detalles

Podríamos definir a las micro-interacciones como acciones simples y pequeños momentos de intercambio entre el usuario y la interfaz. Provocan en el usuario una respuesta inesperada, poco intrusiva, le sorprenden, facilitan la comprensión y, en conjunto, mejoran su experiencia.

Beneficios:

  • Son útiles, funcionales. Es su objetivo principal, de no ser así, es mejor prescindir de ellas.
  • Sorprenden al usuario. Le tiene que producir una sensación agradable, nada molesto.
  • Mejoran el uso de la interfaz.
  • Animan al usuario a seguir navegando.
  • Deben de ser intuitivas y de fácil comprensión.

Su uso debe ser elegante, moderado y armonioso. No consiste en subir al usuario en una montaña rusa. Hay que concebirlas en conjunto, es decir, como pequeños elementos que funcionan en grupo y que buscan una experiencia de navegación optimizada y “diferente”.

Gracias a ellas podemos aportar el elemento diferenciador a nuestras aplicaciones y crear un vínculo con el usuario más allá de la utilidad.

“La diferencia entre un buen producto y un gran producto, son sus detalles”

Existe diferentes tipos de micro-interacciones: Gestuales, de navegación, de lectura, de conexión con el usuario, sociales, para formularios, persuasivos, hover, multimedia….

A continuación, podemos ver unos ejemplos de micro-interacciones multimedia, en los que el usuario descubrirá más información (texto, redes sociales, formatos para descarga, compartir) con un simple “hover” sobre la imagenUtilizando el mismo patrón para un elemento común, el usuario sabrá como proceder cada vez que vuelva a ver una imagen dentro de un mismo site.

Son micro-interacciones sutiles, sencillas, limpias y elegantes que aportan un plus al usuario. “Menos, es más” 

 

 

 

 

 

 

 

En los siguientes enlaces podemos ver recursos similares para inspirarnos:

5 WAI ARIAS estáticas que mejorarán la accesibilidad de un sitio web

aria-label

Identificar menús:

<nav  aria-label=”Menú Principal”>

<nav  aria-label=”Menú Secundario”>

<nav  aria-label=”Menú de idiomas”>

 

role=”presentation”

Para eliminar la semántica nativa de elementos. Por ejemplo una tabla usada para estructurar contenidos o una imagen decorativa que no queramos que sea percibida por los lectores de pantalla.

<img src=”separador.jpg” role=”presentation” alt=””>

 

aria-live=”polite”

Indicar cuando un contenido se ha actualizado mediante un aviso al usuario, pero sin interrumpir su actividad dentro del sitio. Regiones activas como widgets de redes sociales.

<article  role=”article” aria-live=”polite”></article>

 

role=”button”

Identificar botones en elementos que funcionan como tal pero no son etiquetas semánticas de manera nativa.

<span role=”button” id=””> cerrar </span>

 

aria-required=”true”

Incluir en todos los campos obligatorios de un formulario.

<input type=”text” aria-required=”trueid=””>

 

 

10 criterios fundamentales a cumplir para crear una web accesible

1.ESTÁNDARES Y SEMÁNTICA APROPIADOS

Hay que maquetar los elementos siguiendo un etiquetado válido y una semántica correcta. Maximizaremos la compatibilidad con las aplicaciones de usuario y obtendremos un código robusto.

No hagas de un span un botón pudiendo incluir un button o un input type=”button”. Evitarás tener que forzar el foco y describir la semántica del elemento.

EVITAR:

<span tabindex=”0” role=”button”> </span>

USO APROPIADO:

<button></button>

<input type=”button”>

 

2.ACCESIBLE MEDIANTE TECLADO

El sitio debe ser accesible mediante el teclado. El usuario debe poder tabular entre enlaces e inputs.

¿Qué hacemos si un elemento no adquiere el foco de manera natural?

Podemos forzarlo incluyendo el atributo tabindex=”0″, directamente en el código o dinámicamente.

Ejemplo de un foco forzado con tabindex:

<span tabindex=”0” role=”button”> Cerrar menú </span>

 

3.ORDEN DEL FOCO

El foco debe mantener un orden coherente cuando tabulamos por sus enlaces e inputs. El orden es de izquierda a derecha y de arriba hacia abajo.

Para no tener que forzar el orden natural se debe maquetar con coherencia organizando los elementos en el html en el mismo orden en el que se van a tabular.

 

4.VISIBILIDAD DE FOCO

El foco debe ser visible.

Incluir en la hoja de estilos la clase :focus para hacer visibles enlaces e inputs.

Ejemplo muy visual de esta pauta: https://www.gov.uk/

 

5.PLAY / PAUSE

Todo el contenido dinámico debe poder pararse. Hay que incluir un play / pause en slider, carruseles o contenido multimedia. No olvidemos que esos botones deben poder activarse o desactivarse con teclado y adquirir el foco.

 

6.DESCRIBIR IMÁGENES…. O NO.

Es bien sabido que las imágenes en una web deben contener una etiqueta alt descriptiva pero, si dicha imagen tiene una finalidad puramente decorativa, no tiene por qué describirse y será ignorada por los lectores de pantalla . En este caso la etiqueta alt se mantendría, pero vacía.

Ejemplo:

<img src=”coche.jpg” alt=””>

 

7.NUEVA VENTANA

Si una página o un documento se abre en una nueva ventana hay que indicarlo, o con texto, o visualmente con un icono y un alt.

Ejemplo con texto:

<a href=””>

Ver enlace (Nueva ventana)

</a>

Ejemplo con imagen:

<a href=””>

Ver enlace <img src=”nueva.png” alt=”Nueva ventana” />

</a>

8.FORMATO DE UN FICHERO

Es importante informar adecuadamente sobre los ficheros alojados en el portal. Indicar el formato, el tamaño y  si se va abrir en una ventana nueva.

Se debe incluir como texto y visible o con imágenes en el alt. Evitar dar la información únicamente en el title.

También deberíamos indicar un enlace a un software gratuito que permita visualizar los archivos (por ejemplo Adobe Reader para formatos PDF). Podemos añadirlo en la misma página donde se descargan los documentos o en la sección de accesibilidad.

Ejemplo:

Nombre del fichero.  Formato PDF, 161 KB  (Nueva ventana)

 

9.OCULTAR CON CSS

Usar display y visibility en la clase para ocultar visualmente y a los lectores de pantalla.

.none{

display:none;
visibility:hidden;

}

Ocultar desplazando el elemento fuera de pantalla para ocultar visualmente pero NO a los lectores de pantalla.

Ejemplo:

.oculto {

clear: none !important;
float: none !important;
font-size: 0em;
left: -999999px !important;
line-height: 0px;
margin: 0px !important;
padding: 0px !important;
position: fixed !important;
width: 100%;

}

Ejemplo con la clase de Bootstrap

.sr_only {

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

10.LABEL O TITLE

Relacionar label y su campo mediante for e id.

Si no existen labels, sustituirlo por un atributo title descriptivo dentro del campo.

Ejemplo:

<select title=”Idiomas”></select>

Genera ingresos con tus vídeos en Youtube (o no)

Hace unos días, YouTube anunciaba sus nuevas políticas de monetización de contenidos con las que endurecen las condiciones para obtener ingresos:

A partir de ahora sólo se podrán monetizar cuentas que tengan más de 10.000 vistas en sus canales. Esto permitirá proteger a los creadores de contenido, debido a que muchas cuentas mostraban contenido impropio para obtener ganancias. Además, ahora es más fácil reportar un canal que esté suplantando a alguna persona y los vídeos que contengan temas que Google considere polémicos, palabras malsonantes o alusiones eróticas tampoco generarán ingresos. Estas medidas han provocado que muchas empresas retiren su publicidad de este portal.

¿Qué pasos debe seguir una empresa para obtener beneficios con su canal de YouTube?

  1. Unirse al Programa para Partners de YouTube

Una vez dentro de nuestro canal, en la parte superior derecha, selecciona el icono de tu cuenta > “Creator Studio”; en el menú de la izquierda, selecciona CANAL > “Estado y funciones”; en “Obtención de ingresos”, haz clic en “Activar”. Sigue los pasos en pantalla para aceptar las condiciones del Programa para Partners de YouTube.

  1. Configurar una cuenta de AdSense

AdSense es la plataforma de Google que permite a los creadores de contenidos ganar dinero con ellos. En este artículo vemos como se utiliza para monetizar nuestros vídeos de YouTube, pero también permite gestionar publicidad en páginas webs y blogs (su equivalente para aplicaciones es AdMob).

Para configurar una cuenta de AdSense desde tu canal, debes hacer clic una vez más en el menú lateral sobre la opción “Obtención de ingresos” en la sección CANAL y luego pulsar sobre el botón “Configurar AdSense”.

  1. Seleccionar los vídeos que quieres monetizar

Puedes hacerlo mientras el vídeo se esté subiendo, o bien una vez esté subido. En ambos casos tendrás que seleccionar la pestaña “Obtención de ingresos”. A continuación elige los formatos de anuncio que quieres habilitar en el vídeo. Cada tipo de formato de anuncio hace referencia a los dispositivos donde aparecerá e incluye una ilustración con la ubicación del anuncio.

Si prefieres activar los anuncios en varios vídeos, selecciónalos desde el gestor de vídeos de tu canal y a continuación, en la parte superior haz clic en el menú despegable “Acciones” > “Obtener ingresos”.

Nota: Recuerda que si habilitas los anuncios en tus vídeos de YouTube, confirmas que tienes los derechos necesarios sobre los elementos visuales y de audio de dicho contenido.

¿Y si no quiero que aparezcan anuncios en los vídeos de mi canal?

Si lo que queremos es que nuestros clientes o posibles clientes no vean publicidad de otras marcas cuando reproduzcan los vídeos de nuestro canal debemos seguir estos pasos:

Una vez logueados dentro de nuestro canal, en el menú lateral hacemos clic en “Opciones avanzadas” dentro de la sección CANAL. Allí veremos un apartado llamado “Anuncios”, la primera opción “Permitir que los anuncios se muestren al lado de mis vídeos” deberá estar desactivada y la segunda “Inhabilitar anuncios basados en intereses” activada.

Esto sólo se aplica a los vídeos que no están protegidos por derechos de autor, en caso contrario (una canción por ejemplo) se mostrarán algunos anuncios que reportarán ingresos para compensar al autor.

Existen casos en los que los propietarios de los derechos de autor no quieren que su material se reutilice y pueden decidir si bloquean el vídeo, silencian el audio del vídeo o bien bloquearlo en ciertas plataformas o dispositivos.

Vimeo puede ser tu alternativa a Youtube

Cada vez más empresas deciden alojar sus vídeos en un canal de Vimeo como complemento o incluso como alternativa a YouTube, ya que se percibe con una imagen más profesional. Vimeo obtiene sus ingresos a través de las suscripciones, por lo que no muestra publicidad en sus vídeos. Ellos mismos lo explican así:

Tu trabajo nunca se verá empañado por anuncios insertados. Así es: no tendrá anuncios antes, durante ni después de la reproducción. En Vimeo presentas tu trabajo tal y como quieras.”

Sin embargo, como decíamos, este portal se mantiene gracias a las suscripciones y obliga a las empresas a utilizar Vimeo PRO o Vimeo Business.

 

*Fuente: Google, Vimeo

Plugins para Sublime – Gestiona los ToDo con PlainTasks

Sublime text es el editor de texto preferido en Babel Creativa. Podemos sacarle un poquito mas de partido. Existen un montón de plugins cuyo objetivo es hacernos la vida más fácil, colorear código, autocompletar… y también, por ejemplo, tener un listado de ToDo’s que podemos integrar con nuestro workflow para completar el checklist de SEO o accesibilidad.

Para instalarlo sólo tenemos que tener instalado previamente el Package Control, que se encarga de gestionar los plugins. Seguimos dos pasos muy sencillos:

  1. Abrimos la consola de sublime con View > Show console y pegamos el código que podemos encontrar aquí, según nuestra versión de sublime: https://packagecontrol.io/installation#st3
  2. Una vez instalado con pulsar ctrl + shift + P, seleccionamos “install package” y buscamos por el nombre el plugin que queramos instalar.

 

PlainTasks

Lo interesante de PlainTasks es que podemos organizar una lista de ToDo’s interactiva dentro de nuestro propio proyecto en sublime y poder gestionarla desde el mismo programa. Éste vídeo lo explica mejor:

Sublime Plugin: Plain tasks from Smashing Editorial on Vimeo.

Lo único que tenemos que hacer es crear un nuevo archivo con extensión .todo y ya tomará el formato de nuestra nueva lista. Para crear nuevos items es tan sencillo como ctrl + i, los títulos se interpretarán como cualquier línea que acabe en dos puntos (:) – para una guía completa y tutorial para crear y gestionar la lista podemos consultar preferences > package settings > Plaintasks > tutorial

 

Crear un proyecto con IONIC

¿Qué es ionic?

  • Framework open source basado en HTML5, CSS y JS para el desarrollo de aplicaciones híbridas.
  • Está construida con Sass y optimizado con AngularJS.
  • Trabaja bajo Apache Cordova.

¿Por qué usar ionic?

  •  Es sencillo, limpio y funcional.
  •  Está construido para ser rápido gracias a las aceleraciones de transiciones por hardware, la no utilización de jQuery y la mínima manipulación del DOM, además de su arquitectura sólida gracias a AngularJS.
  •  Está basado en los kit de desarrollo de software nativos más populares, por lo que si ya se ha trabajado con aplicaciones nativas, será fácil de entender.
  •  Cuenta con un potente CLI con el que se puede crear, probar, construir o compilar fácilmente las aplicaciones desarrolladas.

Instalar Ionic:

Para poder instalar Ionic necesitamos NPM (node package manager), gestor de paquetes de nodeJS que permite instalar librerías y enlazarlas o descargar programas de js.

INSTALACIÓN DE NODEJS:

  1.  Ir al sitio oficial : https://nodejs.org/en/
  2.  Descargar la versión estable: en este caso V.4.4.4 LTS
  3.  Seguir los pasos del instalador. En el caso de windows, se descarga el instalador, una archivo con extensión msi.

Guía de instalción en iOS:
https://changelog.com/install-node-js-with-homebrew-on-os-x/

Una vez instalado, ejecutaremos en la consola:

Windows:

$ npm i -g cordova ionic

iOs:

$ sudo npm install -g cordova

Con este comando instalaremos Ionic y Apache Cordova, componentes necesarios para comenzar.

Para empezar con la app, ionic ofrece tres esqueletos básicos sobre los que trabajar:

– Blank page: $ionic start myApp blank
– Menú inferior de navegación por tabs: $ionic start myApp tabs
– Página con sidebar menu: $ionic start myApp sidemenu

(myApp -> nombre que tendrá la aplicación. )

 

initialPages

Cuando vamos a ejecutar cualquier comando, tenemos que ir siempre a la carpeta directorio donde queremos que se realice la acción, en este caso nuestra App. Para ir a cualquier carpeta hay que ejecutar en la consola cd + ‘ruta’, por lo que en este caso, para crear la aplicación ejecutaremos dos comandos:

 cd 'ruta carpeta directorio'
 ionic start BBC tabs

Tras finalizar la instalación de nuestra app, podremos ejecutarla para ver el resultado desde la terminal ejecutando:

 cd 'directorio de mi App'

(hay que tener en cuenta que tras la instalación estaremos en la carpeta contenedora del proyecto, por lo tanto, tendremos que entrar dentro de la carpeta myApp, en este caso BBC)

 $ionic serve --lab

(se levantará el navegador con simulación iOS y android) / $ionic serve (levanta el navegador con la aplicación, sin simulación)

firstUp

Para comprobar que todo está correcto, en el directorio de la App, encontraremos una nueva estructura de carpetas:

estructura de carpetas

BEMIT – Agregando funcionalidad a BEM

La nomenclatura BEM (Block, Element, Modifier) ofrece una manera de estructurar nuestro HTML de modo sencillo y claro:
Block (bloque) (Bloque: user)
Element (elemento) (Elemento dentro de bloque: user_ _bio)
Modifier (modificador) (Modificador del elemento: user_ _bio- -hightlighted)

Sólo viendo el código podemos establecer relaciones entre los elementos y estructurar mejor nuestro CSS.

Intentando mejorar la ya de por si útil BEM, Harry Roberts propone incluir el concepto de jerarquías de ITCSS (Inverted Triangle CSS). Las jerarquías ITCSS se aplican de mayor a menor especificidad en el DOM.

Sumaría a BEM + ITCSS = BEMIT.

HTML sin nomenclatura BEM

<div class="media  user  premium">
    <img class="img  photo  avatar" alt="" />
</div>

HTML con nomenclatura BEM

<div class="media  user  user--premium">
   <img class="media__img  user__photo  avatar" alt="" />
    <p class="media__body  user__bio"></p>
</div>

HTML con nomenclatura BEMIT

<div class="o-media  c-user  c-user--premium">
<img class="o-media__img  c-user__photo  c-avatar" alt="" />
</div>

No se añade ningún elemento nuevo. Sigue existiendo sólo Bloques, Elementos o Modificadores, pero se añaden capas de significado:

c- : para Componentes
Es algo concreto, una parte de UI específica. Cambios en ellos suponen una modificación sólo en ese contexto. Modificarlos es seguro.

.c-modal {}
  .c-modal__title {}
.c-modal--gallery {}

o- : para Objetos
Puede utilizarse en diferentes contextos. Modificarlos puede suponer cambios en muchos sitios, no relacionados.

.o-layout {}
  .o-layout__item {}
.o-layout--fixed {}

u- : para Utilidades (Utilities).
Es una clase dada con un rol específico. No está ligada a ningún componente UI específicamente y por tanto puede ser reutilizada. Usada por librerías y metodologías como SUIT.

.u-clearfix {}

is- / has- : para Estados
El elemento tiene un estilo concreto debido a un estado o condición. Proviene de SMACSS.

.is-close {}
.has-dropdown {}

js- : para JS
Los elementos del DOM tienen una actuación sobre ellos, creada por JavaScript.

.js-modal {}

t- : para Temas
La apariencia del elemento se debe o se ve afectado a que está incorporado dentro de un Tema (theme).

.t-dark{}

s-: para un nuevo contexto (Scope).
Es similar a la usada con t-, pero no restringida a la mera apariencia.

.s-cms-content {}

qa- : para el equipo QA o testing.
Es una clase que se da para recalcar que se está haciendo una acción sobre el HMTL o los elementos del DOM, sin ninguna relación con el CSS.

.qa-error-login {}

_: para Hacks.
Lo ideal es su uso solo de manera temporal.

._c-footer-mobile {}

Enlaces de interés:

BEMIT
http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/

NAMESPACES (con más ejemplos sobre cómo llamar a las clases)
http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

Flexbox: css3 layout

Flexbox es un nuevo layout de CSS3. Se ha creado para mejorar la alineación, dirección y orden de los elementos incluso cuando tienen un tamaño variable o indefinido. La principal característica del contenedor flex es su capacidad de modificar la anchura y altura de sus hijos para llenar el espacio disponible de la mejor manera posible en cada resolución de pantalla.

El algoritmo de flexbox está basado en direccionalidad a diferencia de block o inline, que están basados en horizontalidad y verticalidad.

Voy a utilizar de referencia el W3C y un artículo de scotch.io

Podemos revisar la compatibilidad con navegadores con CanIUse

 

Lo básico

Modelo flexbox. El layout flex está constituído por un contenedor padre llamado flex container y sus hijos inmediatos, llamados flex items. Podemos ver el resto de elementos en este gráfico:

CSS3-Flexbox-Model

 

Uso

Para preparar un contenedor para que ejerza como flex container tenemos que declarar el display: flex; Automáticamente todos sus hijos se convierten en flex items. Un flexbox item puede ser a su vez un flex container si así lo identificamos, por lo que se pueden anidar infinitamente.

Propiedades del contenedor

flex-direction

Esta propiedad especifica como los flex items se colocan en el flex container, definiendo el eje principal.
valores:

  • row (default)
  • row-reverse
  • column
  • column-reverse
flexbox-flex-direction-row

flex-direction: row;

flexbox-flex-direction-row-reverse

flex-direction: row-reverse;

flexbox-flex-direction-column

flex-direction: column;

flexbox-flex-direction-column-reverse

flex-direction: column-reverse;

flex-wrap

El wrap define si queremos que el contenido se mantenga en una sola linea o si fluya en varias.
valores:

  • wrap
  • nowrap (default)
  • wrap-reverse
flexbox-flex-wrap-nowrap

flex-wrap: nowrap;

flexbox-flex-wrap-wrap

flex-wrap: wrap;

flexbox-flex-wrap-wrap-reverse

flex-wrap: wrap-reverse;

flex-flow

Unifica flex-direction y flex-wrap en una sola propiedad. Toma los mismos valores de estas propiedades por separado. Primero se define el flex-direction y luego el flex-wrap. Se recomienda que se utilice este método mejor que declarar los otros dos por separado.

justify-content

Alinea los flex items a lo largo del eje principal del flex container. Ayuda a distribuir el espacio libre sobrante en los casos en los que los elementos de una linea son fijos o si son flexibles pero han alcanzado su limite máximo.

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

justify-content: flex-start;

flexbox-justify-content-flex-end

justify-content: flex-end;

flexbox-justify-content-center

justify-content: center;

flexbox-justify-content-space-around

justify-content: space-around;

flexbox-justify-content-space-between

justify-content: space-between;

flex-align

Funciona para alinear elementos de la misma manera en que lo hace justify-content, pero esta vez para el eje secundario.

  • stretch (default)
  • flex-start
  • flex-end
  • flex-container
  • baseline
flexbox-align-items-stretch

align-items: stretch;

flexbox-align-items-flex-start

align-items: flex-start;

flexbox-align-items-flex-end

align-items: flex-end;

flexbox-align-items-center

align-items: center;

flexbox-align-items-baseline

align-items: baseline;

align-content

Alinea las filas interiores del flex-container (no tendrá efecto si solo tenemos una) de manera parecida a como actúa justify-content sobre los flex items.

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

align-content: stretch;

flexbox-align-content-space-between

align-content: space-between;

flexbox-align-content-space-around

align-content: space-around;

flexbox-align-content-flex-start

align-content: flex-start;

flexbox-align-content-flex-end

align-content: flex-end;

flexbox-align-content-center

align-content: center;

Propiedades de los items

Order

Define el orden en el que aparecen los flex items. Por ejemplo utilizaremos order: -1; cuando queramos asegurarnos que ese item aparece el primero. Se utilizan numerales, sin unidades. Además, cuando varios items comparten numeral, el orden de aparición será el del html.
Nota sobre accesibilidad. Hay que tener en cuenta que la reordenación solo va a tener efecto a nivel estético, y que por tanto otras maneras de leer nuestro código van a interpretar el orden original del html. Es importante tenerlo en cuenta para que no afecte a la legibilidad de la página y su accesibilidad.

flexbox-order

flex-grow

Define el factor de crecimiento. En concreto cuánto crecerá en relación con el resto de sus hermanos, cuando haya espacio disponible.

flexbox-flex-grow-1

Cuando los numerales coinciden creceran de igual manera.

flexbox-flex-grow-2

El segundo elemento crece tres veces mas con respecto al resto de elementos con el espacio positivo que se va generando en el contenedor.

flex-shrink

Lo opuesto a flex-grow. Cuánto se encojerá en relación con el resto de items cuando el espacio empiece a faltar. No se pueden usar números negativos.  Por defecto todos los elementos se encojeran de manera solidaria, pero si utilizamos el flex-shrink: 0; ese elemento mantendrá su tamaño original.

flexbox-flex-shrink

 

flex-basis

Utiliza los mismos valores que width y height (en función de si estamos en row o en column)  y especifica el tamaño inicial de los flex item, antes de que el espacio libre se distribuya. Al reducir a una variable el “ancho” en función de la orientación de nuestro display, no hace falta cambiarlo si decidimos sustituir columna por fila.

flexbox-flex-basis

 

flex

Sería la propiedad que aglutina flex-grow, flex-shrink y flex-basis, por ese orden.

Además de todas las combinaciones posibles con esos valores, tendríamos los equivalentes a auto y a none, además del valor default:

flex: 0 1 auto; (default)

flex: 1 1 auto; (auto)

flex: 0 0 auto; (none)

align-self

sobreescribe el efecto de align-items para el elemento al que estemos apuntando. Toma sus mismos valores. El “auto” como valor por defecto anula el align-self para que herede el del padre; Si no estuviera definido, su valor sería como el de stretch.

  • stretch
  • auto (default)
  • flex-start
  • flex-end
  • center
  • baseline

flexbox-align-self

 

Info interesante

Elementos colapsados

Con la orden visibility: collapse; se convierte en un flex item colapsado, el elemento sale del flujo, ya no existe. Pero deja un hueco de su presencia. Se recomienda su uso sobre todo cuando se colpase y abra de manera dinámica, para evitar bailes en el renderizado. Si lo que se pretende es ocultar el elemento completamente se recomienda el uso de display: none;

float, clear y vertical-align no tiene ningún efecto.

No resultan en ningún tipo de efecto sobre un elemento flex, no lo saca del flujo ni lo altera de ninguna manera.

 

…Y para ampliar información

Tutoriales

Codrops – La información es muy parecida a la de este artículo, pero además tenemos pequeños playgrounds donde trastear con cada propiedad.

La rana – Una manera divertida de familiarizarnos con las diferentes propiedades de flexbox.

Bugs de flexbox

Flexbugs, comunidad donde se recopilan y resuelven los bugs conocidos de flexbox.

Ejemplos

Solved by flexbox – Ideas de uso y aprovechamiento de flexbox.

 

– Muchas gracias a Sandra por recopilar gran parte de este material.

ITCSS – Primer paso hacia BEMIT

Simplificando mucho y a modo de corta introducción, un par de conceptos útiles para entender este post:
– BEM (Block, Element, Modifier): es una nomenclatura más estructurada del HTML y por tanto, del CSS.
– ITCSS (Inverted Triangle CSS): es una manera de organizar las CSS en función de su especificidad.
– BEMIT es la combinación de la nomenclatura BEM con la jerarquía de ITCSS.

BEM nos suena ¿cierto? No voy a profundizar en ello aquí. Solo diré que partimos de BEM para llegar a  BEMIT y que por el camino, nos conviene entender ITCSS. Pero ¿Qué es ITCSS?

ITCSS – Inverted Triangle CSS (Triángulo invertido CSS)

itcss

Ha sido desarrollado por Harry Roberts, siendo compatible con la nomenclatura BEM (y con casi cualquiera que estés usando a día de hoy en tus proyectos).

En su conferencia “Managing CSS Projects with ITCSS” explicó largo y tendido en que consiste, y os hago un breve resumen a continuación:

ITCSS es una manera de concebir el trabajo con CSS y HTML y organizarlo de una manera más óptima. No es una librería, no es una regla. Utiliza una jerarquía basada en el grado de especificidad del CSS, de menor concreción a mayor, creando un triángulo invertido. Arriba los elementos generales, en la última capa, los concretos, específicos.

ITCSS surge por la necesidad de:
– Desarrollar de una manera sana. Que nos permita escalar fácilmente el proyecto.
– Controlar y ‘domar’ la CSS y su cascada de herencias.
– Utilizar lo antiguo y lo nuevo, con un orden coherente.
– Reducir la redundancia.
– Acabar con las guerras de especificidad.

Ofrece:
– Una arquitectura escalable y limpia
– Es un meta framework: un framework para otros frameworks.
– Es muy simple.
– Es independiente de los preprocesadores. Lo puedes usar trabajando con lo que trabajes.

Si hiciésemos un estudio de Especificidad (‘Specificity Graph’) de la hoja de estilos de un proyecto cualquiera (especialmente si es de gran envergadura) nos encontraríamos algo parecido a la gráfica de la izquierda. Muchos picos asociados a alta concreción en nuestra CSS, seguido inmediatamente de un estilo mucho más general.

picos

Estos picos pueden darse por utilizar ID, !important, selectores anidados… Se salta continuamente de una regla específica, a una regla general, creando picos y valles de especificidad. Lo que provoca que las llamadas en nuestra CSS salten continuamente.

Para seguir una llamada sin saltos, lineal y más lógica, sería necesario agrupar nuestra CSS por especificidad.

llamadasCSS-d

Estos niveles de especificidad, ha llevado a la creación de las capas de ITCSS.

Se parte de 7 capas:

cssit-layers

1.- Settings – Se usa para las variables globales, elementos de configuración (Si usamos pre procesador, si no, podemos saltarnos esta capa)
2.- Tools – Mixins y Funciones (solo si usamos preprocesadores)
3.- Generic – Estilos CSS: reset, box-sizing, normalize.css…
4.- Base – Elementos HTML sin clases, selectores.
5.- Objects – Patrones de diseño, la estructura. Solo si usamos CSS dirigido a objetos (OOCSS)
6.- Components – Carruseles, calendarios… y sets de UI… Aquí metemos nuestros estilos concretos, para una lista concreta de un producto, por ejemplo.
7.- Trumps – Ayudas y lo que usamos para sobreescribir. La capa de los importants, la más específica de todas. Aquí habrá código muy concreto, para partes del DOM muy específicas.

No se trata de llamar de una manera específica a nuestras clases, para eso ya tenemos BEM. Es la manera en que vamos a llamar al archivo .css en función de a qué parte pertenece (y por tanto, que estilos hemos incluido en ella).

Todo el css que incluyamos en nuestro proyecto tiene que formar parte de alguna de estas capas. Nos obliga a pensar a qué pertenece cada línea de código antes de incluirla.

* Las media queries van incluidas en la css del elemento al que estamos dando estilos.

La nomenclatura para la css seguirá la pauta:

Nombre de la capa en la que nos hayamos + nombre de la css concreta:
· base .links.css
· components .carousel.css

El objetivo:
– Afectar al DOM de general a concreto.
– La especificidad aumenta de manera progresiva.
– Nunca se deshace, solo se añade.

No es un universo cerrado. En función de nuestra necesidades podemos añadir capas. Lo importante es seguir el orden de pirámide invertida:
– Escribir CSS en orden de especificidad
– Ser fieles al ‘Gráfico de especificidad’ evitando en la medida de lo posible, los picos.
– El orden en el que creamos las capas tiene que ser lógico. Por ejemplo, para una test AB podemos añadir la capa TEST entre Components y Trumps. O la capa THEME (también entre Components y Trumps).

Algunos documentos de interés:
PDF –  Conferencia – Managing CSS projects with ITCSS (todas las imágenes incluidas en este post, pertenecen a este PDF).