The simplicity of responsive design

Here’s how simple responsive design can be. I wanted the website you’re looking at to change shape depending on the viewable area within the browser. It’s a fairly fluid design, the main issue being the </aside> element to the right of the page. Here’s how the elements styling looks in CSS:

aside {
float: right
}

Nothing out of the ordinary here, in fact nothing you wouldn’t expect to see in a stylesheet 10 years ago.

Now here’s the fun bit, w3c created  media queries as part of CSS3 and we can use them to change our selectors properties under certain conditions. Say, we want the element above to drop below the main content if the horizontal browser sizing shrinks below 1000px.

@media (max-width: 1000px) {
aside {
float:none
}
}
@media (max-width: 650px) {
#content h2 {
font-size: 2em
}
}

The CSS within the  media query is applied if the query’s argument is satisfied, in this case the browser sizing falls below 1000px on the horizontal axis. I’ve also changed the size of the heading if it falls below 650px. @media can also be used with the @import directive and also into include an additional style sheet at header level.

The example above is a little simplistic, but what we’re essentially seeing here is the ability to apply very simple conditional statements to CSS, in a sense, CSS is now programmable.