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 reduce height
to 150px
. 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
and textarea.span
classes, though I’m not sure why now. - Change all
append
grid classes to 0px
right padding. .append-1 {padding-right: 0;}
...
.append-24 {padding-right: 0;} |
- Change all
prepend
grid classes to 0px
left padding. .prepend-1 {padding-left: 0;}
...
.prepend-24 {padding-left: 0;} |
- Change all
pull
grid classes to 0px
left margin. .pull-1 {margin-left: 0;}
...
.pull-24 {margin-left: 0;} |
- Change all
push
grid classes to 0px
margin. .push-1 {margin: 0;}
...
.push-24 {margin: 0;} |
Not pretty, but it seems to work well. Happy CSS!