Nachdem wir Photoshopping durchgeführt haben, was wir mit dem Suchbereich erreichen möchten, haben wir uns daran gemacht, es mit HTML und CSS zu erstellen. Wir haben bereits unsere Symbolschrift geladen, also platzieren wir diese auf der Seite. Mit Font Explorer X können wir das richtige HTML-Zeichen für die Lupe anzeigen.
Wir fügen das Markup zu unserer Header-Include-Datei hinzu und starten eine brandneue Sass-Datei (_search.scss), um das CSS für diesen neuen Bereich zu schreiben. Wir stellen sicher, dass CodeKit über diese neue Datei informiert ist. Leider dauert es in diesen frühen Screencasts manchmal eine Weile, bis CodeKit aktualisiert ist. Später stelle ich fest, dass ich nur ein bestimmtes Projekt mit viel zu vielen Dateien darin habe. Sie können dies beheben, indem Sie nur das Verzeichnis eingrenzen, in dem sich CodeKit überwacht.
Wir positionieren den Suchbereich absolut so in der Kopfzeile, dass er rechts und oben im Hauptinhaltsbereich platziert wird. Wir passen die Größe und Platzierung der Lupe an, indem wir gezielt auf das Symbol zielen. Wir positionieren die Dinge mit Prozentsätzen, damit sie genau zu unserem reaktionsschnellen Design passen. Wir fügen hinzu :hoverund geben :focusauch an, so dass es offensichtlich ist, dass Sie darauf klicken können.
Zum Abschluss schreiben wir JavaScript, mit dem der Suchbereich geöffnet und geschlossen wird. Wir hätten die Animationen direkt im JavaScript haben können (da wir jQuery verwenden), aber stattdessen ändern wir nur die Klassennamen im CSS. Dies ist das, was ich gerne als "zustandsbasiertes CSS" betrachte, bei dem JavaScript nur Klassennamen steuert, die angeben, in welchem Zustand sich die Seite (oder der Bereich) befindet, und CSS steuert, wie die Seite in diesem Zustand aussieht (und wie sie dorthin gelangt) ). Dies bedeutet, dass wir Dinge wie Übergänge in CSS ausführen, die meiner Meinung nach dort hingehören und langfristig weitaus besser sind (dh CSS-Übergänge werden hardwarebeschleunigt, JavaScript-Übergänge nicht, sondern nur schnelle Iterationen von Inline-Stilen).