Până în prezent, site-ul web nu seamănă deloc cu designul nostru Photoshop. În acest screencast, ne străduim să facem exact asta, începând din partea de sus cu antetul și zona logo-ului nostru. Este bine să începeți un pic „real” în construirea vizuală a site-ului.
Folosim Frank DeLoupe ca selector de culori, care este frumos integrat cu Photoshop (face ca culoarea pe care o alegeți să fie activă în Photoshop, precum și copiată în clipboard).
La un moment dat schimbăm configurația Sass / Compass pentru a compila CSS ca :expanded în loc :compressedsă vedem CSS-ul real generat din motive de depanare.
Trebuie să ne folosim puțin creierul cu privire la modul în care lucrurile vor fi plasate și să reacționeze la natura fluidă a unei ferestre de browser. De exemplu, jurnalul trebuie să atingă întotdeauna colțul din stânga sus.
Facem o mulțime de alunecări în jurul valorilor pentru a obține lucrurile corect, precum și adăugăm mici detalii aici și colo pentru a face lucrurile să arate mai bine, cum ar fi adăugarea de umbre ușoare la efectul stivei de hârtie.