In another post, we mentioned the Underscores starter theme, but let’s take a look at Bones. Bones is a starter theme created by Eddie Machado at Themble. Having worked with Bones, I can say, in full confidence, that it is a great starter theme. Why? Let’s take a look at some of features and check out the directory structure. As always, it’s a good idea to use Bones, when developing, as a child theme.
Bones is a great tool for the following reasons:
Bones, as a starter theme, is very well documented, in fact, you can learn a lot just by reading some of the comments. The documentation is detailed and, at times include links to other articles or websites. The style.css file is a good example:
Bones has Sass installed and ready to go.
Bones is a mobile-first theme starter, meaning that it was designed for mobile in mind; the theme starter also includes responsive fallbacks.
Bones cleans up the WordPress head and other unnecessary functions which, in turn, speeds up your theme.
Let’s download Bones and take a peek at what’s inside.
Wow! Might seem like a a lot to take in at first, but it’s really quite simple and orgainzed. You have your 404.php, archive and footer, header, index template files. As you can see, there are two main folders: library and post-formats. Let’s take a peek at what’s inside the library folder:
You might have noticed that Bones has two CSS files, but don’t let this confuse you!
Icons and images for the theme.
Bones includes the modernizr jquery plugin as well as its own scripts.js file. You can use modernizr to test for future HTML and CSS browser support.
The Sass folder in all of its glory. I will not be able to cover Sass in this article, but learning and using Sass will improve your workflow substantially. Eddie Machado, the Bones creator, states that it’s not as complicated as it looks and he’s right.
The translation folder includes your standard PO and MO files.
Post formats is a feature that allows you to customize the presentation of a post in your theme. If you don’t need post formats, then you can just take the code within format.php and paste it into the single.php file.
That’s it! If you would like to learn more about Bones, you should check out this Tuts+ tutorial that goes over the basics. Sadly, the Tuts- tutorial is a bit old as it covers LESS (which is no longer supported in Bones). Also, if I were you, I would install Grunt or Gulp for watch and other features. In the meantime, if you have any questions, feel free to leave a comment below.