Huge Responsive Bones Update

It’s been a while since I’ve made a significant change to the Bones core, but it was time. Recently, I’ve been experimenting with LESS and SCSS. LESS for the most part, feels like a natural extension of CSS. SASS, to me, feels like a programmers solution to CSS. Both are a step in the right direction.

New LESS/SCSS files in Bones

Right off the bat, you’ll notice that the style.css file has been stripped of all styles. This is because all the core styles are now located in library/css/.

Open up those files and you’ll notice they are minimized and tough to read. This is because they’ve been parsed from LESS files. So you won’t need to edit these files, rather you’ll be editing the LESS (or SCSS) files. Those files are located in library/less. If you’d like to work off the SCSS files, they are located inside library/scss.

The benefit of working with this setup is, you can maintain neat and well documented LESS/SCSS files for development, but then serve minified, speedier files for your site visitors. That’s a win win.

Recommended (almost Mandatory) Tools

Now that you’re using LESS and/or SCSS to manage your site’s style, you’ll need a tool to convert those files into valid CSS. Here’s a list of the tools I highly recommend.

Codekit – LESS, SASS Support

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that’s just the first paragraph.

LESS App – LESS Support

{Less} extends CSS with variables, nested rules, operators and more. If you’re still building websites without it, you’re an idiot. This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.

SimpLESS – LESS Support (Windows)

The most powerful thing SimpLESS does: Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.

I’ve found Codekit to be the perfect solution as it also offers js and image compression, but ultimately it’s up to you.

A New Header Setup

I won’t go too in-depth about the new setup because you can read more about it here. The idea is to serve mobile the absolute lightest files possible. To do this, we serve them a base.css file containing the normalize, mixins, and base mobile styles. Meaning mobile devices won’t be downloading a large css file with larger media queries they won’t even be applying.

<!-- normalize, mixins, & mobile stylesheet -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/base.css">

Further down, you’ll notice we reference the file for larger devices.

<!-- responsive stylesheet for those browsers that can read it -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/style.css" media="(min-width:481px)">	

Right below that, you’ll see the Internet Explorer styles, which loads everything larger than the base mobile styles.

<!-- load all styles for IE -->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/ie.css">	
<!--[endif]-->

It’s a very clean approach to responsive design and has a rock solid fallback that doesn’t require any javascript to work.

NO! I don’t like change! I want it the old way!

No worries, inside the library/css folder, there’s a file called old-css.css which contains the old css file. Just reference it in the header and you’re good to go. You’ll also want to call the respond.js file inside library/js/libs/ folder so that IE won’t be left out.

Other Changes

Aside from that, I’ve added a few fixes, fallbacks, and updated the script libraries. You can check all the updates in the log file. The responsive version of Bones is going to be getting most of my attention going forward as it’s what I use on all my projects. The classic version will stay around, but I highly recommend you move towards the responsive version as I think it’s the stronger version.

I’m really happy with the direction Bones is going in and remember. Bones is a good starting point and is meant to be customized. Are you going to use LESS and ignore the SCSS? Delete the files. Want to change how the css files are called? It’s up to you.

To download Bones take a look at the Bones page or join us on Github.

A Bright Future

Coming in the next few weeks/months I’ll be working on optimizing js files for mobile as well as working on redesigning this site as I’ve kind of neglected it. Things are rolling and 2012 is going to be a great year. Happy Developing