След като Photoshopped това, което се надяваме да постигнем с областта за търсене, се заехме да го изграждаме с HTML и CSS. Вече имаме зареден шрифт с икони, така че го поставяме на страницата. Font Explorer X ни помага да показваме правилния HTML символ, който да използваме за лупата.
Добавяме маркировката към нашия заглавен файл за включване и стартираме чисто нов файл на Sass (_search.scss), за да напишем CSS за тази нова област. Уверяваме се, че CodeKit знае за този нов файл. За съжаление в тези ранни екранни предавания CodeKit понякога отнема известно време, за да се обнови, което по-късно откривам, че е само защото имам един конкретен проект там с твърде много файлове в него. Можете да поправите това, като просто стесните директорията, в която имате часовник CodeKit.
Абсолютно позиционираме областта за търсене в заглавката, така че да бъде поставена вдясно и отгоре на основната област на съдържанието. Ние коригираме размера и разположението на лупата, като насочваме конкретно към иконата. Разполагаме нещата с проценти, така че да се вписват плътно в нашия отзивчив дизайн. Добавяме :hoverи :focusпосочваме, така че е очевидно, че можете да кликнете върху него.
Завършваме, като напишем малко JavaScript, който ще отвори и затвори областта за търсене. Можехме да имаме анимациите точно в JavaScript (тъй като използваме jQuery), но вместо това всичко, което правим, е да променяме имената на класовете в CSS. Това ми харесва да мисля като „CSS, базиран на държавата“, където JavaScript просто контролира имената на класове, които декларират в какво състояние се намира страницата (или областта), а CSS контролира как изглежда страницата в това състояние (и как стига до там) ). Това означава, че правим неща като преходи в CSS, което според мен е мястото им и ще бъде далеч по-добре в дългосрочен план (т.е. CSS преходите са хардуерно ускорени, докато преходите на JavaScript не, те са просто бързи итерации на вградени стилове).