Responsive Web Design: CSS Grid Template

It has been ages since my last post, but it doesn’t mean I haven’t been busy working away on different things. One of the things I have been spending a lot of my time on is Responsive Web Design….

And below is my Responsive Web Design: CSS Grid Template I created for all of you all to use, learn and enjoy:

Responsive Web Design: A brief introduction

There is heaps that I can say about this topic (and I am looking at writing a summary post about it in the near future), but in the meantime if you are not sure what it is, here is a very quick and nasty explanation.

Responsive Web Design is based on the concept that we can no longer design web sites based on a fixed width. Up to not so long ago (and I’m sure it still happens heaps today), we would design sites based on the most common screen resolution. For a long time this was 1024 x 768, and hence most sites still today have a fixed width of 960px. If you have a bigger monitor then the page is set in the centre and the the higher your resolution the more the blank space on either side of the web page.

For many years this has been an acceptable way to design sites, but with the introduction of more and more mobile devices this kind of design just doesn’t cut it anymore. This is because there isn’t just one or two major resolutions to design for anymore, we need to cater for a large variety of browser sizes.

Responsive Web Design has come about because of this problem. Using current web standards, it now allows for a fluid or responsive design, where there is no fixed width for objects on web pages, but rather widths are based on percentages of the browser real estate. This is very powerful because on large browsers we can use the size to our advantage. Similarly, on small browsers (such as mobile) we can resize and re-order objects to make this easier to view and read for the user.

Responsive Web Design: More Info

I hope my quick explanation above has some-what helped clarify what responsive web design. If you are looking for more information (or I have confused you even more), then check out these links below…they are really great and do an infinitely better job at explaining this concept than me:

• Responsive Web Design by Ethan Marcotte (its original creator)
• Beginner’s Guide to Responsive Web Design – Treehouse Blog
• Screencast: Braindump on Responsive Web Design by Chris Coyier

CSS Grid Template: General Info

Ok now for the good part… the template. I am not going to go through all of the in’s and out’s of the template but you can check it out on CodePen.io. If you are unfamiliar with CodePen then you should seriously check it out…. it’s amazing! It is an online front-end code editor which renders HTML, CSS and JS and displays the output below. You don’t need an account to use it so it is an awesome way to quickly test something out as your are developing.

My template uses SCSS (a slight variation of the SASS pre-processing language) with Compass, however if you can have a look at the compiled CSS by clicking on “CSS (scss)” on the top left of the second box within CodePen.

For more info about CodePen.io check out this ScreenCast.

I wrote the template myself, however it is has been based on the following items:

• 1140 CSS Grid
• Don’t Overthink it Grids

CSS Grid Template: How To Use it

To simulate what the template would look like on different sized browses, simply drag your browser window to re-size it to a smaller size. As you resize it you should see things shrink and eventually re-order. If you then re-size it bigger you will see the grid columns float to the right again and things re-size larger.

Without going into too much detail, all this is possible because of media queries (for more info have a look here). The re-sizing of the font is done by the use of ems as opposed to px. There is heaps of info about ems, but personally I find this to be a really helpful article.

Responsive Web Design: CSS Grid Template

I tried to embedded the final result from CodePen but for some reason it won’t display, so unfortunately to view the result you will need to go here >>> Responsive Web Design: CSS Grid Template

Note: To view the code click on “Edit this Pen” located on the bottom left of the page. From there you can fork your own and make your own variation.

Conclusion

Hope this post has helped some of you guys or at least introduced you to some new concepts and cool stuff that can be done in the land of web design / development.

I am currently working on a more detailed and “proper” boilerplate (or template) which will contain the same principles, but heaps more cool stuff…. this will be coming soon and I will post this once done. In the meantime if you have any question or queries, shoot me an email or post a comment below.

Thanks guys

Luca