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.
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
Theme download: http://minus.com/lbj4Ax8QVs2StI (version 0.8)
- Responsive design. 1240px max width. Works great on mobile devices too. Mobile menu using twitter bootstrap.
- 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.
- Latest technology. Uses the latest WordPress 3.4+ “Live Preview” customizations. Easy to configure. CSS3 & HTML5
- Compatible with CSS caching plugins
- Uses icon fonts instead of CSS sprites or normal images.
- Great typography. Designed for no images / pure text.
- Background-image noise effect stays even with “Live Preview” background colour changes.
- Header gradient effect stays even with “Live Preview” colour changes.
- 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
Dropdown menu breaks on mobile screens when Jetpack Gravatar Hovercards plugin is enabled. Solution: deactivate “Gravatar Hovercards”
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.
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:
I’ve made the following optimizations to the theme:
- Latest CSS3 and HTML5 techniques for most animations. (reduce images)
- 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)
- Header background gradient doesn’t use images but instead uses cross-browser compatible CSS. (reduce images)
- Background noise effect uses data URIs to reduce http header requests. (reduce images while allowing you to change background colour)
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.
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).
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
– changed from Bootstrap glyphicons to FontAwesome icon fonts
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