Pequeño compilado de temas interesantes de front-end

Después de algunas semanas de alamacenar estos links y no saber muy bien qué hacer con ellos he optado por hacer este post

Por qué los iconos en tipografía deben morir

No voy a mentir, usar fuentes para los iconos es muy muy cómodo como desarrollador, es como tener un sprite en vectores que no se va a pixelar y nombres fáciles de recordar por ende fácil de escribir y pesan poco, los archivos con todos los formatos raros de fuente pesan unos 180 kbs, el tema es que una y otra vez me ha dado problemas de compatibilidad en exploradores como firefox (por no mencionar ie).
Que no se visualice la tipografía correcta en un sitio web es algo más común de lo que la gente quiere aceptar. Y en general no hay un gran problema, sencillamente se verá una tipografía por defecto (arial, times, courier…comic sans) el usuario podrá usar el sitio al fin y al cabo, el problema empieza cuando usas tipografía para tus iconos y ups…en estos casos no se ve nada y como dicen en gringolandia:

“Shit will hit the fan”

En fin, en esta bonita presentación esta lumbrera nos explica esto y más:

BEM explicado con bolitas y palitos

Mentes simples como la mía agradecen que se explique así qué diablos es BEM y cómo implementar esta metodología para establecer nomenclatura en css y html. Paralelamente también podrían ver este sistema de organización que divide los elementos en atomos, moleculas, organismos, templates y páginas, es brutal

Cómo crear iconos a base de líneas en vectores

Responsive Pixels

Este man escribe un bonito post con más detalles sobre esto, este concepto me encanta y nunca he sido capaz de encontrar una manera fácil de hacerlo peeeero gracias a Sass, es posible, y yo como soy un encanto les dejo el snipet de Sass listo para usar em en vez de pixeles de manera práctica:

Px a em con Sass

// Los 14 px es el tamaño base que yo he querido elegir para las tipografías
@function em($px, $base: 14px ) {
@return ($px / $base) * 1em;
}

//Así se usaría
h1 {
font-size: em(29);
}

y como hacer para que Sass te haga los cálculos de px a porcentajes:

Px a porcentajes con Sass

.col_peque {
width: round(percentage(200px / 1400px));
}

Ñoñerías tipográficas varias

• Un pequeño tutorial muy bien ilustrado de tipografía responsive
• Grupo de consejos en sass para el ritmo de la tipografía

De este último pueden ver el power en acción:

See the Pen Baseline Grid Demonstration by David Khourshid (@davidkpiano) on CodePen.

Tags: CSS, Diseño de producto, front-end, HTML, javascript, sass