Bones – HTML5 Wordpress

Theme DevelopmentKYLE SPEHAR

What is ‘Bones’?

Bones is an HTML5, Mobile-First starter theme for rapid Wordpress development. Bones is built around the latest in Web Standards. It serves as an excellent base to build Wordpress themes.

“Bones was created after years of editing and reusing the same template to develop custom sites. It came from trial and error and tons of experience customizing templates. I trimmed the fat on stuff that you don’t really need as well as adding things you almost always have to use plugins for.”

– Eddie Machado, Wordpress Developer and blogger at Themble.

What is ‘Bones’?

At its core, Bones is designed to be used as a template for making your own theme. 

Bones is NOT a framework. Frameworks add a layer on top of the base. You’re not supposed to

modify a framework’s code, only add your own code on top of it.

When building with Bones, you’re supposed to mess with the base code.  Bones is as bare and minimalistic as possible. It's meant to be used on a per-project basis, this means no Child Themes.

Bones is completely FREE.

Features

Mobile-First & Responsive

Bones comes loaded with SASS and LESS

Custom Post Types & Custom Dashboard Functions Preloaded

Insanely Detailed

Fully Customizable

Made with HTML5 Boilerplate platform

Responsible Fallbacks for older browsers

Built for speed by prioritizing minimal bandwidth for mobile devices.

Clean Header Sections

Solid Documentation (GitHub, website is currently being renovated)

Features* Some of these statistics may be out of date. This chart was posted on September 5, 2011.

Installation

1) Download Bones http://themble.com/bones/

2) Themes Directory Unzip the file into wp-content/themes and

rename its directory to bones.

3) Theme Settings Set the theme in the WP admin to Bones (at

Appearances / Themes).

4) Theme Basic Data

1) Place theme name, description, author, version, etc. in style.css in the theme’s main directory.

The Basic Page

This is how the website will look with the basic Bones theme. The resolution of the

screen in this screenshot is 1440 x 900 pixels.

As you can obviously see, there is plenty of room for customization.

Getting Started

Library folder All of your LESS, SASS, CSS, JavaScript, images, and

custom bones-specific function files are.

The first thing you will want to do is define custom post types. This is done in the library/custom-post-type.php file.

You can clear this file out if you don’t need it or customize the functions and settings to get the type of post you want.

It’s best to make use of as many built-in WordPress capabilities as possible. 

Getting Started Template Files

Bones starts you off with the core page layouts for viewing archives, author, pages, search, and single posts.

It has a template for page-custom, single-custom-type, and taxonomy-custom-cat. These files are meant to help guide you through making theme styles for custom posts as well as custom page themes.

If you want to have a special page template, add a file named page-my_template_name.php and at the top add:

<?php

/* Template Name: My Template Name */

?>

This will show up in your Template folder when adding a new page.

You can also edit the footer, header, sidebar, and comment layouts, as well as the 404 page.

Bones Styling Bones uses LESS and SASS CSS preprocessors,

therefore you will need a compiler to compile and minify the styles into a production CSS file. Delete folder for whichever preprocessor isn’t used.

LESS is located in library/less

SASS is located in library/scss

Compilers include:

Third-party – PrePros, Compass, WinLESS, etc.

Built into editor

Wordpress/JS plugin

Initially you’ll want to check out the mixins files for LESS/SASS. Here you will find some core variables, cross-browser fixes, and common mixin functions.

Bones Styling Stylesheets include (all in /library/less -or- scss directory):

First is the base file. Here you define the most basic styles for your theme. This structure follows a mobile-first approach, so mobile devices only need to load this base file.

Next is the normalize file. This contains reset rules to make sure all browsers are showing nearly the same thing at the most basic style.

Lastly are the responsive styles. This moves by screen size using media queries.

1030up.less – desktop

1240up.less – mega sized monitor

2x.less – styles for retina display

481up.less – 481px+ styles

768up.less – tablet & small desktop

base.less – base for mobile device

ie.less – all IE styles but without media queries

login.less – modify WP login page

mixins.less – LESS mixins & constants

normalize.less – general reset

style.less – main styles

Functions

The heart of the theme is the functions.php file. Bones fills this file with default code including: sidebars, comments

layout, search form, image sizes, etc.

It will also include the library/bones.php, plugins, and custom-post-type files.

The bones.php file has a much more in-depth set of functionality. This includes: head cleanup, js and css enqueing, excerpt_more,

theme support arguments, a custom related-posts function, pagination, etc.

Examples

Live Example

http://chinaus.cah.ucf.edu/bones/?page_id=2

Sources

http://themble.com/bones/

https://github.com/eddiemachado/bones

http://code.tutsplus.com/tutorials/making-a-theme-with-bones-getting-started--wp-26545

http://chrisrolfs.com/theme-your-blog-with-bones/

http://www.plattsoft.net/2013/05/20/bones-my-learning-experience/

Questions

1) Which of the following is NOT true about Bones:

a) It is made with HTML5 Boilerplate platform.

b) It comes loaded with LESS and SASS.

c) It is a framework.

2) What makes Bones good for rapid WordPress theme development?

3) The base.less/scss/css file is where you defined the basic styling of your desktop view.

a) True

b) False

Answers1) Which of the following is NOT true about Bones:

a) It is made with HTML5 Boilerplate platform.

b) It comes loaded with LESS and SASS.

c) It is a framework.

2) What makes Bones good for rapid WordPress theme development?

Bones offers a mobile-first approach of creating WordPress themes through a basic template. It trims the unnecessary features and adds core functionality that is common for many WP Plugins. It allows you to build on top of the template as opposed to adding and removing features from themes and frameworks that do not allow for the same level of customization that Bones offers.

3) The base.less/scss/css file is where you defined the basic styling of your desktop view.

a) True

b) False