Building Atomeye

• Design
• Gulp

Like most designers I’m perpetually dissatisfied with my website. I’ve probably rebuilt Atomeye every 18 months or so, trying out new designs and technologies. Here’s how I constructed this most recent overhaul.

Gulp

The popular methods for building websites and blogs seem to have gone full circle. Years ago I started Atomeye with flat HTML pages with no server-side processing. From there I moved to PHP, then a CMS called Textpattern using a MySQL database, and more recently to a no-database PHP “app” called Stacey.

Popular again is flat HTML. Static site generators — Middleman, Nanoc, and Octopress are among the established ones — seem to pop up everyday. There are probably hundreds. The Ruby-based Jekyll has emerged as a front-runner and it’s the one that, at least for a while, I found best fit my minimal needs. Designed specifically for blogs it offers a no-frills, straightforward method of combining Markdown-formatted text files with HTML templates.

But I wanted more control and Gulp’s modularity is perfect for rolling your own. Among the packages I’m using:

• Nunjucks Javascript templating language from Mozilla.
• Front Matter Extracts YAML Front-Matter header from files and makes the data available for use in the templates.
• Highlight Injects classes to pre code blocks for syntax highlighting using highlightjs.
• BrowserSync Live injection of CSS and reloading on rebuild.
• Node Sass Uses Libsass for wicked-fast Sass compilation.
• Autoprefixer Simple way of adding prefixes without having to use mixins.

Node Sass

As I described in my post Sass & Compass: Why The Hate?, CSS has changed very little in the last 15 years or so. Many of the programming options we take for granted in “real” languages — if/then statements, for loops, variables — have never been a part of CSS and there’s little hope will see it anytime soon. Sass provides a much-needed injection of power that, when used correctly, can be a tremendous time saver.

I previously used Ruby Sass with Compass but have since moved on to using Libsass. It's considerably faster and adding in extras like autoprefixers and minimizers is easy and clean.

Web Fonts

In the last few years there’s been an explosion of options for rendering fonts on the Web. No longer limited to the standard “web-safe” set, with a few clicks you can slap web-optimized versions of the most famous print fonts right onto your site.

Having been acquired by Adobe, Typekit is probably the most famous of the group. Along with Typekit, Webink, MyFonts, and Webtype are among the many paid services that make their libraries available for a yearly rates, ranging from $15 to $100 depending on your site’s page views an the number of fonts you want to use.

If you want to avoid the cost there are open-source options but be prepared to do some digging. At the top of the list is Google Web Fonts, which is by far the the easiest to use but is essentially the Thrift Shop of Web Fonts. You have to sift through a lot of crap to find a few nuggets. Other open-source offerings worth considering are Font Squirrel, similar in size to Google Web Fonts, and The League of Movable Type which contains a much smaller, vetted collection. Though it’s ironic that they render their Manifesto — “Here you’ll find only the most well-made, free & open-source…fonts” — in decidedly non-open-source fonts from Typekit.

On this site I’m using PT Serif for the headings and body copy and Apple’s San Francisco for the sans font.