Jak dotąd, rzeczywista strona internetowa nie przypomina naszego projektu Photoshopa. W tym screencastie zajmiemy się tym właśnie, zaczynając od góry z naszym nagłówkiem i obszarem logo. Dobrze jest mieć trochę „prawdziwego” początku wizualnego tworzenia witryny.
Używamy Franka DeLoupe jako próbnika kolorów, który jest ładnie zintegrowany z Photoshopem (sprawia, że kolor, który wybierasz jako aktywny kolor w Photoshopie, a także kopiowany do schowka).
W pewnym momencie zmieniamy konfigurację Sass / Compass, aby skompilować CSS :expanded zamiast :compressedzobaczyć faktyczny CSS generowany w celu debugowania.
Musimy trochę posłużyć się mózgiem, jeśli chodzi o to, jak będą rozmieszczone rzeczy i reagować na płynną naturę okna przeglądarki. Na przykład dziennik powinien zawsze dotykać lewego górnego rogu.
Bardzo często poruszamy się po wartościach, aby wszystko było dobrze, a także dodajemy tu i tam drobne szczegóły, aby wszystko wyglądało lepiej, na przykład dodając delikatne cienie do efektu stosu papieru.