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/

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).

Uso de iconos como tipografía en tus desarrollos webs. ¡También accesibles!

Por qué seguimos utilizando sprites para nuestros iconos, pngs, hablando de iconos para retina…  pudiendo vincular una css que tira de una tipografía y que podemos personalizar nosotros mismos y que nos permite entre muchas otras cosas redimensionarlas, cambiarlas de color…

Es hora de cambiar el chip, aquí os dejo el link ¿Cómo convertir iconos en fuentes?,  un interesante artículo que habla de ello y como implementarlo de forma muy sencilla. Ya no tienes escusa.

Si además necesitas que sean accesible, os dejo otro link de cómo hacer iconsfonts accesibles.

 

como-covertir-tus-iconos-en-fuentes

 

También os dejo otra herramienta, fontastic, que permite hacer los mismo de una forma sencilla intuitiva y fácil.

 

fontastic_me

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 – Tipografías audibles, imágenes libres y frameworks

Una semana más empezamos el fin de la jornada laboral con un poco de inspiración:

TYPATONE

Últimamente estamos muy musicales, ya os enseñé qué divertido podía ser jugar con unas formas y unos cuantos sonidos en YUME en la entrada del viernes anterior.

Y ahora con TypaTone puedes convertir las letras en sonidos. Es muy creativo y siempre salen sonidos armónicos, por mucho que te empeñes en hacer cosas extrañas con las letras. Os animo a que lo probéis.

TYPASOUND

CODEPLY

¿Alguna vez has sentido deseos de poder acceder a diferentes Frameworks para elegir el mejor código para tu página sin tener que ir uno a uno? Pues bien, esto es exactamente lo que puedes conseguir con Codeply. Accedes a diferentes Frameworks a través de la página, y coges la parte que más te convenga: menús, acordeones, botones…

Lo bueno, es que el editor te deja copiar HTML, CSS, JS y es muy visual. Así que es bastante intuitivo.

codeply

En un principio tus búsquedas pueden ser algo erráticas. Pero, dadle una oportunidad, es una herramienta con potencial.

LIBRE STOCK

Como ya he visto que nadie se ha animado a tener unos cuantos “freebies” de ‘Halloween’ (cuanta animosidad contra esta fiesta) he tenido que cambiar el recurso gratuito que os quería aportar por este otro: ‘Libre Stock’.

Libre Stock‘ es una herramienta para buscar imágenes de stock gratuitas por la web. Te devuelve resultados en diferentes páginas de recursos de fotografía. Ahorraréis algo de tiempo. Me parece completa, aunque no vais a encontrar todas las que queráis. Algunas búsquedas tendrán que ser un poco más exhaustivas.

freestock

 

TIPOGRAFÍA Y MÁS TIPOGRAFÍA

Este viernes os estoy dejando recursos a mansalva ¿no?.

Si la tipografía es lo tuyo, te sonará la página Type Detail. Si no recuerdas haberla oído nombrar, tampoco te preocupes, ahora sí la conoces. Si utilizas su apartado de Recursos, tendrás acceso a cientos de recursos online, blogs y foros, que discuten, respiran y viven sólo para la tipografía. Qué ¿te das un vuelta?

type

PORTADAS ANIMADAS

Y por último y con esto os dejo ya, una curiosidad desde Vimeo. Portadas de libros clásicos, ilustradas y animadas. Muy trabajadas y muy ‘resultonas’ ¿cuál os gusta más?

vimeo

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 – Aprende jugando y otros recursos animales

Cuándo te toca investigar durante muchas horas un tema que requiere código y más código, acabas exhausto. Si encuentras la respuesta fácilmente, te sientes poderoso. Pero si no das con ella tan rápidamente puedes: desesperarte, aburrirte, frustrarte o hundirte en la miseria.

Así que es de agradecer, cuándo se está comenzando a aprender alguna destreza nueva, que haya oportunidad de hacerlo de manera entretenida.

Y eso os presento hoy, aprender código con 5 juegos. Es cierto, queridos diseñadores, que son juego orientados a desarrolladores, si bien hay algunos que utilizan J-Query, así que… ahí lo dejo si queréis dedicarle un rato:

5 JUEGOS PARA APRENDER CÓDIGO.

code-combat

 

ANIMALES CON PURO CSS

Y para que no penséis, maquetadores del mundo, que me he olvidado de vosotros, os dejo un enlace a unas bonitas animaciones de animales solo con CSS. ¿No son motivadoras?

css-animales

 

 

365 PSD

Y como hoy es viernes, y en viernes siempre se agradecen los “Freebies” he aquí un recurso estupendo que me han pasado de archivos PSD.

Algunos gratuitos… otros no tanto. Pero buen recurso.

PSD

 

 

Nos vemos 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.