The theme is responsive, with a little bit of  JavaScript that collapses the left navigation into a <select> box on mobile-sized displays. It supports both uploadable logos (which replace them text-based heading at the top) and cover images, which appear at the very top of the page. Your author bio and profile picture appear in the sidebar when viewing a post page, as well.

Installing the Theme

1. Download it here (or clone it on GitHub)
2. Upload the solar directory to your Ghost blog’s content/themes folder.
3. Go to the Settings page of the Ghost backend and select solar from the Theme dropdown. Save the settings.

Be sure to edit the default.hbs template to add or remove any links you want in the navigation list. You’ll probably want to insert the link to your own Twitter profile instead of leaving it as mine, and maybe add your other social networking profiles.

I will assume that you already have Sublime Package Control installed, since it is pretty much a given for Sublime Text users.

Step 1: Adding Syntax Highlighting

I can’t imagine why anybody wouldn’t want their LESS files to have the proper syntax highlighting, so you probably want to install the LESS-sublime package, which you can find in Sublime Package Control under “LESS.”

Step 2: Installing LESSC

Now you need to install the LESS compiler, but first you need to grab a couple of dependencies.

First, download and install Node.js. NPM (Node Package Manager) should also be installed automatically, so now you should be ready to install LESSC. Simply run the following command:

npm install -g less

Step 3: Installing a LESS Build System

In order to have your LESS files compiled into CSS, you will want to install the LESS-build package. Once it’s properly set up, it adds a Build System for LESS, enabling you to process the files by pressing Control+B (Command+B for Mac users).

After you have installed the package, you need to do a little configuration.

1. Open the package directory by typing “browse packages” into the command palette and selecting the LESS-build folder.
2. Run changeLESSBuildType.bat (Windows) or changeLESSBuildType.sh (Mac/Linux) to set the build mode. Pick option number two (“directory rewrite”) when prompted.
3. In your project, select “LESS” from the Tools > Build System menu.

Step 4: Using Your New Setup

To demonstrate how the finished setup works, I put together a quick project in Sublime Text. My simple index.html references css/mysite.css as its stylesheet. This is the compiled output of many LESS files, which are found in the less directory.

The less/mysite.less file, which is compiled into css/mysite.css when I switch to it and press Command+B, looks like this:

//Load Twitter Bootstrap

@import "bootstrap/bootstrap.less";

//Additional styles would go here

It loads the LESS files that make up Twitter Bootstrap, which are easily tweak-able, since all of the styles are split into different files by sensible categories. Then any styles placed after the import line would override Bootstrap’s if they conflicted, given CSS’s precedence rules.

Fortunately, you can get the viewport width just as easily in JavaScript as with CSS, and can display a different ad unit depending on the page width. This can only happen on page load, though, to comply with the AdSense terms of service. Otherwise you would be breaking the rules by scripting fake page loads, essentially.

You can see how to do it in the Labnol post How to Use Google AdSense Ads on your Responsive Website.

For the uninitiated, straight quotes are a relic from the old days of mechanical typewriters. Rather than have separate keys for the opening and closing marks, they instead used a single key that functioned as both. The single-quote glyph also sometimes served as half of an exclamation point on some models, which would be produced by pressing the backspace key and typing the single-quote over a period.

I’m sure that must have been a constant annoyance to professional typesetters, just like seeing signs printed in Comic Sans today…

History lesson aside, what can we do about Jekyll’s carefree attitude about quotation marks? We could type them manually, memorizing our preferred operating systems’ keyboard sequence to produce proper quotes. But that’s not much of a solution, is it? Shouldn’t a blog engine designed to wrangle Markdown into HTML automatically replace straight quotes for us?

I have good news: it can do just that, and it’s a simple matter of editing the _config.yml file.

Jekyll can use more than one Markdown parser in its build process, and the default one (Maruku) is the most basic of the bunch. If you switch to RDiscount, which has a few advantages, you can enable the SmartyPants plugin, which automatically substitutes proper typographical characters for ones that are easier to enter on a keyboard. (Typewriter quotes become curly quotes, triple-dashes become em-dashes, etc.)

First, you need to install RDiscount.

gem install rdiscount

Now add the following lines to _config.yml:

markdown: rdiscount
rdiscount:
extensions: ['smart']

This switches the Markdown parser to RDiscount and enables the “smart” extension, which should enable smart quotes in your post content. Yay!

