Theme finished (mostly)

So I have finally gotten to a point where I am happy with the way the website looks. All in all, I spent somewhere between 20 and 30 hours building and tweaking the theme over the past week or so. My primary goal from the start was to have a clean, simple theme that scaled well across different screen resolutions. With this in mind, and with the help of the Bones framework, I have made a theme that I think looks beautiful at any screen resolution. For small displays, it collapses the navigation menu into a hidden area that expands and contracts with a menu button. For slightly larger resolutions, the navigation menu is constantly visible, with a similar style for the main post area as the mobile view. For larger screens with a horizontal resolution above 1100 pixels, the posts on the main page become condensed into small, card-like containers that can be expanded by pressing a “Read More” link. Further, each individual post page has a similar background to the main page, appearing as if the post is a piece of paper over a gray cloth background.

The most difficult part of this whole process lies in the JavaScript code. It was difficult to get it to do exactly what I wanted it to do without bugs, and so took plenty of tweaking to get just right. I’m hoping with the way I implemented JavaScript that the website still works perfectly fine without it, but I need to test that further. Almost all of the visual parts of the theme are built with CSS and HTML, with only some extra features being handled by JavaScript. Further, I haven’t tested on older browsers, specifically IE 7-9. I’m hoping to do that shortly, but I’m not entirely worried about those browsers due to the kinds of users I think visit the site. As it’s a fairly technical blog, the viewers are likely running more modern browsers. Either way, I will test it at some point.

I’ve been trying to think of a good name for the theme. So far, I haven’t really decided on one, but the color scheme reminds me of watermelons. I may just end up naming it something relating to watermelons as a result.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>