Bare Bones

Bones RWD Logo


Bones is a bare-bones responsive grid similar to bootstrap and very similar (and loosely based on) skeleton.  It is written in LESS and gives the developer 100% fine grained control over everything. If your’re a type-A control freak, you’ll love Bones. What are the  benefits of Bones other than sharing names with an awesome show?

Responsive Grid

  • Responsive down to mobile
  • Responsive up to 1280px or more versus the old 960px standard
  • More levels of responsiveness than Skeleton and bootstrap gives you a finer grain of control.

Truly Style Agnostic and Minimal

  • Other RWD frameworks are packed with styling for various elements such as forms and buttons. Bones leaves that up to you.
  • Bones is a responsive-grid and only a responsive-grid with nothing else. Even the reset CSS is optional.

LESS for More Control

  •  Although a compiled CSS file is included (minified and non), Bones is written in LESS with variables you can change and tweak.
  • Gives you more control as to what you want to include with your RWD.
  • You can make changes and easily compile them into one minified file or let the server do it for you.

Dev Documentation

Implementing bones is fairly straightforward, but because it is written in LESS it requires some additional tools in order compile the LESS file into a CSS. Find more information on LESS on their website. If you are developing in windows, I would like to suggest WinLESS to pre-compile you LESS files into CSS prior publish. I do not recommend compiling the LESS file on the client via the JavaScript plugin.

Width Variables

By editing the following variables in the LESS file, you’re able to control at what width the media queries are run: @fullGridMax, @mainGridMax, @mediumGridMax, @smallGridMax, @smallGridMin. You can also control the column margin with the @columnMargin variable.  All non-standard (non-default) widths will be experimental and you may need to adjust some of the other variables, especially @pad.

Custom Queries

If you need to manipulate any other classes for different media queries, edit the queries.less file. Any CSS will automatically be compiled into the CSS file if there is anything there.


If you want to include Meyer’s reset, simply uncomment the @import “reset.less”. 

Download & Demo

photoshop icon You can download a Bones-Grid PSD file to help you with the layout.

github icon Download from the Github.

page code icon See the Demo.


This RWD framework is based on Skeleton, which is a fantastic framework for the 960px width grid written in pure CSS (not LESS).

Leave a Reply

Your email address will not be published. Required fields are marked *