Building a Static Admin Bar for the Browser

Moving on from our .psd tutorial, this collection of screencasts will walk you through building our admin bar for the browser. We have a few obstacles to take into account, and we’ll be exploring some interesting ways of getting round them. Let’s get going!

A Couple of Considerations

There are a couple of things we need to bear in mind before we jump into building this. Firstly, our admin bar is going to rob its parent website of some pixels at the top of the page. If the web site beneath happens to have valuable content at the very top, it’s going to be masked by the admin bar. For this reason, we’ll need to push the whole web page downwards to begin with.

Secondly, we need to bear in mind that our CSS is going to be a valid part of the overal web page. If we’re not careful, it will influence styling beyond the boundaries of our admin bar – not good.

Lastly (and related to the previous point), our admin bar is open to influence from CSS belonging to the parent web page. We’ll need to make sure our markup and presentation is completely autonomous.

Note: These screencasts were recorded in high definition, so feel free to hit that HD button!

Part 1: Basic Markup

Let’s kick things off by organizing the project structure, and laying out some basic markup. We’ll also make some significant changes to our reset.css, and take a quick look at what’s involved with using Gravatar images.

Useful Resources

• Eric Meyer’s Reset CSS
• Gravatar.com advice on calling images
• Gravatar.com php hash script

Part 2: Initial Styling

Having set out our markup, let’s now establish some styling to make the whole thing look more recognizably ‘admin bar’. We’ll cover some @font-face usage, including the brilliant Web Symbols font for our icons. During the process we’ll also make interesting use of the :first-child , :last-child, and the seldom seen :only-child pseudo selectors.

Useful Resources

• Google Fonts API Droid serif
• The Web Symbols font, from Just Be Nice Studio
• The Whitey subtle background pattern

Part 3: Yellow Bits

In this video we’ll tackle the yellow priority button, and the little notification sign. We’ll look at CSS3 gradients, transitions, and to help us with the various browser vendor prefixes we’ll examine some useful online tools.

Useful Resources

• Paul Irish’s CSS3 Please!
• Jeffrey Way’s Prefixr web app
• Prefixfree by Lea Verou

Part 4: Search Form Markup and Styling

It’s time to get the search form looking more respectable. We’ll approach it as semantically as possible using the HTML5 input type="search", and then we’ll look at fixing the presentational problems doing so entails.

Useful Resources

• w3.org reference on CSS box-sizing
• w3.org reference on input type=”search”
• w3.org reference on the HTML5 placeholder attribute
• Resetting Webkit’s bizarre search input styling by Glyn Mooney

Part 5: CSS3 Dropdown Menu

We’re now going to use a classic approach to building our dropdown menu in HTML and CSS. We’ll briefly discuss accessibility, and explore some transitional effects to make the whole thing look as smooth as possible.

Useful Resources

• Accessible CSS3 Dropdown Menu by Harry Roberts

Next Time…

We’re nearly done, but there are a couple of details which need sorting out. There’s the tooltip (watch out for that Quick Tip where we look at the HTML5/CSS3 options available to us). We haven’t properly considered cross-browser compatibility yet, and neither have we actually tested our bar within a genuine HTML web page. Plenty still to do then, stay tuned!