Quick Metro CSS Toolkit

I thought it would be fun to make a Metro — sorry, WINDOWS 8 MODERN STYLE — user interface in HTML+CSS.


It’s just a rough thing. Inaccurate but unmistakable. Take a look at the source (press Ctrl+U on the page), I think it’s nice to work with. There is no support for icons on tiles yet, but it should be easy to add if you want to. Press F11 to go fullscreen for Metro immersion.

Tell me if this is of use to you! :)

Slabs dot TV

Slabs.tv logo

Slabs.tv logo: The square is a slab, and it's tilted because we're tilted.

My friend Ben and I had been musing on making a comedy site for a while; videos are to Ben what code and… sonnets… are to myself. So, naturally, I was conscripted into hours of unpaid web design and admin duties, and we have emerged — I, scalded from working over a hot DNS — with Slabs.tv.

I could probably do a whole post on the branding and the tribulations of trying to procure an occupied dot-com domain, and that is outside the scope of this discussion. So, take a look at the website; it is herein appraised!:

Site design and accessibility

The first thing you notice if you’re a design-y sort of person is League Gothic. Try and escape this typeface. You cannot! It is not possible to evade the clutches of it and its bold, tall, gothic brethren, unless you entirely sequester yourself from the graphical web. If you highlight the text of the logo, imagining for a second that it is not an image, you will notice that it works! This is a trick I learned from Erica Greco’s website, and it aids accessibility for people with screen readers or text-based browsers like eLinks.

Blue is the easiest colour for which to design. Well known fact, that. I set it off against a sandy background and used a Photoshop tutorial on torn-paper edges to get the horizon at the top and the tabs. Ben said from day one that we should have a torn paper design, and I agreed. Rightly? You decide!

The site is much tidier than I had planned, quite sober, but I don’t think it loses out for that reason. An advantage is that if you zoom your browser in or out 5 steps (CTRL + Mouse scroll wheel, then CTRL + zero to return to normal) all of the content panels stay in proportion, so the site shows well on very big – or very small – displays. This is key to web design.

Financial and technical

As for the hosting, the whole shebang is on the same server as SteGriff.co.uk (which you might have used to get here today), and Ben pays 40% of my hosting costs. This is “reselling”, and does not contravene my host’s term and conditions (which is strange, I thought, but I’m not complaining). The Slabs.tv domain would cost £30/year from my host, so I got it from a different provider (123-reg.co.uk) for £10/year and messed with the nameservers until it pointed in the right direction.


Things like this are what I do. I am nowhere near pro at web design, but I have experience and problem solving skill. If you want to pay me to make you a website, that would be great! I design sites with accessibility and low-download size in mind, without compromising aesthetics (I hope).

Here are some other sites which I want to talk about in the near future:

Le Game – IP Shortening

Cloud Tools

In closing, I make no apology for the length of time between blog posts. You do however, get this nice lampshade.

Embedding Google Web Search

I was building a new personal home page portal today. I keep one at http://my.stegriff.co.uk and set it to my home page everywhere. I wanted to incorporate a Google web search, for those places (college) where some units have IE6 (and therefore no search bar in the top right on which I rely).

I went through many complex possibilities, many of which were not appropriate. Examples are Google Site Search, its free derivative, Google Custom Search (after I realised that ‘site search’ was premium), and Google Search AJAX API. The API was really neat, but not deep enough for what I wanted. Preferably, I wanted to actually be directed to a Google search results page, rather than just have the API panel expand to show results. It also gave you very little design versatility.

Later, I searched for embeddable Wikipedia search code. The simplicity of the form was what I wanted with my Google search. I used my Firefox bar to search Google, and realised that the resulting URL was in a similar format, etc…

I decided on the following:

<form action="http://www.google.co.uk/search" method="get">
<input type="text" name="q" size="28" />
<input type="submit" value="Search" />

Which works nicely, as you’ll see if you follow my top link.

The right hand panel serves the same purpose as the whole page used to; my frequently visited sites.