I happened to use Blueprint CSS to build a website recently and I was trying to figure out how to retrofit the template for a smart phone. I did figure out the first part.


rel="stylesheet" href="/css/main.css" type="text/css" media="screen"
rel="stylesheet" href="/css/screen.css" type="text/css" media="projection"
rel="stylesheet" href="/css/print.css" type="text/css" media="print"
rel="stylesheet" href="/css/mobile.css" type="text/css" media="mobile"
rel="stylesheet" href="/css/ie.css" type="text/css" media="screen, projection"


I basically wrote styles on the page to define the look and feel after reading some suggestions in blogs online. You basically want to hide some of the elements you don’t want to display for a phone like a topNav or a leftNav.

#sidebar, .media, #orange, .news, .mhide, #box1, .line, .slideshow{
display: none;
}


You want to define the heading tags to have the same weight.

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}


Forcing underlines on links make the interface familiar while on a phone.


a:link, a:visited {
text-decoration: underline;
color: #0000CC;
}
a:hover, a:active {
text-decoration: underline;
color: #660066;
}


I do realize that not all devices detect the media=”mobile” query.

I haven’t gotten into detecting a mobile devices too much, but I do know a PHP script that detects it and this can be useful when testing a device. I’ll update when I figure it out.

Any comments write them below.