Making a Theme With Bones: Getting Started

We are using a starter theme to build a new responsive site.

Why Bones?

Bones is a completely free starter theme (not a framework) built with the latest best practices. It serves as an excellent base to build a WordPress theme. This is an incomplete feature list about Bones:

built upon the HTML5 boilerplate
mobile first approach
responsive design
comes with LESS and SASS
fallback for older browsers
cleaner header section
great documentation

Step 1: Download Bones

You can download the starter theme from the Themble site.

Step 2: Themes Directory

Unpack the ZIP file into wp-content/themes and rename its directory to bones.

Step 3: Theme Settings

Set the theme in the WP admin interface to Bones (at Appearance / Themes).

Step 4: The Page

This is how the website looks with the basic Bones theme. The resolution is 1440x900 pixels.

Step 5: Theme Basic Data

This is the place of theme name, description, author, version and so on. The style.css file is in the theme directory. Basically the themes based on Bones don't use any real styles here, but just the data for showing the info in the admin interface.


/************************************************************************
Theme Name: Kotkoda
Theme URI: https://code.tutsplus.com
Description: This site was built using the Bones Development Theme.
Author: Adam Burucs
Author URI: http://burucs.com
Version: 1.0
Tags: flexble-width, translation-ready, microformats, rtl-language-support

License: GPL2
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Step 6: Download a LESS or Sass Compiler

This tool is needed to compile and minify the styles of Bones into a production CSS file. I chose WinLESS because I'm working on Windows 7.

Step 7: Exploring the Bones (LESS) Styles

In the bones/library/less directory you can find all files to customize the theme. These are the styles we need:

1030up.less - desktop stylesheet
1240up.less - mega sized monitor stylesheet
2x.less - styles for Retina screens
481up.less - 481px+ styles
768up.less - tablet and small desktop stylesheet
base.less - the base for mobile devices
ie.less - here we call all styles for IE, but without the media queries
login.less - we can modify the login page of WordPress
mixins.less - this is where we use LESS mixins and constants
normalize.less - general reset for default styles
style.less - main styles, uses all other files

Step 8: Main Background and Text Color

We are using orange background and mid-grey (@kotkoda-grey) text color in base.less. (Use color to set the font's color and the background property to set the background color.)


body {
	font-family: Georgia, serif;
	font-size: 14px;
	line-height: 1.5;
	color: @kotkoda-grey;
	background: #ED7626; /* main background color */
}

And this goes into mixins.less. You can define a color variable in LESS with the following: @kotkoda-grey is the color variable name and after the colon is the color code (#19171A). Every variable name starts with the @ sign.

1
2	@kotkoda-grey: #19171A;

Step 9: Link, Heading and Post Meta Color

For links the color will be @white, but @alert-yellow will be used for hover and focus styles. Use the color property to set the value. Every heading and heading with links will be @kotkoda-grey. We need a bit darker grey for this, the original value was #999. With the color rule we can set it to #444 (which is equal to #444444).


/*********************
LINK STYLES
*********************/

a, a:visited {
	color: @white;

	/* on hover */
	&:hover, &:focus {
		color: @alert-yellow;
	}
	...
}

...

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	font-family: sans-serif;
	text-rendering: optimizelegibility;
	font-weight: 500;

	/*
	if you're going to use webfonts, be sure to check your weights
	http://css-tricks.com/watch-your-font-weight/
	*/

	/* removing text decoration from all headline links */
	a {
		text-decoration: none;
		color: @kotkoda-grey;
	}
}

...

/* post meta */
		.meta {
			color: #444;
			...
		}

Step 10: Our Page After These Modifications

This is how it looks in 600 pixels wide.

This is how the page looks after some modifications

Halfway There

We come to the end of the first part of this tutorial series.