Now that we’ve Photoshopped what we hope to accomplish with the search area, we set about building it with HTML and CSS. We already have our icon font loaded up, so we place that on the page. Font Explorer X helps us out showing the proper HTML character to use for the magnifying glass.
We add the markup to our header include file and start a brand new Sass file (_search.scss) to write the CSS for this new area. We make sure CodeKit knows about this new file. Unfortunately in these early screencasts CodeKit sometimes takes a while to refresh, which I later discover is just because I have one particular project in there with just way too many files in it. You can fix that by just narrowing down the directory in which you have CodeKit watch.
We absolutely position the search area within the header so that it’s placed at the right and top of the main content area. We adjust the sizing and placement of the magnifying glass by targeting the icon specifically. We position things with percentages so that it fits snugly with our responsive design. We add
:focus states as well so it’s obvious you can click on it.