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

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/

Debug responsive desde tu smartphone Android

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!!

El maravilloso mundo del Email Responsive

img

Hola, tenemos que maquetar este email responsive… NOOOOOO!!!

Todos los que nos enfrentamos a este reto, sabemos la gran cantidad de variables que existen a la hora de maquetar un email responsive para que se visualice bien en la gran mayoría de los proveedores de correo; que si Outlook no soporta margins, que si las app de Gmail para iOS y Android  no soporta media-queries…

Os dejo un post donde nos explican cómo solucionar la mayoría de problemas y que nuestros emails se visualicen correctamente. http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919

Espero que os sea útil.

 

La ‘curiosidad’ del viernes – Infografías del pasado y otras novedades

El viernes nos ha dejado un puente muy codiciado a nuestros pies. Pero no podemos irnos a disfrutar de nuestro festivo sin un breve repaso a algunos recursos que hemos encontrado navegando por Internet.

INFOGRAFÍAS

Hoy es un gran día para la nostalgia. ¿Cómo eran las infografías antes de los ordenadores? Esta es la pregunta que ha decidido contestar ‘The wired’. Después de leer el artículo, nuestra conclusión: eran un poco más difíciles de llevar a cabo y dignas de admiración.

infografias

RECURSOS DESDE FACEBOOK

El equipo de diseñadores de Facebook ha decidido compartir con nosotros algunas páginas de recursos muy útiles: mock-ups, herramientas de diseño y prototipado y alguna sorpresa más. Os dejo el enlace para que le echéis un ojo. Pueden ser muy útiles. Si eres usuario de Mac, con más motivo. recursos-fb

CODEPEN

Y cómo no podía faltar en este pequeño espacio a la curiosidad del viernes, un gracioso efecto desde Codepen. Un cable que se enrolla, así de sencillo, sin más. Y qué espectacular.

codepen

Hasta el próximo viernes.

La ‘curiosidad’ del viernes – Código limpio, herramientas y pixels

Todos lo sabemos, hay cosas que a la hora de maquetar NO tenemos que hacer… y las hacemos, las hacemos.
Hacks, trucos que sacamos de debajo de la manga, márgenes negativos, propiedades dudosas, “!important”.
Así que ahora tenemos a nuestra disposición una herramienta curiosa.

DIRTY MARKUP

“Dirty Markup” es una ayuda para ver esos pequeños errores que se te han podido pasar: reglas vacías o repetidas, error en el orden de las propiedades con “vendor-prefixes” y cosas por el estilo. Lo único que tienes que hacer es pegar tu código (HTML, CSS o Js) y te hará algunas sugerencias de cómo mejorarlo.

Algunas recomendaciones las podríamos obviar: si, todos sabemos que no hay que incluir “!important” pero… que me digan cómo se sobreescriben los estilos inline de un CMS sin usarlos.

Aún así, es útil.

dirty

Otra cosa más para un viernes cómo hoy ¿estás al día con las herramientas más utilizadas para diseñar?

THE TOOLS DESIGNERS ARE USING TODAY

¿Crees que sí? Bueno, pues cotillea un poco este test. Si no usas las que han sido más votadas, no pasa nada. Pero, si ni siquiera te suenan… es un buen momento para empezar a investigar.

tools

 

 

Y por último, algo curioso… aunque esta vez no os lo traigo de Codepen (hoy he sido infiel).

GLITCH TOP

¿Nunca has sentido deseos de llenar de pixels tu pantalla? Ahora si los vas a tener, aunque solo sea para darle al play y ver cómo funcionan las selecciones de color que has hecho.

glitchtop

 

 

Y con esto me despido hasta la próxima semana.

 

La ‘curiosidad’ del viernes – Parallax y otras historias

Septiembre nos ha traído el recuerdo de que se acaba el verano, la jornada intensiva (para los afortunados que la hayan disfrutado)… pero para evitar que la tristeza nos sobrecoja, aquí un poco de inspiración “viernera”.

PARALLAX – STORY TELLING

Primero, en “Line25” han creado esta recopilación de 15 webs que usando Parallax te cuentan una historia.
Estas página llevan años circulando por la web, pero nunca está de más refrescarnos la memoria. Si sólo tenéis tiempo para ver alguna, os recomiendo encarecidamente “The hybrid graphic novel”. La propuesta gráfica es… en una palabra, brutal. Y otra que es muy diferente :”How far is it to Mars“, también es muy divertida.

pantallas-parallax

CARTAS 

Cambiando el tercio y volviendo a HTML5 y CSS3 ¿jugamos una partida de cartas?
El código de esta baraja de cartas está en Github.
Si, ya sé que sacar cartas una de tras de otra, puede parecer poco emocionante pero ¿qué queréis que os diga? Es muy entretenido. También se puede barajar automáticamente, distribuir las cartas…

baraja-cartas

CÍRCULOS CSS

Y por último, pero no por ello menos importante, Codepen. Ya sabéis, un clásico:
Círculos hipnóticos, ¡sólo con CSS! 

circulos-hipnoticos

¿Algún ruego, petición, pregunta? ¿No?… ¿Seguro? Bueno, pues hasta el próximo viernes.