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.
Today we’re going to take a look at some Ghost themes, some paid, some free, and see what lessons we as web designers can take away from them.
RAIN is a fascinating Ghost theme and one of the highest-selling available on ThemeForest ($22).
It is described as being a “minimal Ghost theme for writers”, opting to put actual content upfront while hiding the traditional surrounding chrome in a toggle-able menu. On larger screens, RAIN dedicates half of its available real estate to the post title, which remains fixed as you scroll through the body of the post on the right-hand side.
The automatic playing of a rainy audio track however, is questionable.
By opting to hide navigation away and forego much of the traditional surrounding content, RAIN is able to take advantage of the free space to present the body of posts in a large serif typeface, up front and high in the 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.
Toggling the menu hamburger icon, applies a class of
active to the navigation block, which then swings into view through CSS3 transforms. It’s a great effect, and well worth dissecting if you’re interested.
RAIN is also responsive. At wider viewports, RAIN is shown in the split-style view shown in the preview image above. On narrower screens, 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, making it legible and easy to read at any scale.
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 easy identification of the boundary of individual sections.
One of GhostScroll’s best features is how it handles navigation. Users can scroll through the page manually or, alternatively, with the modifiable buttons at the top of the design which 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 ($16) is a lightweight theme for bloggers which is dominated by posts and nothing else. The single-column layout features a liberal use of negative space which, like many available Ghost themes, puts the focus entirely on the vertically-listed posts. The wrapper for its central content grows with the screen, but to prevent poor readability does have a
max-width: 1140px; applied to it.
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 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 industrial sans-serif form, while the core body text is presented in a spacious rendition of Merriweather. Heimdallr does a great job at executing a really readable, clean design that appeases writers and readers alike.
Heimdallr also takes advantage of CSS3 animations adding a degree of motion to the design. Upon load, the page’s content fades in, sliding upwards into position to create a soothing effect (though one which 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 (courtesy of Dan Eden’s Animate.css) when the user reaches the conclusion of all available content.
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 which 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 sidesteps the traditional convention of a truncated preview and “read more” link in favor of, in a large form, simply listing post titles.
When you get into the body of a post, the clear, visual hierarchy of text is obvious. Headings are marked by larger, heavier type and lower-level text is both sizeable and readable. Saying that, given the bias toward whitespace and confident typography, I might have been tempted to boost the
line-height on 16px
font-size to more than the 21px given here.
Negative Space’s demo site uses exclusively grayscale images to show off the theme as a great monotone design, although any color could theoretically be used as an accent alternative to black.
Of course, Negative Space is also a responsive theme 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 which is 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 ($18) describes itself as a “minimal” Ghost theme. While in a general sense that’s true, this is one of the “fuller” 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 is also a great example of flat design (if you subscribe to that), 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 superfluous embellishments like shadows and gradients, instead focusing 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.
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, up front 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.
Ghost is still in its infancy but already has a large collection 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 great Ghost themes doing something special, be sure to share them with us in the comments!