Estamos casi a punto para empezar a dar aspecto a los elementos de nuestra web usando css, pero aún hay algunos elementos interesantes que nos ayudarán a ajustar plenamente la base normalizada de nuestro CSS a un nivel aún mejor.

Abramos styles.css y ¡vamos a ello!

Box Sizing by Paul Irish

Una de las pesadillas a la hora de maquetar webs, es el padding y el border, por regla general, cuando agregamos padding o border, la caja que lo contiene crece, obligandonos a tomar continuamente la calculadora y rezar para no dejar algun pixel de mas o de menos que nos tenga horas buscando un bug.

Por suerte con este snippet de Paul Irish, configuramos el css para que respete el ancho a pesar del padding, una ventaja, sin duda, a la hora de maquetar nuestra obra de arte online.

El código es el siguiente, aunque recomiendo copiarlo directamente de la web, por si hubiera evolucionado tras la publicación de este post. Aquí puedes leer cómo funciona el border-box.

/* apply a natural box layout model to all elements, 
but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

1 REM = 10 px Snippet

Otro snippet más que interesante y que convierte 1 REM en 10px , lo que simplifica enormemente nuestro trabajo con tamaños de fuente permitiendonos calcular más fácilmente proporciones. Consiste en una sola linea que se incluye en el bloque html como vemos en el ejemplo siguiente:

html {
  box-sizing: border-box; /* Border Box */
  font-size: 62.5%; /* Now 10px = 1rem! */
}
*, *:before, *:after {
  box-sizing: inherit;
}

Con esto tenemos una base estable con la que seguir construyendo, en el próximo capítulo definiremos fuentes y tamaños de los elementos principales como encabezados o párrafos, en base a unos guidelines de diseño consistentes tanto a nivel de diseño como de accesibilidad.