Join Morten Rand-Hendriksen for an in-depth discussion in this video Designing with boxes, part of Making Sense of the CSS Box Model.
- Before we dive any deeper into the CSS box model, lets take a step back and look at what the realization that is made of boxes means for the web design and development process. If you ask me, I think a comprehensive understanding of the CSS box model is the most important skill for anyone working as a web designer and developer. Knowing on a fundamental level that the web is made of boxes makes the process of designing and developing a site to look and function the way you want into a simple task of creating and stacking boxes of content.
So let me show you what I mean. Most of my web design projects start with a simple idea and pen and paper or a white board. Starting with the core content. A video, an article, some sort of content model. I sketch up in raw terms what I envision in will look like. This is wire framing and rapid prototyping at its very simplest and most effective. Once I have a general sketch of what the core content will look like, I move on to the rest of the elements on the page.
Header, menu, side bars, footers, meta content. Whatever needs to be or might want to be on the page. The result of this process is usually a pile of different sketches that show various iterations and implementations around a common theme. Typically at different screen widths and in different scenarios. This is where the CSS box model comes in. Even at this early stage, before a single line of code or content is written, even before I have a firm idea of what this entire thing will end up looking like, I can start sketching out the main boxes and create a map for myself of how everything will be put together.
During this process it's easy to identify grouped content like a meta section, an article header and so on, and find out what blocks of content belong together, and what blocks need to be separated or contained further to allow for different layout solutions. The end result is a comprehensive map of the different boxes that in the end will make up the full layout of the view complete with nesting, positioning and relationships. Once the boxes are established, work and start on both design and development.
Fonts, colors, spacing, and positioning can be refined and perfected on the design end while the boxes will work as a map that shows the semantic structure of the HTML mark up for the page. Remember, every HTML tag is a box, so for every box drawn, there will be and accompanying tag. In using this process, the biggest challenge, which really isn't a challenge at all, will be figuring out what tags to use.
He covers techniques such as styling text and images, floating content, using display properties, and positioning elements. He'll also show you how to take your website beyond boxes with advanced CSS tools and techniques. Each lesson is supported by real-world demonstrations of the concepts in action, and Morten closes with a "nightcap" that will get you thinking about going further with CSS.