Grid systems, universally, being CSS frameworks, are idiotic rubbish that much like HTML 5 I can’t fathom how anyone is DUMB ENOUGH to see advantages in using. Herpafreakingderp.
As to “responsive design” this is nothing new to people who’ve been designing fluid all along… It’s an evolutionary not revolutionary concept, finally giving us the tools that prior to this we’d rely on scripting to accomplish (see ‘mcSwitchy’). Now like any old concept it has a new name.
If you are used to designing fluid, used semantic markup with separation of presentation from content, and understand specificity; it’s just the next logical progression… and if you have a fluid layout built using simple containers, it’s also piss simple to do.
Take a fairly simple markup:
<div id="pageWrapper">
<h1>Site Title/Logo</h1>
<ul id="mainMenu">
<li>blah</li><li>Blah</li><li>blah</li>
</ul>
<hr />
<div id="columnWrapper">
<div id="contentWrapper"><div id="content">
<h2>Sample</h2>
<p>Sample Content here</p>
<!-- #content, #contentWrapper --></div>
<div id="sideBarWrapper">
<div id="firstSideBar">
<p>Blah Blah Blah</p>
<!-- #firstSideBar --></div>
<div id="secondSideBar">
<p>Blah Blah Blah</p>
<!-- #secondSideBar --></div>
<!-- #sideBarWrapper --></div>
</div>
<hr />
<div id="footer">
Footer Content
</div>
<!-- #pageWrapper --></div>
feed it this for media=“screen,projection,tv”
#pageWrapper {
min-width:752px;
max-width:68em;
width:95%;
font:normal 85%/150% arial,helvetica,sans-serif;
}
* html #pageWrapper {
width:752px; /* give legacy IE the crappy fixed width, OH WELL! */
}
h2 {
padding:0 0.8em 0.8em;
font:normal 125%/120% arial,helvetica,sans-serif;
}
p {
padding:0 1em 1em;
}
#fauxColumns {
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats IE */
}
#contentWrapper {
float:left;
width:100%;
}
#content {
padding-top:1em;
margin-right:17em;
}
#sideBarWrapper {
float:left;
width:16em;
margin-left:-17em;
}
and you already have “responsive” – aka semi-fluid – two column layout… it already adjusts to a range of screen sizes and auto-scales up to font size. Media queries just provide simple extra steps… for example adding or removing columns:
media=“screen and (min-width:1238px)”
#pageWrapper {
max-width:74em;
}
#content {
margin:0 17em;
}
#sideBarWrapper {
float:none;
width:auto;
margin:0;
}
#firstSideBar,
#secondSideBar {
position:relative;
float:left;
width:16em;
margin-left:-17em;
}
#secondSideBar {
margin:0 -17em 0 0;
left:-100%;
}
hey look, three column layout. Split the one outer #sideBarWrapper into it’s two sub-child columns.
media=“screen and (max-width:751px)”
#pageWrapper {
min-width:192px;
width:100%;
}
#content {
margin:0;
}
#sideBarWrapper {
float:none;
width:auto;
margin:0;
}
Single column layout for narrow displays… Toss in the various trips to make the iphone actually obey what you’re telling it to do, and DONE.
Not exactly rocket science – unless of course you are only thinking in fixed widths or that grid asshattery, in which case the very notion of ‘responsive’ is alien… those of us who’ve been doing fluid and semi fluid this isn’t anything ‘new’ – we’ve been doing it all along!
It just took a fancy new name to get the fixed-widthtards (and their close cousins the elastiderps) with their crappy little stripes to pay attention.