Bisher sieht die eigentliche Website überhaupt nicht so aus wie unser Photoshop-Design. In diesem Screencast beschäftigen wir uns genau damit, beginnend oben mit unserem Header- und Logo-Bereich. Es fühlt sich gut an, einen „echten“ Start beim visuellen Aufbau der Website zu haben.
Wir verwenden Frank DeLoupe als Farbwähler, der gut in Photoshop integriert ist (dadurch wird die Farbe, die Sie auswählen, in Photoshop zur aktiven Farbe und in Ihre Zwischenablage kopiert).
An einem Punkt ändern wir die Sass / Compass-Konfiguration, um das CSS zu kompilieren, :expanded anstatt :compressedzu sehen, dass das tatsächliche CSS aus Debugging-Gründen generiert wird.
Wir müssen unser Gehirn ein wenig in Bezug auf die Platzierung der Dinge einsetzen und auf die fließende Natur eines Browserfensters reagieren. Zum Beispiel sollte das Protokoll immer die obere linke Ecke berühren.
Wir stupsen sehr viel um Werte herum, um die richtigen Ergebnisse zu erzielen, und fügen hier und da kleine Details hinzu, damit die Dinge besser aussehen, z. B. indem wir dem Papierstapeleffekt leichte Schatten hinzufügen.