Recently I've been working on a very bare bones "flexy" css reset to prototype with. After many iterations over the past month it was ready to be put to test. Last night (whilst tuned into the Chrome Developer Summit) I thought it apt to try recreate the google homepage.

[tldr;]

I loaded up google.com as reference and started poking around..

Firstly noted (as I was primarily there to scrutinise layout) the viewport has a min-width of 980px. Whaaaaattttt?! I understand that they have a mobile site and an app but you mean to say google, that if I am on my laptop, then I get served a substandard experience in any window smaller than ~68% of my screen (my resolution is 1440x900). This is quite an ask from the user given such a simple interface, don't you think?

The second immediately obvious (at least to me) faux pas was that the logo/search/button group is not vertically aligned. Not a big deal I guess. Unless you are layout obsessive of course.. then it's kind of a huge deal (especially on my portrait monitor). I understand that not all browsers support flexbox or viewport units and achieving this kind of layout with traditional css could be a bit hacky unless you used a table like layout or some javascript assist (bleughhh). But I am in your browser google, lovely chrome, and it does support advanced css properties like flex and vmin.. and you are google!! I can haz some progressive enhancement please?

I got a bit carried away and further noted:

  • 171 divs on the page (364 elements in total)
  • 1055 unused css styles (according to a dev tools audit)
  • ~34kb of critical css in the head of the document
  • ~6kb external css file
  • 13 image requests

Not all this was relevant data for my mission but quite interesting insights all the same. I knew it wasn't going to be an especially challenging layout to replicate, fixup and flex; a fullscreen view with few enough elements as to not warrant overflow in either direction even on the smallest of viewports (I design down to a 320px square).

What I was interested in finding out was how clean and generic (!specific) could I make this? I'm somewhat a purist when it comes to layout and take a William Morris "Have nothing that you do not know to be useful, or believe to be beautiful" content is everything approach to architecting web pages. Less things means less things to go wrong in my opinion. 364 elements sounded a bit overkill to me and managing them all sounds like hard work too, I wanted to knock that down as I think a good css foundation does not only do it's job but enables and promotes clean semantic markup.

So I started building. My reset consists of a few custom structural elements and some sane resets for common elements like headings/body text, inputs, buttons and the odd mixin. About 20 definitions so far (still very much a work in progress) and ~2kb prefixed.

It took me 30-40 minutes to put everything together before it popped into shape. All in all, I was happy with the process, the reset and the overall output. I completely abstracted structure from content until the very end which nearly made building it feel like a painting by numbers book which was weird but I could get used to it for the ease! I could go on to describe the result but it is probably better just check it out, change it, break it and see if you like it.

Result -> http://codepen.io/lukejacksonn/pen/zvbPGb

I achieved what I set out to do which in summary meant:

  • Responsive down to 320px.
  • Vertically centered logo/search/button group.
  • Scaling font-size and content spacing
  • 3 Class Names
  • No ids.
  • No media queries.
  • 30 Elements
  • CSS 2.8kb (including reset and autoprefixed)
  • 780b HTML
  • 3 Image Requests (~16kb).
  • 1 SVG (1kb).
  • ~20kb Total

I will try tackle a more complex layout next time and see how this flexy reset scales and if (as I strongly suspect it will) it needs building upon. If you want to be kept updated I setup a github repo for the reset.. pull requests welcome!

Repository -> https://github.com/lukejacksonn/Flexy

Thanks for the inspiration and subject matter google, you guys rock.. but if you could just vertical align your logo/search/button group, that would be greaaatttt


779 0 0