Casper-Slidr Theme for Ghost.js

Casper-Slidr is a theme I developed for Ghost.js for this blog. It is a derivative of the casper theme that is bundled with Ghost. It is a responsive (responsive web design) theme written primarily for mobile devices and secondly for big screen non-mobile devices. It is build upon rem (root em) units in CSS and relies on CSS media queries to perfect the fonts and images for all screen sizes. The layout is clean with minimal nesting of HTML elements and everything flows into paragraphs, after all this is meant to be a blog and should be all about content. The theme carries through with the Ghost philosophy of "content first".

There were a few things missing in the casper theme which prompted me to work on casper-slidr. The biggest was the absence of navigation and menus. It may work for a pure blog, but I use my blog for storing a lot of cheat sheets and need an efficient way to navigate to those posts without having to search through blog posts listed chronologically. The other was the completely bare design of posts which in true Ghost fashion rendered nothing else but the content. It was a little too minimal for me and I needed a way to navigate back and get to some global menus. Also, its missing the ability to comment in posts. It did not have any syntax highlighting for code by default which I need as most of my post include code snippets.

Main updates in casper-slidr theme:

  • Simple, clean header for pages and posts
  • Sliding menu for all pages and posts using jquery.mmenu
  • Support for Disqus comments in posts
  • Syntax highlighting for code using google-code-prettify
  • Page view tracking using Google Analytics

You can download Casper-Slidr theme from GitHub. The Readme.md file contains instructions for installing the theme. Here's a quick overview of how to use this theme.

General CSS Updates

There are a fair amount of changes in CSS (screen.css). First off, reduced the default body font size and increased the max-width to allow for wider spanning paragraphs. This optimizes the pages a bit more for wide screens found in most computers (non-mobile screens). In addition increased the number of characters displayed for each post excerpt, so that main page has more meat. Changed the header to make it minimal height and get rid of the photograph. The photo header is all the rage these days, but I can't find a decent photo that represents what I want to convey in the blog and still work well with the color scheme. Here's a more technical outline of the changes:

  • Change {{excerpt}} to {{excerpt characters="800"}} in index.hbs
  • Repeat the same thing for excerpt in tag.hbs
  • Edits in screen.css 'post' style change max-width from 700px to 1024px 'body' style, change font-size from 2.0rem to 1.5rem h1, h2, h3, h4 change font-size to 2.8rem, 2.6rem, 2.0rem, 2.0rem 'post-excerpt p' font-size from 0.9em to 1em 'p, ul, ol, dl' change margin from 1.6em 0 to 1em 0 '.post-template .post-header' add 'background: #F7FAFB; border-bottom: 6px solid #E3EDF3;' '.blog-logo' add color: #aaa; @media max-width: 500px Add body style with font-size: 1.8rem; line-height:1.4em; h1, h2 change from 3.0rem to 2.4rem h3, h4 change to 2.0rem
  • Edit post.hbs, move post-header out of article block
  • Do the same tweak for page.hbs

Sliding Menu using jquery.mmenu

The theme adds a menu system to the blog while staying true to the motto of "mobile first" and minimalism. I used the relatively standard mechanism for displaying menus in native mobile apps using a slider. There are bunch of these sliding menus available in JS for use in webapps and I picked jquery.mmenu. This allows for a no-frills header with no messy horizontal menus that get squished on mobile screens. Instead we get a nice slide-in menu which is big and bold and works well both for computers and mobile devices. This way I get my menus without having to gut out the casper theme. Here's an outline of some of the code changes:

  • Add mmenu js files to default.hbs after index.js <script src="{{asset "js/jquery.mmenu.js"}}"></script> <script src="{{asset "js/jquery.mmenu.positioning.js"}}"></script>
  • Copy jquery.mmenu.js and jquery.mmenu.positioning.js to the assest/js folder
  • Add mmenu CSS files to default.hbs after screen.css <link rel="stylesheet" type="text/css" href="{{asset "css/jquery.mmenu.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "css/jquery.mmenu.positioning.css"}}" />
  • Add a new div element in default.hbs and move {{body}} and ghost footer inside this new div
  • Add the menu items as UL items at the bottom of default.hbs (just before script includes) <nav id="my-menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/apps">Apps</a></li> <li><a href="/toolbelt">Toolbelt</a></li> <li><a href="/about">About</a></li> </ul> </nav>
  • In $(document).read() JS snippet add the following $("#my-menu").mmenu({ position: "left", zposition: "next" });
  • Edit assets/css/screen.js and add new styles for 'header-sect' and '#my-menu'
  • Update header section in post.hbs, page.hbs, index.hbs and tag.hbs <div class="header-sect"> <a href="#my-menu"><img class="mmenu" src="{{asset "images/icn_menu.png"}}"/></a> <a class="blog-logo" href="{{@blog.url}}"> {{#if @blog.logo}} <img src="{{@blog.logo}}" alt="Blog Logo" /> {{else}} <span class="blog-title">{{@blog.title}}</span> {{/if}} </a> </div>

Disqus Comments

A blog must have comments and I think the Ghost team is working on adding those to the base build. As of now comments are missing in casper theme so I went ahead and incorporated Disqus Comments in this theme. Here are the steps for adding Disqus comments to the theme:

  • Register for an admin account with Disqus http://disqus.com/admin/create/
  • Edit post.hbs and add this code snippet between {{/post}} and article <div id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = 'bhiranet'; var disqus_identifier = '{{post.id}}'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Google Code Prettify

No tech blog is complete without syntax highlighting for code, so added Google Code Prettify to the theme. The default skin with light background color worked best with this theme. Here are the code changes:

  • Search for {{! The main JavaScript file for Casper }} at the end of the file
  • Add the following script tag after all existing script tags <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <script> $( document ).ready(function() { $(".prettyprint").parent().css("background-color", "#F7FAFB"); }); </script>

Baldeep Hira

bay area programmer working on mobile/tablet/web apps and enterprise cloud apps; ui/ux, html5 and everything else for a prettier web and world

  • San Francisco Bay Area
comments powered by Disqus