Can someone explain to me the basics of the box model in web design?

 

I'm planning to make my next project a responsive site and I'm quite confused by the box model principle.

 

On the responsive templates I've seen it's all 'rows and columns', yet there's sometimes like 16 columns, how the heck do I put content into that?

 

 

Is there anything I should be reading as a sort of primer for designing a responsive website?

see here and here

 

these frameworks can help u build responsive websites

Here's the official Box Model tutorial from w3.org:-

http://www.w3.org/TR/CSS2/box.html

Although it's old and relates to HTML4 it's still valid.

The columns are referring to grid theory, which isn't really much to do with the box model.

Edited June 21, 201214 yr by Renaissance-Design

Yea, you're getting mixed up mate.

 

The box model is what you need to learn to be proficient with css positioning.

 

The Grid system (RD's link is the uber one) is a methodology for building grid based css layouts. It's not required to build responsive sites. You can look at Fluid Grids as a way to design in grids and implement it responsively in css, without css grids.

 

CSS Grids can be quite confusing if you're new and imo aren't needed with basic sites, more for modular, big sites or those that are changed often(news sites, big blogs, etc.). If you want to just get onto making basic adaptive sites just chuck a few Media Queries in.

 

Then try the fluid and em/% based layouts.

 

Those frameworks you find like bootstrap and 960 are often mega bloated and just add to confusion when you're a beginner. Start from scratch, using tutorials, it's easier.

 

Goodluck,

~evu.