Creating my theme

Work­flow, tools and inspi­ra­tion used to build MarieHogebrandt.se

So, back in Decem­ber of 2012 I bought the domain name mariehogebrandt.se, with the intent of replac­ing web­page I’d had pri­or to that, which was host­ed through my broth­er-in-law and my sis­ter. I’d already start­ed some­thing like blog­ging on anoth­er of my domain names, Melindrea.net, but it was only in Swedish, and I knew I had to do some­thing about it. As you might know, the plan for this site is to have it both in Eng­lish and Swedish, but let’s not get ahead of our­selves. I want to start this series with explain­ing what went on before I touched a sin­gle line of code.

Design and content

I agree ful­ly that “con­tent is king”, so I knew that before I could come up with a design, I would need to decide what kind of con­tent I was want­i­ng. I came up with the fol­low­ing list on what I want­ed my site for:

  1. Pre­sen­ta­tion of myself. Why have a page with my name on it with­out sell­ing my own brand, so to speak?
  2. Arti­cles and tuto­ri­als on var­i­ous things in tech­nol­o­gy. I enjoy writ­ing, and I real­ly enjoy pro­gram­ming, so I knew I want­ed to use my site as a tool to pub­lish arti­cles that I hope oth­ers will enjoy and get use out of as well, espe­cial­ly with the focus in Web cur­rent­ly on using Apple prod­ucts. I don’t at all mind Apple, but I enjoy my Ubun­tu.
  3. Var­i­ous dis­plays of my cre­ativ­i­ty, such as links to projects on Github and oth­er places, a gallery of Deviant Art images (WIP), role play­ing char­ac­ters and maybe the odd poem or sto­ry.

What this con­firmed to me is that a major­i­ty of my con­tent is text, which means that the typog­ra­phy is impor­tant, which has already been cov­ered. I also knew that I want to stray from some of the more flam­boy­ant designs I’ve made, while still show­ing who I am.

History

Let’s back up for a moment. I’ve been doing web­pages for over half my life. When I did my first few, we used frames. I moved from there to tables, and final­ly over into CSS. I idolised CSS Zen­gar­den (though seri­ous­ly, who didn’t?!?), and wished I had the graph­i­cal design back­ground to pull that off.

In time for grad­u­a­tion I fin­ished a design that looked like pic­tures of the ocean hang­ing on a wall, but it wasn’t respon­sive. A shame, real­ly, because it was pret­ty. Going from there I mused a while the idea of using a bunch of tabs on the side of a fold­er as a design idea, but it became too messy, too com­pli­cat­ed. In the end I decid­ed on the sub­tle effects in the cur­rent theme.

Typography

The first ver­sion of the typog­ra­phy was before I read The Ele­ments of Typo­graphic Style, with Geor­gia as body­text, paired with Play­fair Dis­play by Claus Eggers Sørense. Geor­gia has grown on me late­ly, I like its round forms and beau­ti­ful numer­als, and Play­fair Dis­play — espe­cial­ly in its bold­est form — com­pli­ment­ed it quite nice­ly. How­ev­er, when I saw Cal­en­das Plus by Atipo, I pre­ferred it to Geor­gia for body­text, and it was too dif­fer­ent from Play­fair Dis­play to play fair with it, so to speak.

At the time of me final­is­ing the typog­ra­phy I had also read The Ele­ments of Typo­graphic Style and decid­ed I liked some of the dif­fer­ent head­ings and sug­gest­ings it put forth. To me, the cur­rent type is some­what whim­si­cal and not quite mod­ern, while also not (hope­ful­ly) being too dat­ed.

Of course, Cal­en­das Plus is not very suit­ed for code. That is why I for all the code sec­tions use Source Code Pro by Adobe, which hap­pens to be the same font I myself code in.

Grid considerations

Using a grid when design­ing does make a lot of sense, but I want it to be eas­i­ly made respon­si­ble. I’ve read about oth­er grids (and tried some but not all), but I decid­ed on using the Gold­en Grid Sys­tem. It’s not the first time I’ve used it, and it’s sim­plic­i­ty fits my needs. It can require a bit of extra effort in get­ting back­grounds of the box­es to work togeth­er, and it’s not a grid sys­tem with pre-defined class­es, so if one wants some­thing clos­er to that one need to define them one­self.

I use the class l-container as the class on every ele­ment that should be, well, a con­tain­er, and a cou­ple of dif­fer­ent class­es to set how it behaves at var­i­ous break­points. The sys­tem uses padding and bor­der-box to get the per­cent­age cor­rect, but that leads to the issue that if one, as I did, want to have a back­ground on ele­ments, with a vis­i­ble gut­ter. To solve that, I have an inner ele­ment (with the class inner) which has the actu­al back­ground.

Cur­rent­ly, I have three dif­fer­ent lay­outs. content-first is the lay­out with a side­bar to the right of the actu­al con­tent, content-text is a sin­gle col­umn with a lot of padding, to be used for pure text con­tent, and content-media is to be used for gal­leries. There is not as much padding, since images should fill out the area more.

Colour scheme

I love green­ish-blue shades, and I set­tled for the shade #00AE68. The theme uses dif­fer­ent shades of the tetrad orig­i­nat­ing from it, as seen at Col­or Scheme Design­er. The shades for body copy and head­ers are dark­ened ver­sions of #007144, while not being pure­ly black, to keep the scheme sol­id. I want­ed to keep the site fair­ly light, but with at least some­thing going on, which is why I went with a Sub­tle Pat­tern called Exclu­sive Paper.

Putting it together

The next few arti­cles will cov­er more in detail how I went about, with Grunt tasks and the var­i­ous scripts that went into it, as well as how I sep­a­rat­ed the work­flow into “fron­tend” and “back­end”.


For the moment comments are not enabled, but feel free to reach out on Twitter.