My favourite on-line magazine “for people who make websites”, ‘A List Apart’, has just had a major makeover. Interesting to see the direction they are going in.
Monthly Archives: January 2013
I’ve been writing about the creation of my WordPress starter theme, ‘Oystershell’, that I used as the base for the development of the theme for this website and how I used a range of other starter themes and code bases as inspiration. One of the decisions I made was to include the code for making CSS buttons from Twitter Bootstrap.
Twitter Bootstrap is a “sleek, intuitive, and powerful front-end framework for faster and easier web development” provided by Twitter. It has a range of components providing different user interface elements that used together can help you build a website in the style of the Twitter website.
I really like Bootstrap. The elements are well designed and stylish. But I didn’t want to include the whole of it in my starter theme. I wanted to pick and choose from the elements and happily the Bootstrap website includes a feature that allows you to customise your download so you only get the bits of code you want.
The component I thought would be most useful to include in my starter theme was the Bootstrap style buttons. You can see some examples of these here:
With CSS from Bootstrap added to my starter theme’s CSS I only need to add a simple class declaration to a <button> or <a> tag to turn it into a snazzy button.
This info graphic from last year shows how politicians running for office in the USA are turning to WordPress to run their campaign websites.
I wrote yesterday about the creation of my WordPress starter theme, ‘Oystershell’, that I’ve used as the base for the development of the theme for this website. I mentioned that I had looked at a range of other starter themes to get ideas and inspiration, and in some cases actual code, to help with the development.
The most influential was ‘Underscores’ — or ‘_s’ — which ended up being, if you like, the starter theme for my starter theme.
_s has a good pedigree built as it is by the Theme Team at Automattic. I liked it because, despite its sophistication, it seemed simpler to understand than some of the others I looked at.
- You can get _s from underscores.me
- More details about the theme and what it contains can be found in “A 1000-Hour Head Start: Introducing The _s Theme“
This is mostly for my own reference, but here are the details of the colour palette for the theme used on this website:
Palette created using: http://colorschemedesigner.com/#4T51T–Ciw0w0
Well I have been making progress on refocusing my business activities and preparing for my relaunch over the last couple of months. This has included more work on the Grit & Oyster website. I’ve just completed a major phase of developing the theme and most of the component parts are now there. This has taken a little longer than I had planned because I decided to step back before going forward.
I decided that I wanted to create a ‘template’ or ‘starter’ theme to act as a reliable code base for future development. Essentially this is a WordPress template which works and has all the necessary code and files, but has a limited amount of design and styling applied to it. This is so you can use it as a platform to build other themes on.
I did look at a range of the existing ‘starter’ themes and templates that are available. I had a good look at the code of some of the more popular ones. But while they provided inspiration, and in some cases some useful bits of code, I decided I wanted to create one for myself. Partly this was simply for the challenge, but it was also because I felt that if I was going to use it to build websites for clients I really needed to know and understand the code thoroughly — and the best way to do that is to write it yourself.
What I’ve ended up with I’ve called “Oystershell” and while not yet perfect it is finished enough to be used in anger. I am rather pleased with some of the features:
- It has the option of a responsive or fixed width layout
- The status, aside and quote post formats are included
- It has a number of customisable functions that will make theme development a lot easier
- I’ve included a range of action hooks that I can make use of in custom plugins
- I also think the CSS style sheet provides a pretty comprehensive base covering all the common and a lot of the not so common page elements
The theme for the Grit & Oyster website is now a child theme of the Oystershell starter theme. Creating that child theme was a good test of using it as base for theme development. The main additions were the colour scheme, the use of web fonts, and getting the particular responsive layout I wanted. There was also some tweaks to the post formats and the addition of special features for the website home page.
I’m aware that what I have ended up with is not the most stunning piece of graphic design – but then it wasn’t really intended to be. My objective was to come up with a technically solid implementation of a WordPress theme that uses standard compliant code. I wanted to avoid the use of JavaScript where possible, preferring intelligent use of CSS, and to try out techniques of responsive design. All of that I believe I have achieved.
Now to concentrate on some actual content!