Responsive gridding what is it and how to achieve it

Question

I just tested few of my webpages in cross browsers testing tool and found out that for lower resolutions all my divs were not coming separately.

Afters googling I found out about responsive griding.

After reading that I wanted to ask that whether responsive griding is nothing but making your web page responsive to different changes in screen sizes or does it have anything more to it

Also I am using purecss to make my web page responsive so I needed to know whether this is the right way or and what other ways are there to do this.

Answer 1

Pretty much, it's also about curtailing content based on your audience. Say that people on mobile don't need to read all the reviews on the page you would hide it or show it in a different way. Whether or not to use pure is completely your personal preference. There are a gargantuan amount of responsive frameworks, you should look at what they offer to your own goals of customization or extensibility. Foundation for example offers lovely JavaScript addons you can use for modals, sliders and navigation.

Good luck and please add to your question if you need to ask more!

Your choice to use pure I feel is a good one because its extremely light weight and style agnostic. While bootstrap and foundation are more popular choices they can be up to 10 to 20 times larger.

Check out TukTuk as well, its similar in nature to Pure: http://tuktuk.tapquo.com/

Answer 2

Yes, you've got the right idea. You can use frameworks like Twitter Bootstrap, or Zurb Foundation, which have all the CSS you need for responsive grids. The basic idea is using CSS media queries to apply different CSS rules for different screen sizes. Javascript can also be used to show/hide features which might work better on mobile.