Matvre v1.0 Deployed

Remember the announcement about Matvre? Well it’s now in production on more than one site. Matvre’s development was somewhat of a learning experience for me as a PHP developer, a designer, and as an Octopress user. If you want to start using Matvre right away you can get the source here or read on to learn about how it works, examples in production, and the technical challenges involved.

How it works

Matvre is pretty straightforward at first glance. Yes, it is nothing more than HTML, CSS, and JavaScript that truly does nothing special on its own. So why would anyone need instructions? Because there are a few gotchas, reading other people’s code can be a chore, and not everyone is an expert. As I mentioned before, Matvre is meant to be an all-purpose design template to fit any site or blog engine. It was developed specially for’s user notes section. I’m big on dogfooding my own work so I implemented it on this site too which is why Matvre comes as a pre-made Octopress template as well.

Usage as a website theme for Wordpress or static HTML

Basically, you’ll just have to cut up the files however you like. If you clone the repo using git clone then, with a local server running, navigate to http://localhost/matvre you can see the single page theme in action. Right now it has some details of my own in it but those really shouldn’t be a problem to replace. They’re just there to give it some content to start with.

Matvre uses LESS compiled to CSS so if you aren’t familiar with LESS you may be slightly out of luck though it’s not impossible to use SASS or plain CSS instead.

There’s only a single HTML file with the entire layout which you’ll need to copy and modify to create separate pages if you use this for Wordpress or a static site.

Usage as an Octopress theme

I wanted to use the new theme on my own blog which runs on Octopress so I developed a special Octopress version which comes with the static version. The Octopress theme is within the octopress/ folder. To use it with Octopress just copy the octopress folder into your Octopress installation’s .themes folder (I recommend you rename it to ‘matvre’ first) then in your terminal, navigate to your Octopress blog’s folder and run rake install['matvre'] (replace “matvre” with whatever name you gave the theme folder when you copied it into .themes/).

The Octopress version also needs to be customized as there are a few of my own personal details in it but it’s really just a matter of messing with a few HTML include files. It uses Octopress’ own Pygments for syntax highlighting which the static version does not. There are differences between the static version and the Octopress version so be aware of that if the two don’t end up looking exactly alike.


Matvre is nothing more than a simple HTML page so how could it possibly be challenging? One word: webfonts (should that be a single word?).

For some reason the Google Chrome team are in no hurry to implement DirectWrite in their browser which means it’s the one browser where you have to really watch your fonts. Internet Explorer versions 7 – 10, Firefox, and Safari all display web fonts beautifully using the standard cross-browser CSS we all know and love but not Chrome (right now anyway). This means I needed to implement a workaround to get the font looking nice and smooth on Chrome without degrading the quality on other browsers. Please note: this issue affects Chrome for Windows only right now.

Matvre uses Fanwood for the body copy and Edmond Sans for headlines and asides. Edmond Sans rendered beautifully using the standard webfont calls but Fanwood did not. Why not just use Fanwood Text from Google Web Fonts, you ask? Because Fanwood Text is slightly thicker and less of a joy to look at on the web despite being made specifically for rendering on the web. I think this has more to do with Chrome and Google Web Fonts than the actual font. I loved the look of Fanwood and there was no way I was going to settle for Fanwood Text so I found a way to make it work.

Instead of calling the SVG font file last, you call it right after the IE font calls and just before the .woff and .ttf files. This allows Chrome for Windows to render the font without being totally jagged and ugly albeit it’s just a teeny bit fuzzier than it should be, but it also causes a few more problems. Firstly, browsers like Mobile Safari end up downloading two font files when all it needs is one. That’s one extra call and a bit of extra load on the server and the client. The solution will also break when Chrome finally does implement DirectWrite. The first problem is acceptable to me right now considering the rest of the site is optimized, the extra font file isn’t that huge, and the client will cache everything after the first load. The second problem is more serious. As of now I don’t know of a workaround but when Chrome finally does implement DirectWrite I think it would be safe to revert back to calling the SVG font file last again. This is because Chrome automatically updates itself. I figure that for the first week of its release we’ll have more people on Chrome without DirectWrite but as people use their browser and it updates itself we’ll get to a tipping point very quickly where the majority of Chrome users will have DirectWrite installed. So again, I’m not too worried about it right now.

Check out this graph tracking Chrome version adoption (from this Ars Technica articla):

Looking at this graph it’s pretty clear that when a new Chrome version is released it doesn’t take much longer than a month before just about all of it’s users get on board. This is why I’m not worried about switching up the webfont hack when Chrome implements DirectWrite. Compare the previous graph with how Internet Explorer users upgrade…

Those guys seem to never upgrade. The Firefox graph looks just like the Chrome graph but they aren’t an issue here.

If you’re really worried about this then an intermediate solution would be to simply stop using Fanwood temporarily (remember, Edmond Sans works without the hack) and simply use the Google Web Fonts version of Fanwood Text for about a month before switching back to the “better” Fanwood.

Converting LESS to SASS wasn’t without it’s moments but that wasn’t too big of a deal. You should read about my idiotic mistake though if you want to laugh.

In the Wild

Matvre has been deployed in two places currently. You’re reading the first implementation which uses the Octopress theme. The second implementation is on’s public pages. I used the exact same method of implementation as I expect everyone else to use here. For this blog I just ran the rake command to install. For I took the static HTML file and broke it up into pieces, created a controller that loaded it up as a view, and then added some template calls into it so it could be dynamic. It doesn’t matter which language I used because the implementation is the same whether you use PHP (I did), Ruby, Python, Mustache, or whatever.

Matvre is supposed to be easy to use but I don’t think it’s for total beginners. It takes just a little bit of experience to be able to reverse engineer it how you like. Anyway, go check it out on! I really want people to sign up for it, it’s a great writing experience.

Design, Web app development,

« The End of the Beginning Show Hidden Files and Folders on a Mac »