In an earlier post we discussed the sort of content you can write but what hasn't been covered yet is a further in-depth look at the other features the Angsty theme offers.
I hope you'll agree it's a fairly feature rich theme. However, before we delve into the features let's take a look at the third party frameworks that have helped build up this theme and which part they play.
- Google Fonts - Google provide a really great collection of fonts they're completely free and accessible via their API. I downloaded them and put their declarations in the
assets/css/custom.cssfile. Careful about including too many if you decide to customise the theme yourself - each font adds to your page weight slowing down loading times;
- Twitter Bootstrap - You could say this framework along with jQuery have revolutionised websites like no frameworks before them. They are pretty ubiquitous. Most of the icons (aside from the social icons) are powered by Bootstrap. The header and the navigation bars and contact form are all driven using Twitter Bootstrap. Check out their lengthy list of components to get an idea of what it's capable of doing for you;
- Font Awesome - A really great framework of lightweight icon sets. I chose to use font awesome for the social icons for sharing posts, in the menu bar and in the footer;
- jQuery - Probably the godfather of all web frameworks. Most of the neat features like the post reading times, contact form integration and adding a comment count have all been done using jQuery. It provides a quick and clean way of performing animation and dynamic content via query/element selectors and event bindings;
- Prism.js - This is a really great syntax highlighting framework. I was really impressed with the speed and cleanliness of this framework on top of the fact that it integrates nicely with Markdown.
That's enough of frameworks. Let's take a look at the features:
- Responsive Layout - The theme has been designed specifically with the mobile view in mind and scales up to support both tablet and desktop views. Features on the mobile view are prioritised such as your reading experience to give you the best possible platform for your blog.
- Post Reading times - I absolutely loved this feature in Medium so I decided to roll my own. It uses an average reading speed and word count in the post to calculate how long it will take to read each article.
- Featured post images in mobile views - I wanted images to be even more prominent on the smaller screen so they're full-screen featured header images when you're reading articles to pack a bit more punch.
- Disqus comments - Disqus is again the comment framework that you want to use. Underneath there is a burgeoning community who are just waiting to find your blog and get involved. By plumbing in Disqus you unlock an ability to connect with a wider community than just your blog;
- Comment Count - This is driven by the discuss comment plugin and shows a link that readers can follow to quickly jump to the comment section. This is only shown on larger screens since I did not feel it provided as much value to the mobile use (if you make the reading experience the best you can on the small screen they'll feel compelled to leave a comment - at least that's my opinion!);
- Contact form including form validation - Probably the main feature that makes this theme stand-out slightly from the others. It's driven by a
- Side menu - I spent a bit of time trying out various different side menus and designs and ultimately decided on this one - I hope you like it;
- Footer social links - If you check out the bottom of the theme I've added my social profiles from Twitter, Facebook and Google+;
- Subscribe link - currently I set the link up to my feedburner RSS account so you just need to set the
href="http://feeds.feedburner.com/DevAngst"to point to your own RSS feed;
- Author contributor image & bio - The design for this is an adapted version of Casper's theme. I really liked it so I borrowed aspects of that theme. Kudos to the Ghost team - great work on that theme... and of course Ghost!
- About page - If you click the about link you'll see I've set up a static page with content. To setup an about page you need to add a post (like you normally do), click the
statictick box to mark it static then create an
page-about.hbsfile with the content you want. Check out the example in this theme and write up your own about page!
Phew! Well that's enough from.
I really hope you take as much enjoyment from using this theme as I have creating it.