Ahora que hemos editado con Photoshop lo que esperamos lograr con el área de búsqueda, nos dispusimos a construirlo con HTML y CSS. Ya tenemos nuestra fuente de iconos cargada, así que la colocamos en la página. Font Explorer X nos ayuda a mostrar el carácter HTML adecuado para usar en la lupa.
Agregamos el marcado a nuestro archivo de inclusión de encabezado e iniciamos un nuevo archivo Sass (_search.scss) para escribir el CSS para esta nueva área. Nos aseguramos de que CodeKit conozca este nuevo archivo. Desafortunadamente, en estos primeros screencasts, CodeKit a veces tarda un poco en actualizarse, lo que más tarde descubrí es solo porque tengo un proyecto en particular allí con demasiados archivos. Puede solucionarlo simplemente reduciendo el directorio en el que tiene CodeKit watch.
Posicionamos absolutamente el área de búsqueda dentro del encabezado para que se coloque a la derecha y en la parte superior del área de contenido principal. Ajustamos el tamaño y la ubicación de la lupa apuntando específicamente al icono. Colocamos las cosas con porcentajes para que encajen perfectamente con nuestro diseño receptivo. Agregamos :hovery también :focusestados para que sea obvio que puede hacer clic en él.
Terminamos escribiendo algo de JavaScript que abrirá y cerrará el área de búsqueda. Podríamos haber tenido las animaciones directamente en JavaScript (ya que estamos usando jQuery), pero en cambio, todo lo que hacemos es cambiar los nombres de las clases en el CSS. Esto es lo que me gusta pensar como "CSS basado en el estado", donde JavaScript solo controla los nombres de clase que declaran en qué estado se encuentra la página (o área), y CSS controla cómo se ve la página en ese estado (y cómo llega allí ). Esto significa que estamos haciendo cosas como transiciones en CSS, que es en mi opinión donde pertenecen y será mucho mejor a largo plazo (es decir, las transiciones de CSS son aceleradas por hardware, mientras que las transiciones de JavaScript no, son solo iteraciones rápidas de estilos en línea).