Try Tuts+ Premium, Get Cash Back!
Making a Theme With Bones: Getting Started

Making a Theme With Bones: Getting Started

on Aug 31st 2012 with 38 comments
Tutorial Details
  • Program: WordPress
  • Version: 3.0+
  • Difficulty: Medium
  • Estimated Completion Time: 20 minutes

Final Product What You'll Be Creating

This entry is part 1 of 3 in the series Making a Theme With Bones

Making a Theme With Bones

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

Why Bones?

Built with HTML5, image by W3C, http://www.w3.org/html/logo/

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

Setting Bones to use as actual theme

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 1440×900 pixels.

The WordPress page with Bones turned on

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: http://wp.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.

WinLESS window

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.

@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.

Other parts in this series:Making a Theme With Bones: Finishing Off
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a European developer and designer. Outside work I make electronic music, am obsessed with modular synths and learn languages.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • al

    well, the use of LESS/SASS really complicates the process of setting up a theme for me, I know nothing about either one of them.

    I have a basic question, after I d/l winless.msi, what do I do with it? how do I use it? I am totally lost

    not a good start to the tutorial

    Al

    • http://alexball.tv Alex

      Hey Al -

      Definitely spend a little bit of time reading about and learning about LESS and Sass prior to using them in action.

      There are great write ups on both all across the web (if you haven’t used either before, I’d just do straight to learning Sass).

      It’ll definitely add a whole layer of power to your development.

      Alex

    • Brian

      Al, I can appreciate your sentiment, but it’s worth it. It took me about a week of playing with SASS before I felt comfortable with the workflow / environment.

      The author should consider having a little aside about CSS preprocessing. I found this video at CSS-Tricks helpful in setting the groundwork for me. http://css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/

      I recommend SASS, and it was semi-easy to set-up on the MacOS. Just a few ruby install commands in the terminal. Something you should be comfortable with if you’re playing with WordPress templating! Also, for SASS install/setup instructions, do some google searches for “Installing SASS on the MacOS”.

      I highly recommend using Codekit as well. There’s a free trial for you to give it a shot, and a license is $25 (worth it!)

      Good Luck

      • http://sanjaykhemlani.com sanjay

        Maybe the author would consider a little ‘how-to’ for SASS and LESS, because not everyone are using it. I just started learning from it last week and still crawling / learning day by day. Al is just one of them.

        • http://kustomdesigner.com mike

          AL,

          Sass and compass are pretty easy to learn, I admit they are intimidating at first but when you learn them you realize you can never go back to coding the way you used to. They have some really useful tools like compass’s @border-radius(15px); this will cover all browsers that support css3.

          I personally use windows and they have a tool for like $13 called fire.app and it works great, for Mac Ive heard awesome things about codekit. I would definitely learn Sass though…as we speak thewebsite is being redone and they are really going to put it out there I believe before the year is out. I wouldn’t be surprised at all if by next summer most jobs required you to know it. Good luck, man.

          Also I’d like to add, I was looking for a framework to use about 6 months ago and my final decision was down to either Skeleton framework or Bones and I ended up choosing Skeleton due to its options page, I like it but its not as simple and clear cut as I would like it to be but none of them usually are. I think from here out I will probably develop my own framework for me to use if I plan on doing any kind of long term WordPress work.

    • http://webenvelopment.com Ben Racicot

      Ok after an entire day on the Bones setup and totally configuring to compile Sass it works. Great. But everything I know about pre-compiling CSS doesn’t seem to apply to Bones.

      Maybe I’m a total noob but how do files such as _468up.scss and _768up.scss play into the compiled working CSS files? You don’t compile them to CSS so what gives?

      I’m sorry but it looks like Al is correct as the Bones theme is epic in usefulness but it’s Less and Sass are like… VERY ADVANCED. Please have mercy on us and explain how to use the Bones Less and Sass (in workflow or something)

      Thanks guys

  • http://wndfrm.com Kyle U

    Hey Al,

    I’m a longtime Bones user, and I too was little taken aback when version 1.2 was released which introduced the integration/reliance on LESS/SASS

    I’d like to share with you some words from Eddie Machado, the creator of Bones, from 1.2′s stylesheet on this shift:

    “.. take a few minutes and think about how much better a developer you can become by just TRYING out new technologies. It may be tough at
    first but it WILL make you a better developer. TRUST ME ON THIS. Give it a week, maybe two, and you will never go back.”

    (emphasis his).

    Here is a quick intro read for you that Eddie also provides – http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

    Cheers!

  • Andrai

    In the Bones documentation, there are instructions on overriding Less if you want to go back to the standard css file.

  • http://introworks.net Jeremy

    I’ve been using Bones for theme dev for awhile now and it just keeps getting better.

    @Al, It was one of the recent updates to Bones that started using LESS/SASS and before that I had never used them either so it was a step to get started, but after getting into it I spend less (no pun intended) time working with styles. Also it’s incredibly handy when it comes to building a responsive site and organizing the media queries.

    As for your winless.msi app question, my guess is that it works the same as the LESS app for the mac in that it listens for updates to the .less files, and then compiles them to .css for rendering in the browser. You can edit .less files in any code editor, and then after you save the file the app will take care of the rest—you just have to set it up first to watch the directory where the .less files are stored.

    You can learn more about LESS here (haven’t tried SASS yet sorry) http://lesscss.org/ (you don’t have to download the .js file, it’s for compiling the .less at runtime, but the app takes care of that ahead of time so there’s no extra lag on the live site.)

    Best of luck!

  • http://www.nomad-one.com nomadone

    So stoked this tut is finally getting going as I’ve been looking forward to it. Al I know how you feel, I’m not so into all the CSS preprocessors myself and have only used them very sparingly, still feel extremely clumsy at it, but I think diving into the deep end is the best way to learn.

    There’s a bit of an intro on nettuts here – http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

    Would be great to get a comprehensive series on one of the tuts sites covering preprocessors, intros, tools, tips etc

  • http://www.customicondesign.com Custom Icon Design

    This is my first time to notice the SASS/LESS, I think it’s may be interesting. all css files names *.less. why dont use .css? but I will become a student in the Less lessons. Thanks for sharing this and I am sure I will start the lesson.

  • http://www.whatsthebigidea.com David Radovanovic

    After attempting to install Bones, I got stuck on LESS. Like al (above) it is a bit more complicated for folks that have never worked with it before. Overall a great start though. Thanks.

  • Pingback: Making a WordPress Theme With Bones | Wordpress Family

  • http://www.scott-sherwood.com Scott Sherwood

    Thanks for this cant wait for the follow ups, great introduction to bones. Like the other comments I am new to LESS but I am diving straight in its really the only way to go. However, if you want to take it at a more leisurely pace why not compile the LESS files and make sure you don’t minify them and then you ca mess around with the raw css itself as you would normally? Remember to save copies ares recompiling your less files will overwrite your changes but at least you can ease yourself in. Not the most efficient way but just a thought for those trying to get started.

    Note: The current version of Bones requires you to add
    // import mixins
    @import “mixins.less”;

    at the top of the base.less file to resolve a compilation error, just incase anyone else new to LESS wastes a little time wondering why that doesn’t compile.

    Thanks.

    • http://www.kelleherwebdesign.com/ Dharma Kelleher

      Thanks, Scott. I’m a noob when it comes to pre-processors, so when I came across that compiler error, I was left scratching my head. My gut told me it wasn’t connecting to the mixins.less file. And apparently, I was right.

      Also, don’t forget to include the underscore in the name of the file.

    • http://www.entrepreneur30.nl Youri

      Hey Scott thanks for this reply, I’m wondering wether simply adding this line doesn’t result in problems during the compilation, for example including the same css twice?

  • Tomy

    On step 4, I think the width should not 1440 but 1140.

  • http://php-sri-lanka.blogspot.com Upeksha Wisidagama

    Nice Tutorial. Learned new things. Waiting for the second part of this series. Thanks Adam!

  • http://giosensation.com Emanuele

    I have just finished building my first WordPress theme from scratch based on Bones (referenced on my name up here, if you would want to give a sneak peak). You should also mention that it comes packed with custom post types and its code if jam-packed with very useful comments to keep beginners on track.

    I used Sass/Compass for compiling the css and after that little while they really are a game-changer. I based my whole website (with a ton of shadows and text-shadows for 3d text effects, since it’s mostly based on icon-fonts for graphics) on 4 or 5 colors and if I wanted to change the color palette I could do that in just a few seconds because all other colors are generated mathematically with percentages. Nested structure makes the code readable while compressing makes the actual css super fast to load. Compass mixins are just great and allow you to code complex css3 things very easily and quickly (and tweaking is a breeze), adding all the vendor prefixes only when compiling. The only downside is that I can no more take advantage of the instant preview with Espresso, which is kind of boring.

    Getting back to Bones, I am very interested in the second part of the tutorial, since I made a complete mess of the mobile-first approach and would like to know the best practices with this approach on Bones.
    Thanks for the tutorial.

    Cheers!

  • http://iriverworkshop.com Maron

    If you guys find hard to compile SASS/Compass or you don’t have the knowledge in Ruby, try Scout – http://mhs.github.com/scout-app/

  • http://www.coderish.com/ Coderish

    I asked for a tutorial and here it is with the speed of lightning, wow! It’s a basic one, but still it gives some pointers on where to start. I’m concerned about a few things however:

    1. Don’t know about you guys, but we build our themes from PSD -> HTML/CSS -> WordPress. Now if I were to use Bones with LESS, what would be the best practice to code the psd into html/css and then convert the premade html/css into wordpress theme? As I understand bones is based on boilerplate, so should the designer code the psd into html/css using boilerplate?

    2. If we are supposed to edit the less files Bones provides to create our new theme, what would happend when bones updates? Our customizations will be gone?

  • Pingback: Making a Theme With Bones: Finishing Off | Wptuts+

  • Pingback: Making a Theme With Bones: Finishing Off | Wordpress Webdesigner

  • Pingback: My Stream | Making a Theme With Bones: Finishing Off | My Stream

  • Pingback: Making a Theme With Bones: Finishing Off |Trax Asia™

  • Steven

    Glad to see a tutorial dedicated to building a site with Bones. I have built about 6 sites with it and it is absolutely getting better with every update!

  • Pingback: Wordpress Leaks » Making a Theme With Bones: Finishing Off

  • Pingback: Making a Theme With Bones: Cleaning Up | Wptuts+

  • Pingback: Making a Theme With Bones: Cleaning Up | Wordpress Webdesigner

  • Pingback: My Stream | Making a Theme With Bones: Cleaning Up | My Stream

  • Gunnar

    When I tried to use the color variables that I added to the mixins.less file, winless just gives me an error saying the variable is undefined…. even though I defined it just like you said in mixins.less.

  • Pingback: Wordpress Leaks » Making a Theme With Bones: Cleaning Up

  • http://ge2house.com Galih

    I have same problem like Gunnar, whenever I tried to use the color variables just like you said in your tutorial.
    Do you have any idea?

  • http://ge2house.com Galih

    I have found the answer for my problem.
    I have to import the “mixins.less” into “base.less” before compile it.

  • Peter Moore

    Firstly, thanks for making Bones, it’s clearly going to be fantastic for me to use in my projects and I really appreciate it.

    I have one question, when I’ve used Bootstrap in the past, the responsive part makes all the content stack vertically when I reduce the width of the browser window (i.e. if you have two divs side by side, they dynamically stack to best fit the size of the window.)

    I’ve just installed Bones on a fresh wordpress install and although it’s a responsive theme, when I resize the width of the window to something more like the width of an iPhone, the sidebar stays next to the main content. How can this be changed to stack vertically as it would when using Bootstrap?

    I’d imagine there’s something I’m not getting regarding media queries. I’m an absolute newbie regarding media queries and LESS but I’m definitely getting the idea of LESS. Any pointers are greatly appreciated!

  • romuloctba

    *Loved -> the way you are aproching things, really up-to-date coding
    *Hated -> Its not a full tutorial, it is in parts
    *somewhatHATED-> I have no clues on Sass… Gotta learn it first.

    I already use Zend Framework, saves lots of time. Sass looks good too, i’ll give it a try.

    *REALLY HATED -> it is not a full tutorial… lol, but i understand you, and thank you, anyways.

  • romuloctba

    Lol, i’ve just realized how unfair from me was to say i hated the post was in 3 parts.
    I acctually confess That I didn’t see that were 3 parts, or worse: they were already posted!!!
    Anyway, no hates anymore.

    I read some sass material, and I will try this tutorial again later, to my next customer.

    Thank you… a lot!

  • Akash Kumar

    I don’t understand what do I’ve got to do with the WinLESS Compiler? Please help me.

    The author says that we’ll be requiring this to compile and minify the styles of bones into a production css file. What does he mean by that?

    And moreover, he continues the rest of the tutorial without telling us more about this software and it’s use (WinLESS Compiler). What does he do with it man? I’m Totally Confused!

    • http://smorgan.me.uk Sheridan

      Hi Akash,

      I’ve only started out with less too but this really helped: http://designshack.net/articles/css/using-less-js-to-simplify-your-css3.

      As for ‘winless compiler’ just open it and add the less folder from the bones theme (leave it open in the background and open and edit the .less files in your usual editor – i used notepad++) then when you edit and save any of the .less files it will automatically compile it into css and you should be able to see any amends you make without further interruption to your work-flow.

      You may notice that it throws some errors but from what I can see that’s just because the variables are set in a different .less file to where they are being called once complied it should be fine.

      Hope this helps!

      • http://twitter.com/madhattersays Jermaine Wall

        I’m sorry. When you edit your .less files, and compile them to CSS, do you have to manually upload them to your WP Directory every time? Or does this article assume that you’re editing your WP site locally?

  • http://www.entrepreneur30.nl Youri

    I think I have grasped the concepts of LESS quite a bit, but I feel there are still some steps missing? I have edited the mixins and base LESS files and compiled them with Winless. Now what? Simply upload those styles to the template?

  • Pingback: Let the Credits Roll for the Bones Theme

  • http://twitter.com/Wonderfoule Marc Lafay

    For using Bones with SASS and command lines, just go into the repertory : wp-content/themes/bones/library/scss/ and write :
    sass –watch style.scss:../css/style.css
    All modifications in scss/style.scss are automaticaly added to css/style.css

  • Pingback: Bones Simplifies the Process of Creating a WordPress Theme | Tips for the Unready

  • Pingback: Bones Simplifies WordPress Theme Creation | Lifehacker Australia

  • Pingback: Bones Simplifies the Process of Creating a WordPress Theme[Lifehacker] | Toiletbowl Martini

  • Pingback: Bones Simplifies the Process of Creating a WordPress Theme

  • Pingback: Bones Simplifies the Process of Creating a WordPress Theme | Wordpress news and updates

  • Pingback: Bones: A New Starter Theme for WordPress

  • Pingback: Rob's Personal Aggregator » Bones Simplifies the Process of Creating a WordPress Theme

  • Pingback: Bones: A New Starter Theme for WordPress | Jim amann

  • Pingback: Bones: A New Starter Theme for WordPress - That Was Helpful

  • Marcus

    Hello. I`m a bit stuck here. I`m unsure which files I actually need to edit in Sublimetext2. I`m guessing the files with the _underscore prefix are not directly compiled but are referenced by the min style.scss. Do I then need to edit the style.scss or do I directly edit and add styles to the _base.scss, _1240up.scss and so on? In essence I guess I`m asking where do I make style changes

  • Pingback: A New Starter Theme for Wordpress Named “Bones” | StapleMaple

  • Pingback: Start coding your WordPress theme with Bones | Techtites

  • Pingback: Bones / Lifehacker | External Brain

  • Pingback: Bones: Mobile-First & Responsive Wordpress Starter Theme | DEVstr

  • Guest

    Total nude here. Trying to compile these changes (steps above), get the following compile error… “NameEror: variable @kotkoda-grey is undefined in …/_base.less:43:11 … …

    …

    …

    43 color: @kotkoda-grey;”

    This happens despite the fact that _mixins.less has the following declaration…

    ”
    …
    …
    …

    /*********************
    COLORS
    *********************/
    @kotkoda-grey: #19171A;

    ”

    Help? Pulling hair out.

  • disqus_nhedRHzTc2

    Total nube here. Trying to compile these changes (steps above), get the
    following compile error… “NameEror: variable @kotkoda-grey is
    undefined in …/_base.less:43:11 … …

    …

    …

    43 color: @kotkoda-grey;”

    This happens despite the fact that _mixins.less has the following declaration…

    ”
    …
    …
    …

    /*********************
    COLORS
    *********************/
    @kotkoda-grey: #19171A;

    ”

    Help? Pulling hair out.

  • Pingback: Wordpress Theme Bones « blog.8bit-Online

  • Pingback: wordpress <- bones

  • Dwayne R. Crooks

    May be better to just watch the entire directory, since you may make modifications to other files as well:

    $ cd wp-content/themes/bones/library
    $ sass –watch scss/:css/

  • Dwayne R. Crooks

    Actually there is a config.rb file for compass in the scss/ directory. So you can also do this:

    $ cd wp-content/themes/bones/library/scss
    $ compass watch -c config.rb

  • Pingback: Free WordPress Framework Guide - Get a Rundown of the 7 Best

  • Pingback: 7 Free, Modern Starter Frameworks for WordPress Designers | My BlogMy Blog

  • Pingback: 7 Free, Modern Starter Frameworks for WordPress Designers | iwebspider design and consulting

  • Pingback: 7 Free, Modern Starter Frameworks for WordPress Designers | BuildsiteUs

  • Pingback: 7 Free, Modern Starter Frameworks for WordPress Designers - WordPress Community | powered by Mpress Studios

  • Pingback: Web District » 7 Free, Modern Starter Frameworks for WordPress Designers

  • Pingback: 7 Free, Modern Starter Frameworks for WordPress Designers | automaticblogwp.com

  • http://www.facebook.com/keltichiro Tom Chapman

    Here’s a silly question – but it looks like Bones is even more minimal than it was before – there’s literally no styling at all, as far as I can see (The version that’s shown in this tut seems to already have some basic styling) so that leaves me wondering – is anything else different?

    I’m trying to follow this tut but I see absolutely no changes at all to my site, no matter what I do. I plug in the code into the mixins.less file, save it, and nothing. I’ve installed Winless as well, opened it up, and editted my code with my favorite editor, still nothing. What am I missing? :/

  • Pingback: Simplifique la creación de temas en WordPress con Bones