Responsive CSS Boilerplate

Web Design: Responsive CSS Template (CSS Responsive Web Design)

What are CSS Boilerplates?

Let’s start with a boilerplate – interestingly, the term arose from the newspaper business, but that’s a story for another day. It’s basically any seemingly repetitive code that show’s up time after time with little or no changes made to it. Think of it as a template.

Therefore a CSS Responsive Boilerplate would be the building blocks, a foundation on which you build upon in order to achieve a responsive website, suitable for all devices. Not sure what I mean by responsive, read on.

What’s Responsive Web Design?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. (Smashing Magazine)

This consists of a of flexible layouts, images and an intelligent use of CSS media queries. For example, if one of our readers wanted to continue reading this article on the move, by switching from his laptop to a portable device such as his iPad, the website should automatically adjust the layout in order to best serve the reader. A practice that is often used when designing responsive website is to design in columns. If you had 3 columns on a larger device, when you moved to a smaller device, eg. iPad, this would reduce to two columns, with the third falling underneath, and so on for mobile devices. If a mobile device can only accommodate the width of one column, the other two would stack underneath.


Responsive CSS Boilerplate Snippet

To use this snippet, I would recommend that you start your design for the smallest device and work your way up, this way it minimises the need for repeating code, and wasting your time and effort. To make your CSS responsive, place your code in between the curly brackets.

@import url();
/* Larger than Mobile */
@media (min-width: 300px) {

/* Larger than Phablet */
@media (min-width: 550px) {

/* Larger than Tablet */
@media (min-width: 750px) {

/* Larger than Desktop */
@media (min-width: 1000px) {

/* Larger than Desktop HD */
@media (min-width: 1200px) {