Lutfi Torla.com

The Riverstone Premium WordPress Theme (Free)

The Monochrome Sands theme was fun, but wasn’t minimal enough for me. I wanted a site that could wow people while still having only text on it. No pictures. That was my vision.

Backstory

The parent theme I was using wasn’t flexible enough. So I started looking for a better framework to build from and I found twitter bootstrap. The best bootstrap wordpress theme I could find was the bones theme, but it was limited by its grid design. It also wasn’t designed for mobile. I really liked the 320andup grid framework though. Luckily, I found a theme that combined that framework with bones to give 320press.

I’ve used that foundation to code the following theme. It’s been designed purely for my own website but feel free to use it.

Screenshot & Download

Screenshot of Riverstone Theme

Screenshot of Riverstone WordPress Theme

Theme download: http://minus.com/lbj4Ax8QVs2StI (version 0.8)

Features

  1. Responsive design. 1240px max width. Works great on mobile devices too. Mobile menu using twitter bootstrap.
  2. Wide browser compatibility. Tested fully working with Chrome 20+, Firefox 10+, Opera 11+, IE 7+, Androids 2.3+, Iphones 4+, Ipads. May work with others too.
  3. Latest technology. Uses the latest WordPress 3.4+ “Live Preview” customizations. Easy to configure. CSS3 & HTML5
  4. Speed.
      1. Javascript optimizations
      2. Compatible with CSS caching plugins
      3. Uses icon fonts instead of CSS sprites or normal images.
  5. Great typography. Designed for no images / pure text.
  6. Customizable.
      1. Background-image noise effect stays even with “Live Preview” background colour changes.
      2. Header gradient effect stays even with “Live Preview” colour changes.
      3. Designed for no images / pure text. But also allows you to add thumbnails if you like.

Speed: I brought my site from 525kb, 118 http requests, 13.94 seconds to load down to >>>> 105kb, 15 requests, 2.46 seconds to load

Known issue

Dropdown menu breaks on mobile screens when Jetpack Gravatar Hovercards plugin is enabled. Solution: deactivate “Gravatar Hovercards”

Design

Does it look good even if I don’t have any thumbnails for my posts? That’s the main question I ask.

Most of the time, I prefer to just type, and don’t have an image that’s relevant. In fact, I’d prefer not to have any images around. So I wanted to design a theme that was elegant, minimal, had the latest standards, and was extremely light.

My core question: Does it look good using only text?

And so that’s why this design has whitespace. Lots of it. Big text. Big elements.

It uses up to 1240px on your screen since many of us use wider screens nowadays. This allows you to have even more whitespace while still having more on screen.

It’s responsive too. When the screen gets smaller, it adjusts itself automatically to fit the screen better. Works great on mobile screens so that you can surf the site on your Androids and Iphones too.

Optimizations

In my designs, I have an urgency for 2 things. Speed and no images.

I’ve improved the theme over 8 versions now. These optimizations have given me:

Google page score of 97/100 using this theme, with only 15 requests being pulled loading only 120kb of data (including all javascript and css and header image).

I’ve made the following optimizations to the theme:

  1. Latest CSS3 and HTML5 techniques for most animations. (reduce images)
  2. Loading javascript for jQuery and Twitter bootstrap from Google CDN & NetDNA CDN. (speed up javascript loading & reduce load on your server) [my server is a shared server that’s pretty slow. The CDNs are about 50 times faster]
  3. Using icon fonts instead of twitter’s glyphicons. This uses a font with symbols (like “wingdings” font in Word) so that images aren’t needed. (reduce images)
  4. Extremely compatible with W3 Total Cache (if you disable javascript caching). (combine CSS and reduce http requests)
  5. Header background gradient doesn’t use images but instead uses cross-browser compatible CSS. (reduce images)
  6. Background noise effect uses data URIs to reduce http header requests. (reduce images while allowing you to change background colour)

 

This ensures that if you use my theme while also installing W3 total cache to combine & minify CSS (not javascript), your site should go very fast.

I brought my site from 525kb and 118 http requests taking 13.94 seconds to load down to >>>> 105kb, 15 requests, 2.46 seconds to load

My site speed now fluctuates between 2.4 seconds to 3.9 seconds. Of that, only 1.5 seconds is used to download the page. The rest of the time is just my shared server being a bit slow.

So yes, I believe it’s fast.

The speed can be further improved by turning off plugins that collect stats. I currently run 2 different stats plugins and their javascript and load time is probably what’s keeping me from getting 100/100 for my google page score.

You can also further improve the speed by not having a header image. I couldn’t get a font that I really liked so decided to just use a header image instead (12kb).

Changelog

Version 0.8 (5th August)
– more minimalist look. more whitespace. improved typography.
– added feedburner email subscription widget
– added social/rss icons (using icon fonts)
– removed unnecessary/heavy options
– added customizable header background gradient colour, fully cross-browser (including IE 7+)

Version 0.7 (1st August 2012)
– clickable divs removed. Front-page posts are lighter now, box shadow as animation
– made font sizes bigger
– fixed up archive page
– known issue found: dropdown menu breaks on mobile screens when Jetpack Gravatar Hovercards is enabled. Solution: deactivate “Gravatar Hovercards”

Version 0.6 (28th July)
– reworked so that it’s based on 320press. (320andup, bones framework)
– cleaned up even more code. lighter for mobile.
– removed rounded corners. Windows Phone 8 look.
– switched to fontello instead of Fontawesome. Loads only the needed icons. Lighter.
– improved mobile menu

Version 0.5 (22nd July)
– cleared up header
– clickable divs changed from javascript to pure css
– changed from Bootstrap glyphicons to FontAwesome icon fonts
– replaced local javascript with CDN. jquery(google), boostrap & modernizr (cloudflare)
– wp_enqueue all javascript to footer (except modernizr, jquery)

Version 0.4 (20th July)
– changed colours to mainly blue
– clickable divs (incl. mobile)
– single page styling, padding, readability
– header background, purely css, cross-browser (including IE 9+)

Version 0.3 (16th July)
– styled front page
– fixed bug with text overflow
– changed colours

Version 0.2 (14th July)
– styled widgets
– added search bar in header menu
– added logo/header image
– fixed search bar and header menu bugs

Version 0.1 (13th July 2012)
– added style.css
– added data URI background noise
– white background for content area

Leave a Reply