In the years which have passed since last updating my site the landscape of the web evolved greatly. I’ve grown increasingly unnerved by how thinly my stuff has begun to spread around. So, in an effort to simplify and reduce, earlier this year I decided to give my work a proper home.

My biggest problem has always been the upkeep—the perpetual problem of a designer—and that was something I was keen to turn around. So in an effort to reel in this problem I set out to create a platform for the site from which I can grow, change and adapt, hopefully, as quickly as I do.

Given the amount of time I'd had to think I had a fairly good idea for what I in mind. Design wise I really wanted to start off with a solid foundation. This meant going back to the fundamentals: typography and grids.

Typography

I'd recently spent a bit of time looking at my branding which involved reviewing the typography. Ultimately I landed on Gotham and Mercury. Pairing the serif and sans-serif—both by Hoefler & Co.—gave plenty of flexibility whilst keeping a consistent base from which to design from.

It was also my first real project experimenting with rem. I’d never really jumped onboard with ems—usually just sticking to px—though they've become increasingly less than ideal. I’ve outlined the basics of the typography:

html {
    font-size: 54%;
    @media screen and (min-width: 600px) {
        font-size: 62.5%;
    }
}

body  {
    font-size: 2.2rem;
    line-height: 1.45;
}

Typically 1em is equal to 16px. I set the base size to 62.5% which gives a more predictable: 1em = 10px; or in the case of this site: 2.2rem = 22px. So all I do to change the font size is update the base percentage and everything scales nicely. Setting the line-height as a unit independent value means that gets scaled at the same time. Nice and simple!

Grid

There’s still yet to be a perfect solution for grids on the web, though for this version I wanted to try something different. Flexbox—whilst not the semantically ideal option—has proved to be a good alternative. (Note: Site analytics suggests that browser support is good for the traffic I’d expect).

One breakthrough moment was the discovery of placeholder selectors. This had repercussions across the board though in particular for the grid. I’m not huge on mixing markup and presentation logic as many CSS frameworks suggest. That typically meant repeating blocks of code, which isn't great, though placeholder selectors have a big advantage: they only get complied if they get called via @extend. I was astounded by the amount of code it was able to reduce, in fact some suggest only using placeholder selectors when extending. It works something like this:

%group:after {
  content: "";
  display: table;
  clear: both;
}

.about {
    @extend %group;
}

A more complex example used in my website for the grid:

@for $i from 1 through 12 {
    %grid-#{$i} {
        flex: 0 0 calc(( 100% / 12 ) * #{$i});
    }
}

.about {
    @extend %grid-4;
}

For some of my stylesheets this equated to a 90% saving on the compiled CSS!

Development

The backend of the site is now driven by Kirby—a flat-file CMS. I've used it for a few projects recently and find myself enjoying it more and more every time. I can't stress the importance of finding a suitable CMS, and Kirby is natural fit for a project such as this.

It was also the first decent project project where I’d been able to use Grunt. Now I can’t imagine not using it. I continue to fiddle with the setup though I’ve currently got it running tasks like compiling and compressing files, livereloading; it even spins up a little server. It’s completely removed the need for several other tools in my workflow which always feels great.

One thing I’m yet to be satisfied with is deployments. It’s improved greatly though I still feel there’s room for improvement. Currently I’ve got git installed on my server so I can ssh in and pull down the updates; I’ve also set up a post commit hook to automate this process. Though the designer in me thinks this could be easier, something I'll definitely look into.

Process

In terms of the overall process one of the biggest breakthroughs was allowing for a reflection period—time to step away from the project—really helped to give a fresh perspective. It’s so easy to get caught up in the process of ‘getting things done’ that we over-look simple problems—how many times have you visited old projects to find things you’ve overlooked?

As a first I decided to invite criticism. That's right, I actually asked people what they didn't like, and the difference was astounding. In almost every case they came back with fantastic constructive criticism and the project’s better off for it; definitely something I’ll be continuing down the track.

That’s my recap of the project for now. So go on, have a poke around; there's not much here yet—though if all goes to plan—hopefully there soon will be.