Advertisement

5 Awesome Ghost Themes You Can Learn From

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

With the world near-saturated with the success of WordPress, along came Ghost, 2013's new blogging platform of note. Born from a simple concept, the project was successfully backed with nearly £200,000 of Kickstarter pledges and released to the world as an alternative open source platform.

Much like WordPress, Tumblr or any major blogging platform, Ghost is supported by an ever-growing community of themes to customize the appearance of your blog. In this roundup, we're going to take a look at a handful of some of our favorite Ghost themes and analyse why they work so well.


RAIN

RAIN is a beautiful Ghost theme and one of the highest-selling available on ThemeForest ($22).

RAIN is described as a "minimal Ghost theme for writers", opting to put actual content upfront while hiding the traditional surrounding chrome in a toggle-able menu. RAIN dedicates half of its available real estate to the post title which remains static as your scroll through the body of the post. The title is backed by a user-definable background image with a subtle mist and raindrop effect automatically applied, an effect that some would judge as superfluous but is otherwise unobtrusive, creating the namesake of the theme.

RAIN

By opting to hide navigation away and forego much of the traditional surrounding content often found in designs, RAIN is able to take advantage of the free space to present the body of posts in a large serif typeface that doesn't make it suffer at the bottom of a design's visual hierarchy. As Ghost doesn't provide countless fields of metadata like WordPress, individual posts are left uninterrupted by all but the publishing date and author's name appended cleanly to the end of each entry.

RAIN-2

RAIN is also responsive, a feature that is increasingly important in most websites. At higher resolutions, RAIN is shown in the split-style view shown in the preview image above. On narrower resolutions, such as that of a portrait tablet or smartphone, RAIN smoothly condenses down into a single-column presentation that keeps one of its most important elements, typography, in proportion with the end user's viewport so it remains legible and easy to read at any scale.


GhostScroll

GhostScroll (free) is a little different to most Ghost themes that you'll encounter. Rather than being designed to host a continuously-updated series of blog entries, GhostScroll provides a design to easily set up a "quick one page for personal or promotional uses". Each post in your Ghost installation takes the place of a section of the one-page design, each alternating in background color for easily identification of the boundary of individual sections.

GhostScroll

One of GhostScroll's best features is how it handles navigation. Users can simply scroll through the page manually or, alternatively, the modifiable buttons at the top of the design with smoothly scroll to the desired section. When users scroll past the introductory section, a static menu drops in at the top to allow easy navigation through posts. While GhostScroll would not be suited to a site such a personal blog with a continually-growing number of entries, it's perfect for managing a single, static page with intuitive navigation.

GhostScroll shows how Ghost can be utilized as a lightweight CMS of sorts and shows one way of going about that.


Heimdallr

Heimdallr ($16) is a lightweight theme for bloggers that's dominated by posts and nothing else. The single-column features a liberal use of negative space which, like many available Ghost themes, puts the focus entirely on the vertically-listed posts. Without a wealth of visual clutter, Heimdallr is logically fluid, responsive down to the narrowest of sizes while maintaining the same overall layout and look.

heimdallr

Heimdallr is clearly focused on text-heavy posts so typography is a very well-respected element in the design. Titles are clearly distinguished by their size, weight and even their omission of serifs in the typeface while the core body text is presented in a spacious rendition of the Merriweather font. Heimdallr does a great job at executing a really readable, clean design that appeases writers and readers alike.

heimdallr-2

Heimdallr also takes advantage of CSS3 animations to add a degree of motion to the design. Upon load, the page's content fades in, sliding upwards into position to create a nice effect (though one that doesn't keep users frustratingly waiting). Furthermore, Heimdallr features infinite scrolling to avoid excessive pagination or extra action for the end user, presenting a shaking note when the user reaches the conclusion of all the available content.


Negative Space

Negative Space ($16) is further exemplification of just how common minimalism is used as way of creating beautiful Ghost themes. As the name suggests, Negative Space is a theme that limits itself to using a combination of black text and white space to create a really clean, type-intensive design. The initial list of posts on the index page opts to omit the traditional convention of a truncated preview and "read more" link in favor of, in a large form, simply listing post titles.

negativespace

When you get into the body of a post, the clear, visual hierarchy of text is all to it. Headings are marked by larger, heavier type and lower-level text is both sizeable and readable. Negative Space's demo site uses exclusively grayscale images to show off the theme as a great monotone design although any color could be theoretically used as an accent alternative to black.

negativespace-2

Of course, Negative Space is also a responsive size and works great at any size or resolution. At smaller scales, such as that of a smartphone browser, Negative Space is one of the better available designs, presenting content in a clear way that's friendly to a more fast-paced style of reading while being able to maintain all of the design features that makes Negative Space great.


Mantanization

Mantanization ($18) describes itself as a "minimal" Ghost theme but, while, in a general sense, that's true, it's one of the more "full" Ghost themes around. Rather than the incredibly minimal, one-column convention that's common to many Ghost themes, Mantanization features collapsible sidebar elements in addition to the main column of content, showing how Ghost can be used for a more traditional blog layout.

mantanization

Mantanization is also a great example of flat design, opting for a Metro-esque look with sharply boxed-off boundaries for individual posts and the components of the sidebar. Just as Ghost avoids much of the extra clutter of its rival blogging platforms, Mantanization foregoes unneeded embellishments like shadows and gradients to instead focus on flat design that uses colour as a means of contrast between elements on the page.

Mantanization is very customizable to boot, offering a range of color configurations and a choice to position the sidebar on the left or right of posts. For the end user, a welcome degree of customization is also offered, with each section of the sidebar able to be collapsed down to just its heading.

mantanization-2

Unlike most other Ghost themes, Mantanization puts author data - including full author details such as a biography, website URL, email address and location - and the publish data upfront next to the body of posts, again showing how Ghost can be equally used for multi-author, time-sensitive content as it can for individual writers and photographers publishing their work online.


Conclusion

Ghost is still in its infancy but already has a large community of themes available. If you're designing your own, for private use or sale, these five themes show how designs can fully embrace Ghost's ethos of simplicity while still servicing all the traditional needs of a blog.

If you've happened across any of great Ghost themes doing something special, be sure to share them with us in the comments!

Advertisement