Hasta ahora, el sitio web real no se parece mucho a nuestro diseño de Photoshop. En este screencast nos enfocamos en hacer precisamente eso, comenzando en la parte superior con nuestra área de encabezado y logotipo. Se siente bien tener un comienzo “real” en la construcción del sitio visualmente.
Usamos Frank DeLoupe como selector de color, que está muy bien integrado con Photoshop (hace que el color que elija el color activo en Photoshop, así como lo copie en su portapapeles).
En un momento, cambiamos la configuración de Sass / Compass para compilar el CSS como en :expanded lugar de :compressedver el CSS real que se genera por motivos de depuración.
Tenemos que usar nuestro cerebro un poco con respecto a cómo se colocarán las cosas y reaccionarán a la naturaleza fluida de una ventana del navegador. Por ejemplo, el registro siempre debe tocar la esquina superior izquierda.
Hacemos una gran cantidad de cambios en los valores para hacer las cosas bien, además de agregar pequeños detalles aquí y allá para que las cosas se vean mejor, como agregar leves sombras al efecto de pila de papel.