Agora que fizemos Photoshop o que esperamos realizar com a área de pesquisa, começamos a criá-la com HTML e CSS. Já carregamos a fonte do nosso ícone, então a colocamos na página. O Font Explorer X nos ajuda a mostrar o caractere HTML adequado para usar na lupa.
Adicionamos a marcação ao nosso arquivo de inclusão de cabeçalho e iniciamos um novo arquivo Sass (_search.scss) para escrever o CSS para esta nova área. Certificamo-nos de que o CodeKit conhece este novo arquivo. Infelizmente, nesses primeiros screencasts, o CodeKit às vezes demora um pouco para ser atualizado, o que mais tarde descobri que é apenas porque tenho um projeto específico com muitos arquivos nele. Você pode consertar isso apenas restringindo o diretório no qual você tem o CodeKit watch.
Absolutamente posicionamos a área de pesquisa dentro do cabeçalho de forma que seja colocada à direita e no topo da área de conteúdo principal. Ajustamos o tamanho e o posicionamento da lupa, visando especificamente o ícone. Posicionamos as coisas com porcentagens para que se encaixem perfeitamente em nosso design responsivo. Nós adicionamos os estados :hovere :focustambém, então é óbvio que você pode clicar nele.
Terminamos escrevendo algum JavaScript que irá abrir e fechar a área de busca. Poderíamos ter feito as animações certas no JavaScript (já que estamos usando jQuery), mas em vez disso, tudo o que fazemos é mudar os nomes das classes no CSS. Isso é o que eu gosto de pensar como "CSS baseado em estado", onde JavaScript apenas controla os nomes de classe que declaram em que estado a página (ou área) está, e CSS controla a aparência da página nesse estado (e como ela chega lá ) Isso significa que estamos fazendo coisas como transições em CSS, que é na minha opinião onde elas pertencem e serão muito melhores a longo prazo (ou seja, as transições CSS são aceleradas por hardware, enquanto as transições JavaScript não, são apenas iterações rápidas de estilos embutidos).