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 :hover and :focus states as well so it's obvious you can click on it.

We finish off by writing some JavaScript that will open and close the search area. We could have had the animations right in the JavaScript (since we are using jQuery), but instead all we do is change class names on the CSS. This is what I like to think of as "state based CSS" where JavaScript just controls class names that declare what state the page (or area) is in, and CSS controls what the page looks like in that state (and how it gets there). This means we're doing things like transitions in CSS, which is in my opinion where they belong and will be far better long term (i.e. CSS transitions are hardware accelerated while JavaScript transitions are not, they are just rapid iterations of inline styles).


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.