Tag Archives: Design

Solar Theme for Ghost Blogs

Oct 17, 2013 by Matt | Posted in Design, Featured 141 Comments

Need a stylish new design for your Ghost blog? Looking for something that puts your content first, with an emphasis on reducing eye strain? Allow me to introduce my new theme (which is technically a port of the one I made for Jekyll), based on the Solarized color palette. It includes stylesheets for the default light-on-dark version, and for the alternate dark-on-light one.

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

Download it here (or clone it on GitHub)
Upload the solar directory to your Ghost blog’s content/themes folder.
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.

Setting Up a LESS Workflow in Sublime Text

Aug 28, 2013 by Matt | Posted in Design, Featured 109 Comments

LESS has been a popular way to streamline your CSS-writing for a while now, but fitting it into your workflow isn’t always easy. Some designers use standalone applications like CodeKit or SimpLESS to compile their LESS files into browser-ready CSS, but I prefer a more integrated approach. Fortunately, Sublime Text—my personal favorite text editor has several available extensions to build LESS support in.

Continue reading →

How to Enable Curly Quotes in Jekyll

Jun 26, 2013 by Matt | Posted in Software & Scripts No Comments

I recently migrated one of my blogs from WordPress to Jekyll and painstakingly ported my custom theme to the new blog engine. I didn’t notice it at first, but Jekyll makes a major typographic faux pas by default: it uses ugly, straight “typewriter quotes” instead of converting them to proper “curly quotes.” (Sometimes you’ll see them referred to as “smart quotes.”)

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.

Solar: A Jekyll Theme Based on the Solarized Color Palette

Jun 19, 2013 by Matt | Posted in Design, Featured 82 Comments

I’ve been having fun playing around with Jekyll and Ruby lately, which has lead to a sudden increase in the number of repositories on my GitHub profile. After converting my personal blog and porting its theme over, I thought it would be fun to build a fresh theme and release it to the public.

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.

CSS Zen Garden Returns

May 15, 2013 by Matt | Posted in Design No Comments

It’s been ten years since CSS Zen Garden launched with its goal to excite and inspire people to build creative designs with the much more limited tools CSS offered at the time. A decade later, it’s back. Given how the CSS landscape has changed since the original CSS Zen Garden, it will be interesting to see what people create with the new requirements.

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]

Not All Skeuomorphs are Bad

Feb 27, 2013 by Matt | Posted in Design No Comments

There has been a significant backlash against the design concept of skeuomorphism lately. So much that the term has started leaking into the vocabularies of commenters on tech blogs. Users are calling for Jonathan Ive, as the new leader of human interface design at Apple, to put an end to the usage of skeuomorphism in their software.

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: A Free and Speedy WordPress Theme

Jan 30, 2013 by Matt | Posted in WordPress No Comments

Smashing Magazine recently released a new WordPress theme that’s definitely worth a look. Frank, as it is called, is a lightweight and elegantly simple theme that’s designed for very fast loading times. It boasts a JavaScript dependency of zero, and no external images to speak of. Instead, it makes use of SVG for icons and such. The final page size for a fresh install ends up being 30KB, or 9.5KB gzipped.

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]

A Strange and Sudden Design Trend

Dec 12, 2012 by Matt | Posted in Design One Comment

It’s weird. Practically overnight, several major blogs rolled out similar redesigns that follow this emerging trend that Usability Post has documented. Suddenly, Mashable, The Next Web and ReadWriteWeb all have new designs that feature prominent top bars (which are primarily statically positioned), responsive designs that fill the viewport, flat colors, big image, and annoying columns that scroll independently from the rest of the page.

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.

Continue reading →

Jakob Nielsen Slams Windows 8 Usability

Dec 5, 2012 by Matt | Posted in Design No Comments

I’m not normally one to agree with Jakob Nielsen, but he really hit the nail on the head with his fresh rant panning Windows 8. He has seven main complaints, from the “double desktop” inconsistency and low information density to the overly flat UI making it difficult to determine what is and isn’t an interactive element.

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]

Tag Archives: Design

Installing the Theme

TweetRoll