Now there’s one problem remaining: this doesn’t do anything for post titles. It only affect the main content. You need to edit your templates to make them Markdown-ready. You need to hunt down every instance of {{ page.title }} and {{ post.title }} and apply the markdownify filter. For example:

<h2><a rel="bookmark" href="{{ page.external-url }}">{{ page.title | markdownify }}</a></h2>

With that change in place, you should get your proper typography in your post titles as well.

Without further ado, I would like to introduce Solar, a theme I based upon the Solarized color palette. It includes stylesheets for both Solarized Dark and Solarized Light, since the colors are defined separately from the page structure. It’s responsive, all the way down to mobile size, and it’s built with link-blogging in mind.

You can view a demo of Solar here, and download it on GitHub. It’s licensed under the GPL, so feel free to fork it and go crazy.

So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to how we would build it these days. If you see an area that needs help, consider sending a patch. (Here’s the current list of issues to resolve, for example.)

10 Years [Mezzoblue]

Unfortunately, they’re just jumping on a trendy bandwagon. Right now, the polar opposite of skeuomorphism is in: flat and simple designs with no gradients, texturing or depth. Basically, print design made digital, as John Gruber put it. But that’s trends for you. People go overboard in one direction and then violently swing the other way a year or two later.

True, there has been some egregious overuse and misuse of the concept recently. A lot of it by Apple. I really don’t know what got into them with OS X Lion and the newest two versions of iOS. A company known for moderation and elegance in their design suddenly starts churning out gaudy and superfluous visual kitsch like the faux-leather calendar in OS X.

There are “good” and “bad” skeuomorphs. A good skeuomorph adds visual cues that a user may already be familiar with in order to give them direction. One example is the desktop metaphor in GUIs. The whole point, in the beginning, was to make it easier for a user to complete tasks tat would otherwise require knowledge of more abstract concepts by using physical metaphors. Instead of updating a file to be a child of a directory, you “move” a file from one “folder” to another. Or drop it into the “trash can” to delete it. I doubt anyone would consider that design choice to have been a mistake.

In contrast, a “bad” skeuomorph would be the head-scratching design of the Podcasts app in iOS 6. It looks like an old reel-to-reel tape deck, complete with spinning reels above the shuttle control. I’d hazard a guess that the majority of iPhone users have never operated a reel-to-reel player before, so it doesn’t really add anything to the application other than visual interest.

On a related note, I wouldn’t consider the usage of textures to be skeuomorphism, despite what some people seem to believe. Apple’s overuse of that grey linen texture isn’t skeuomorphism, however cliché it’s becoming, since it’s not emulating a real-life object. The Game Center app is, with it’s green felt and everything, since it’s emulating the design of a poker or pool table.

I think it’s shortsighted to go running to the opposite end of the spectrum, just because skeuomorphism isn’t always the best tool for the job.

Frank is built atop the responsive Foundation grid framework, and features a layout customization tool that lets you adjust how the homepage is displayed.

Frank: A Free WordPress Theme Designed For Speed [Smashing Magazine]

In my opinion, The Next Web’s is the best, pairing polished visuals with a sense of restraint when it comes to the aforementioned sticky columns. And Mashable’s redesign is certainly an improvement over their last one.

After wondering off and on for a few days about the motive behind the sudden redesigns, I realized where I had seen something a bit similar: the new Digg. Though more sedate, it has quite a few similarities. Going from there, there is one other big redesign that happened quite recently. One that I imagine is going to affect the designs of websites, for better or worse. (Probably worse.) Drum-roll, please.

Windows 8.

Yeah.

Flat colors and icons, lots of images, thin type. Sound familiar? It seems logical to me that some websites would try to mimic the look and feel of the “native” (HTML-based) Windows 8 applications to create a more seamless experience for users of the OS. App-like sites to blend in with the tablets—whether they’re iOS, Android or Windows based—that more and more people seem to be using. Or some designers at least liked the general aesthetic. (Something about that blue top bar in the Mashable design just screams “Windows 8″ to me.)

I’ve long thought that the split between the Desktop and Metro UIs would confuse newbies, though perhaps not so badly as the ARM/x86 issue. A lot of the people who ran out and bought the Surface tablet will probably be irritated when they learn that their x86 software won’t run on it, since the binaries are incompatible with the ARM architecture.

It’s an interesting read.

Windows 8 — Disappointing Usability for Both Novice and Power Users [UseIt]