Fumseck

An identity in colors and typefaces

I fell in love with \(\LaTeX\), the document typesetting system, when I started using it for reports and theses in college. I was immediately attracted by its elegance and simplicity. I also found the idea of compiling a document really cool.

I wanted this site to reflect who I was, and when I found out that Computer Modern, the family of typefaces designed by Donald Knuth for \(\TeX\), had been ported to other font formats by the GUST e-foundry (under the name “Latin Modern”), I knew those were the Chosen Ones.

I also loved the fact that I could use different typefaces from the same family, meaning I could, for example, mix a Serif and a Sans serif typeface that would nonetheless be consistent with each other. Additionally, Latin Modern fonts come with true variations like bold and italics. And have I mentioned how beautiful they look?

If you’re using a reasonably modern browser, you’re seeing those typefaces right now, loaded as web fonts if you don’t already have them installed on your computer. I’ve used a large base font size because I dislike having to zoom in on so many web pages, even if I have excellent vision.

The color scheme was the other main choice to make regarding the overall appearance of the site. There wasn’t much to think about there, though. I knew from the start that I wanted to use Ethan Schoonover’s Solarized palette, which I’ve been using in a variety of documents since I discovered it in 2011.

Solarized is an awesome color scheme with a lot of cool features, notably a soft contrast and the ability to switch between a light and a dark background with minimal changes. I have plans to create an alternate style sheet based on the dark version of the color scheme, and perhaps a high-contrast version as well: I like the soft tones of Solarized, but the contrast may be insufficient for some people.

Last, since I post content in both English and French, I wanted the browsing experience to be as enjoyable in either language. Not all the content is available in both languages, but I wanted the interface to be fully localized. The theme is therefore written in English, but fully translated and localized into French.

Discovering and experimenting with SASS

One of the first things I did for this project was to learn how to use Sass, the CSS extension language, and its associated framework, Compass. I read the book Sass and Compass for Designers by Ben Frain in two days, and started writing Sass files right away. I loved the concept of a CSS preprocessor, because of the modularity and reusability it provided.

Then, I moved on to coding the PHP templates for the different types of pages. Creating the responsive grids and layout was made easy with the Susy framework.

PHP templates

The layout for image posts was a bit challenging, because I wanted to take advantage of the room available on wide viewports while keeping a logical information hierarchy on smaller screens. I also wanted to extract and display some photo-specific information, like photograph metadata (f-number, exposure, etc.).

The layout for image posts was also challenging in that it needed to accommodate both landscape- and portrait-oriented pictures. I experimented a bit with responsive images and played around with <picture> and src-N, until it appeared that there was still no foreseeable consensus regarding their implementation in web browsers.

Bootstrap and the path to LESS CSS

I had completed much of the PHP templates and a reasonable amount of styling when I started working on the header and menus. I thought at first that I’d use a couple of JavaScript libraries to handle the interactive behavior, but I finally settled on moving to Bootstrap because it provided most of what I needed. I was already using the icons from FontAwesome, so it made sense to use tools from the same family.

Bootstrap is written in LESS CSS, another CSS extension language. I didn’t want to maintain CSS in two different languages, so I converted all my SASS files to LESS. I didn’t know the LESS syntax at first, but it turned out to be very similar to that of SASS, so switching to it was relatively painless.

I converted the Susy-based grids to Bootstrap’s layout system, at first by adding the relevant CSS classes directly to the HTML. This solution felt messy, though, and after a little investigation, I managed to move the Bootstrap grid elements to the CSS by importing the definitions and compiling the stylesheet.

More PHP templates

Once that conversion was done, I finished the header and continued to add the remaining PHP templates, like archive pages and custom page templates. I did a lot of fixing and tweaking, added navigation links, menus, and a custom language switcher for WPML, the WordPress plugin I use to provide a proper multilingual site. I also looked into theme localization, .mo and .po files, and translated and localized the theme’s interface.

I usually use a GPS logger when taking pictures, so that I can then correlate the files and geolocalize the pictures by embedding the GPS geographic coordinates into the photo files. To reuse that data automatically, I implemented a feature in the theme that extracts those coordinates, converts them to a human-readable format and displays them on the photo’s page; there is also a link to the location on OpenStreetMap based on another coordinates format.

Going live

After some more tweaking and a lot of testing, I eventually enabled Fumseck on this website in mid-December 2013, and it’s been working great since then.

Fumseck was my first WordPress theme written from scratch; I had barely done any PHP coding before, and my CSS skills were very limited. There are still plenty of small things I want to fix or improve (such as a better interface for the comments, instead of the one provided by WordPress) but I’m really happy with the result.

I feel this theme is a genuine reflection of my personality and my tastes, and I really enjoy publishing content and navigating the site. I hope you’ll find the browsing and reading experience as enjoyable as I do.