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 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.
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.
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
You can download a Bones-Grid PSD file to help you with the layout.
Download from the Github.
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).