Today is that famous day when we were introduced to… Metro CSS UI FW. But seriously now. I have added a new bar to all my published websites, built with the Metro UI CSS framework. How is this bar different from the previous one? The previous one was a plain black bar with a list of websites on the left (some sites showed at most 4 items, and the rest were in a drop-down), and on the right, for a logged-in user, it showed user_login – log out – settings.
The last part was probably only on one or 2 websites. For a user who was not logged in, it showed log in – register – settings. This new bar, however, is more advanced. In its default state, without any extra elements added, it looks something like this:
At first glance, this new bar is taller. The old bar was 25px, this one is 45px. Switching to another website usually takes one extra click. While the old bar usually showed all the websites, here you have to click the first item and then choose the website name. Next come 2 buttons – the first is a link to the current page address, so you can easily find it even if you delete it from the browser’s address bar, and the second prints the page.
No page has CSS print styles yet, but I will take a look at that first thing tomorrow. After that comes a button with the user’s picture, which is loaded from gravatar.com every time the page loads, along with the user’s nickname. If the user is not logged in, only Not logged in is shown without a picture, and clicking it opens the login dialog. The second-to-last padlock icon logs the user out – and logically, it only appears when the user is logged in.
The last one is a drop-down menu with more user settings – for a logged-in user, changing the photo on gravatar.com, otherwise the option to register or log in. With very little code, you can add more things to the bar. Here, for example, you can see dynamically generated element content on the cache detail pages:
Metro CSS UI FW. The websites simply look completely different than they did before, which is sometimes good, but mostly it is a step back in the sense that things do not behave the way I want.