I had an existing site I created using Blueprint CSS a while ago. I wanted to make it mobile-friendly. There are responsive CSS grid frameworks out there now, but I didn’t feel like replacing Blueprint, and I figured all I had to do was, using media queries, make every column span a fixed width. That was mostly correct. In the end, I used 100% widths, plus a few other alterations. Here is how I ended up doing it.
Normally, you will link to your Blueprint screen.css
file like so:
<link href="/css/screen.css" rel="stylesheet" media="screen, projection" type="text/css" /> |
The following lines tell the browser to link first to a mobile-friendly CSS file. Then, if and when the width is 600px
, link to the normal, desktop CSS file. The idea is that bandwidth is scarcer on mobile, so we don’t mind downloading two files on a desktop machine if we have to.
<!-- For mobile displays --> <link href="/css/mobile.css" rel="stylesheet" media="screen, projection" type="text/css" /> <link href="/css/print.css" rel="stylesheet" media="print" type="text/css" /> <!-- For desktop displays --> <link href="/css/screen.css" rel="stylesheet" media="only screen and (min-width: 600px)" /> |
To create my mobile.css
, I copied screen.css
, and made the following changes.
- Change table elements padding to
2px
th, td, caption {padding: 2px;}
- Resize all image widths to fit on screen
a img {border:none;max-width:90%}
- Change
input
text fields to 67% width.input.text, input.title {width: 67%; padding: 5px;}
- Change
textarea
inputs to 80% width, and reduceheight
to150px
.textarea {width: 80%; height: 150px; padding: 5px;}
- Change the overall
container
to 90% width..container {width: 90%; margin: 0 auto;}
- Change all
span
grid classes to 100% width..span-1 {width: 100%;} ... .span-24 {width: 100%; margin-right: 0;}
- For some reason, I ended up deleting all
input.span
andtextarea.span
classes, though I’m not sure why now. - Change all
append
grid classes to0px
right padding..append-1 {padding-right: 0;} ... .append-24 {padding-right: 0;}
- Change all
prepend
grid classes to0px
left padding..prepend-1 {padding-left: 0;} ... .prepend-24 {padding-left: 0;}
- Change all
pull
grid classes to0px
left margin..pull-1 {margin-left: 0;} ... .pull-24 {margin-left: 0;}
- Change all
push
grid classes to0px
margin..push-1 {margin: 0;} ... .push-24 {margin: 0;}
Not pretty, but it seems to work well. Happy CSS!
7 Comments to 'Making Blueprint CSS Grid Mobile-Friendly'
July 20, 2012
Thanks for this article. It saved me from re-CSSing my whole site.
February 15, 2013
Now, I know this article is a couple years old but I was hoping to get some input. As of the last 9+ months I’ve been designing all of my sites and projects with a responsive or adaptive approach. I typically use ZURB Foundation or Susy with Compass. Now before the “responsive design craze” I used Blueprint CSS on all of my projects. I’m one of those coders who truly enjoys HTML and CSS and was wondering if you have seen any other recent methods, maybe using @breakpoints, to turn a Blueprint CSS site into a responsive site?
Figured I’d I ask.
February 26, 2013
that qould be interesting for me, too! I used blueprint a lot and really liked it. some responsive additins would come in handy. I already started investigating if it was possible to add breakpoints and media queries to BP as well, but with no luck so far.
March 2, 2013
Thank you. Its a quick way and works ok.
November 25, 2013
Stefan: So I have been playing around with Compass (SASS) and working on a function that takes your current BlueprintCSS site and creating Breakpoints. I would love for either some collaboration or testers. If your interested I’ll be posting to Github as soon as its ready. (@ http://github.com/jcanfield/).
July 6, 2014
Thank you so much for this. I had just finished my layout and then realized blueprint isn’t responsive for mobile. lol
September 26, 2015
hey thanks for the tips. really great. Appreciate http://nautech-group.com/