Тепер, коли ми зробили фотошоп, що ми сподіваємось досягти за допомогою області пошуку, ми взялися за його створення за допомогою HTML та CSS. У нас уже завантажений шрифт значків, тому ми розміщуємо його на сторінці. Провідник шрифтів X допомагає нам показати правильний символ HTML для використання у збільшувальному склі.
Ми додаємо розмітку до нашого файлу заголовка і запускаємо абсолютно новий файл Sass (_search.scss), щоб написати CSS для цієї нової області. Ми переконуємось, що CodeKit знає про цей новий файл. На жаль, у цих ранніх скрінкастах CodeKit іноді займає деякий час для оновлення, що згодом я виявляю лише тому, що у мене є один конкретний проект із занадто великою кількістю файлів. Ви можете це виправити, просто звузивши каталог, у якому у вас є годинник CodeKit.
Ми абсолютно розміщуємо область пошуку в заголовку так, щоб вона розташовувалася праворуч і зверху основної області вмісту. Ми регулюємо розмір і розміщення лупи, спеціально націлюючись на піктограму. Ми розміщуємо речі з відсотками, щоб вони щільно відповідали нашому чуйному дизайну. Ми також додаємо :hoverі :focusдержави, тому очевидно, що ви можете натиснути на нього.
Ми закінчуємо написанням JavaScript, який відкриє та закриє область пошуку. Ми могли мати анімацію прямо в JavaScript (оскільки ми використовуємо jQuery), але натомість все, що ми робимо, це змінювати імена класів на CSS. Це те, що я люблю вважати "CSS на основі штату", де JavaScript просто контролює імена класів, які декларують, в якому стані знаходиться сторінка (або область), а CSS контролює, як виглядає сторінка в цьому стані (і як вона туди потрапляє) ). Це означає, що ми робимо такі речі, як переходи в CSS, що, на мою думку, вони належать і будуть набагато кращими в довгостроковій перспективі (тобто переходи CSS апаратно прискорюються, а переходи JavaScript - ні, це лише швидкі ітерації вбудованих стилів).