BEMIT – Agregando funcionalidad a BEM

0
Written by

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

HTML con nomenclatura BEM

HTML con nomenclatura BEMIT

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/

Cinemagraph – Fotografiando el movimiento

2
Written by

Las imágenes son potentes recursos gráficos que nos permiten marcar la distinción en nuestros diseños. Pero a veces no es suficiente. Un vídeo también ayuda pero pueden llegar a pesar mucho y ralentizar la carga.

¿Qué podemos hacer entonces? Pues un híbrido. Un vídeo que se al mismo tiempo sea una foto. Esta técnica se llama: Cinemagraph.

¿En qué consiste Cinemagraph?

Usaremos un vídeo, del que sacaremos una imagen fija y a la que luego dotaremos a uno de sus elementos de movimiento.
Por ejemplo, una foto de una modelo a la que solo se le mueve el pelo.

¿Qué necesitamos para hacerlo?

Básicamente: un vídeo. Pero no sirve cualquiera. Dependerá de qué es lo que queramos que conserve el movimiento.

Bueno, os explico el proceso y así entenderéis mejor las limitaciones.

Utilizando Photoshop:

– Abrimos el vídeo que hemos elegido (Abrir > Archivo)

– Se nos abre como si fuera una imagen normal. Pero si nos fijamos en la capa, vemos que aparece un icono de película.

pantallazo1

– Vamos al menú Ventana > Animación, para abrir la línea de tiempo y poner trabajar con el vídeo.

– Nos ponemos sobre el vídeo hasta que encontremos un frame que nos guste para ser nuestra imagen fija.

– Duplicamos capa y la rasterizamos.

pantallazo3

– Ahora ya podemos manejar esta capa cómo una capa de imagen normal.

– Hacemos una máscara de capa de lo que queremos que se mueva. Por ejemplo, en nuestro vídeo queremos que se vea movimiento sólo en el ojo del perro.

pantallazo4

– Y ya sólo queda guardarlo como GIF, con la opción de Animación > INFINITO (quitar la opción: SOLO UNA VEZ). Y ya tenemos nuestro Cinemagraph creado.
perro-ojo

Debug responsive desde tu smartphone Android

0
Written by

remote-debug-banner

¿Cuántas veces hemos escuchado eso de «Ójala se pudiera hacer debug desde el movil» para tus sitios responsive?

Pues esto ya no es un problema. Android y Chrome nos lo ponen fácil. Sólo hay que seguir estos sencillos pasos:

  1. Abrimos cualquier URL desde el chrome de nuestro smartphone Android.
  2. Conectamos nuestro smartphone Android por USB a nuestro PC.
  3. Desde Settings > Developer options., activamos el Debug por USB
    1. En Android 4.2 o superiores, para acceder a las Developer options hay que entrar en Settings > About phone y hacer tap 7 veces en Build number
  4. Ahora nos vamos a nuestro PC, abrimos Chrome y pulsamos F12. En las opciones abrimos Inspect Devices y activamos Discover USB Devices.
  5. ¡Listo! ¡Ya tenemos la navegación de nuestro Smartphone y nuestro PC sincronizada!

Ahora, si navegamos por cualquier site con nuestro smartphone (hay que usar chrome) podremos hacer debug desde nuestro PC.  A partir de aquí lo mejor es probarlo por tí mismo porque es muy sencillo.

El resultado final será algo parecido a esto:

 

 

A debugear!!