Recently I have been getting a lot of work making WordPress themes and websites, and because I’m not into doing any unnecessary work I normally use an official WordPress theme as a starter theme to work of. But for my most recent project I did some research on other starter themes. What I found was Bones. The starter theme that will make your life considerably easier, and for newbie’s, easier to learn the art of theme development.
First and foremost bones is simple. Many other themes have complicated bread crumb trails to follow through code just to work out what is going on. Bones is different, only what is necessary is included, and even if something is included you don’t need, it’s not so highly strung that you cannot simply delete the unnecessary code. Plus the code is extremely well commented and documented. It’s never difficult to work out what you need to modify to get the look or functionality you want.
Secondly, and this is the number one best thing about Bones. It is extremely responsive and mobile ready. Out of the box I had it working on a phone, and just screwing around with it in a web browser is fun. As you resize the window, the theme updates itself and changes things to fit. This superb feature is courtesy of excellent design, but also because of LESS and Sass.
LESS and Sass are dynamic stylesheet languages. They are derivatives of CSS, so any CSS syntax is valid in LESS and Sass, however these languages add proper programming features to CSS, things like variables, functions and so on. You have to choose one to use, and I choose LESS, so I can’t speak much for Sass. From now on I will focus on LESS.
One of LESS’ cool features is “mixins”. Look at this example:
|
1 2 3 4 |
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } |
Once you have defined .bordered above you can use it in other styles like this:
|
1 2 3 4 5 6 7 8 |
#menu a { color: #111; .bordered; } .post a { color: red; .bordered; } |
This is just one example of the greatness that LESS provides when making websites. Bones is structured so that the main stylesheet is just a collection of media queries that check the screen size, and then import the correct LESS file for the correct screen. So you have a base stylesheet and then various others for different screen sizes. This makes responsive web design so much easier, which these days is a must in a WordPress theme.
The greatness that is the Bones theme is really never ending, for example it’s built on the HTML5 boilerplate, which is an incredible HTML5 template that many companies build their sites off. Since it makes WordPress theme development so much easier, I may do some tutorials using it, which I assume you wouldn’t mind.
Download bones here, while reading more about it. Then leave a comment down below and tell me what you think about Bones and what you use to help when making a WordPress theme.