ResponsiveBP — A CSS Framework

by Iain Fergus

Over the years I've tried a few different CSS frameworks (Bootstrap, Foundation, Skeleton), but often returned to coding my own basic grid systems or layouts from scratch.

This was either because I felt that there wasn't enough flexibility, or there were too many design decisions made. Sometimes it was because they did more than I needed, or not enough.

Enter Responsive BP

Last year I was made aware of ResponsiveBP while chatting to Iain Robinson at Twitayr (a meet-up for web designers/developers held monthly in Ayr). I liked what I saw and immediately had to try it out.

Since then I've used Responsive on a number of client sites and personal projects. It's not as well known as the likes of Bootstrap and Foundation, but it really should be.

Responsive is the creation of James South, a developer based in Glasgow, and he clearly puts a lot of time and effort into its development, especially in regards to accessibility. For example, all the elements are keyboard and screenreader accessible out the box, and right-to-left languages are supported too.

James has also been very accommodating with answers to any questions I've had about the framework. Not that there have been many.

Why you should try it out…

It's flexible, robust and lightweight.

As stated in the documentation: 'Responsive is tiny. The combined output CSS and JavaScript is only 22.9kb minified and gzipped…'.

Responsive doesn't add any unnecessary styling to any elements, but does normalise form elements. So you don't spend time overriding styles. You get a clean slate to base your styles upon.

The grid system is intuitive and quick to set up, and the lastest version (v4) has introduced a block-grid feature that is very handy for easily defining how many columns fill the horizontal space in each viewport range.

There are basic helper classes for floats and visibility, but nothing over the top. Forms and typography are normalised, and media embeds are addressed sensibly.

Adding a responsive YouTube video is as simple as wrapping the iframe in a div and adding a class of .media to it.

Javascript Too

One of the best features of responsive is the JavaScript library that is included. It makes adding carousels, modals, tabs and dropdowns (amongst other things) really simple.

There is no need to search around for 3rd party solutions and you therefore avoid any potential issues with trying to get different jQuery plugins playing nicely together on the same page. Again the styling of all these elements is minimal and easily customisable.

An alternative to Bootstrap

If you're looking for an alternative to Bootstrap or Foundation, then I encourage you to try out ResponsiveBP on your next project.

You can read the docs and download the latest version at responsivebp.com

…you can also follow on Twitter @responsivebp

Iain Fergus

Posted by: Iain Fergus

I'm a Web & Print Designer based in Ayr, Scotland. This blog is a collection of my personal ramblings.

Feel free to get in touch with me on Twitter @darkflare or drop me an email iain[at]iainfergus.co.uk

Posted in: Web Development

Tagged with: &