Até agora, o site real não se parece muito com o design do Photoshop. Neste screencast, vamos fazer exatamente isso, começando no topo com nosso cabeçalho e área de logotipo. É bom ter um início "real" na construção visual do site.
Usamos Frank DeLoupe como seletor de cores, que é bem integrado com o Photoshop (faz com que a cor que você escolhe a cor ativa no Photoshop, bem como copia para sua área de transferência).
Em um ponto, mudamos a configuração do Sass / Compass para compilar o CSS, em :expanded vez de :compressedver o CSS real sendo gerado por motivos de depuração.
Temos que usar nosso cérebro um pouco para saber como as coisas serão colocadas e reagir à natureza fluida de uma janela do navegador. Por exemplo, o registro deve sempre tocar no canto superior esquerdo.
Fazemos muitos ajustes em torno dos valores para fazer as coisas certas, bem como adicionamos pequenos detalhes aqui e ali para fazer as coisas parecerem melhores, como adicionar sombras leves ao efeito da pilha de papel.