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.

That’s right, kittens.

Placekitten serves up a picture of a kitten using the dimensions specified in the URL, along similar lines to Placehold.it, with two options available in case you don’t like the first image available in the specified size.

http://placekitten.com/200/300


http://placekitten.com/g/200/300

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.

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]

If you’re someone like me, who doesn’t purchase every version, waiting years between upgrades, this is a very unpleasant development. (I just moved from CS1 to CS5 during the past year, and the impetus behind that decision was the lack of support for legacy PowerPC software on newer versions of OS X. I upgraded to a newer MacBook Pro, and had to pick up a newer version of Photoshop to go with it.)

The move shouldn’t make huge difference if you already upgrade annually, as you’re basically paying the $600 upgrade fee perpetually, but it’s not great if you prefer to skip versions or buy secondhand.

Existing users for Creative Suite 3 or higher can get a reduced rate of $30/month for their first year, but will have to pay full price thereafter.

It features a chapter on logically marking up page structure with the new semantic tags (header, nav, section, article, etc.), which explains the contexts they should be used in with a hands-on example of restructuring a blog without excessive divs. A lot of online tutorials make the error of suggesting the aside element for a blog sidebar, which the book helpfully points out as wrong. The section element is the proper tag for the job, as it denotes an arbitrary section of the page, whereas aside is for broken-out sections of your article content, such as pullquotes or diagrams.

From there the author moves on to some CSS3 tricks using newly-added selectors. He shows some simple methods to add zebra-striping to tables with pseudo-classes and add visible URLs to links via a print stylesheet with :after. There’s a brief section demonstrating media queries, as well some on the new JavaScript APIs—localStorage and history pushState, for example. There’s even a bit on using cache manifests to set up offline access.

Oh, and the deprecations. HTML5 deprecates a good many tags and attributes. There is a section listing those, as well as some modern alternatives, such as opening links in new windows without the deprecated target attribute. It can be done cleanly and semantically by using JavaScript, without impacting the user’s ability to middle-click a link and open a new tab…which far too many sites still do today. If you do that, you need to read this book just for that reason.

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.

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.)