Aprendiendo a utilizar Flexbox

¿Haces skins para foros? ¿Te ves constantemente utilizando propiedades como display: inline-block o float? Entonces deja lo que estés haciendo y aprende Flexbox. Tu cabeza te lo agradecerá. Además, si siempre has querido aprender a hacer skins pero se te hacía muy complicado, quizás Flexbox te ayude a resolver alguna de tus dudas o problemas.

Centrado horizontal y vertical «like a boss»

Menos de 24h y ya escribo otra guía. Me parece justo, llevaba un mes sin publicar nada; aunque he de admitir que me gusta esta «serie», si es que se le puede llamar así.

Ahora toca el turno de los centrados, algo tan simple y que a su vez mucha gente implementa mal. Antes de empezar, vamos a situarnos. Cuando nos referimos a centrar tenemos que saber que existen dos formas de centrar las cosas: horizontal (con respecto al eje de las X) y vertical (con respecto al eje de las Y). A parte de esto, existen dos posibilidades para centrar dependiendo de si el elemento se comporta como un bloque o como texto. Es decir, tenemos 22 posibilidades para centrar.

Continuar leyendo “Centrado horizontal y vertical «like a boss»”

Columnas «like a boss»

He visto que muchos diseñadores de skins que necesitan columnas abusan de métodos como los float o display: inline-block para obtener dicho resultado.

El uso de estas propiedades no es más que un «truco» para evitar tener que utilizar el elemento <table> para maquetar. Debemos recordar que en el pasado (¿en serio acabo de llamarle a los años 2000 «pasado»?) este elemento era utilizado de forma abusiva para constituir las estructuras de las páginas, llevando a los desarrolladores a problemas de semántica y mantenibilidad, entre otros.

Desafortunadamente mucha gente utiliza de forma incorrecta estas propiedades, por lo que dedicaré las siguientes líneas a explicar cómo se deben utilizar para obtener columnas como resultado.

Continuar leyendo “Columnas «like a boss»”

Variables CSS

El lenguaje CSS ha sufrido unas cuantas mejoras desde que la especificación de su versión número tres salió a la luz. De entre las mejoras, siempre he estado siguiendo de reojo a la evolución de las variables CSS, puesto que suponen un gran avance en la editabilidad y escalabilidad de los códigos CSS.

Considero que esta característica ha madurado lo suficiente y tiene el soporte necesario por parte de los navegadores más corrientes para poder ser utilizado a día de hoy. Es por ello que os vengo a informar sobre ella y a enseñaros, de forma general, cómo utilizarla.

Continuar leyendo “Variables CSS”