Thinking in Boxes

Cover photo by Guilluame Bolduc on Unsplash.

Introduction

When you take a look at a website you might be left in absolute awe about the layout or otherwise. If it's the former you might think: How did they do this? And if it's the latter you might think: I can do better than this.

Whatever the case might be you might launch your code editor with an intention of recreating the site's layout. Unless you are experienced in designing a website you might run into trouble and spend countless hours on search engines looking for a solution.

The hours spend on the search engine can be saved if you can create a mental model of website layout. Once you get used to this model, you'll gain a high level of confidence when you set out to create any layout you find out there. I call the mental model: Thinking in Boxes.

Now, you might ask: Why think in boxes? That's because everything on the Web page are boxes and you can move them as you deem fit.

Take a look at the image below. I have highlighted all Web page elements on Google's home page and everything looks like a box!.

I sense another question popping into your head: Why are they boxes and not some other shapes?

Let's find out.

When I highlighted Google's home page you'll notice that I used borders all through and the borders are all green. The color is from CSS that I added to the Web page via the developer tools and in-turn all elements appeared as a "box".

The reason they appeared as a box is that all HTML elements can be considered as box in CSS. What? Where did this come from? The answer is simple: CSS box model.

CSS Box model

The CSS box model is box around Web page elements that is made up of the following properties:

• margin
• padding
• border
• content

Margin

This is the area outside the box.

Padding

The area around the content.

Border

The border goes around the padding and content

Content

The content of the box

For more information on CSS box model, I wrote about it.

These properties can be manipulated to move a desired Web page element to another location on the Web page because I believe the Web page elements are just boxes.

Below I have moved the "Google" below the search box using the margin property and as highlighted it's just a box.

How about we move the logo to the left? Well it's easy!

You can move any box Web page element around because it's a box. But wait, am I sure about that? No. How come?

Well if you plan on moving a Web page element, it has to be a block-level element. Then what if it's an inline-level element like span? You can change it to a block-level element using CSS display property with a value of block then you can move it.

You can use other properties aside margin to move Web page elements. They include:

• transform
• position

When you use transform you can do the following among others:

• Rotate a box
• Move the box along the X and Y axis
• Scale the box
• Skew the box

The image below is a profile page on Unsplash in which I applied the transform property with a value of translateX(5%) and black border.

The position property can be employed to move a "box" to almost any location on the Web page.

In the image below, all boxes are moved with the position property and offset properties i.e. top, bottom, right, left.

How to think about layout

The next time you see a Web page layout, just think of it as one giant big box i.e. the root html element with lots of boxes arranged in it (starting with the body tag). You can rearrange the box as you like.

Have this at the back of your mind the next time you start a Web project: It's just one giant box and I can arrange boxes in it the way I want and I can manipulate the boxes' behavior with CSS or JavaScript.

Side note

If you'll like to apply borders around an entire Web page elements like I did with Unsplash and Google perform the following steps:

1. Open the Web page.
2. Right click on any element on the page and select Inspect element, this will open the Developer tools
3. Under the Rules tab click on the + to add new CSS to the page as shown in the image below

If you are using Chrome, this will be under Styles tab.

1. Then you can apply styles to all elements using the universal selector *. Example

/**
 * This will apply a black border around every
 * element on the Web page.
 */
* {
    border: 2px solid #1a1a1a;
}

Conclusion

HTML elements are boxes in CSS and you can move them around. When you arrange them to form a pattern it's known as layout. When you apply color and animation to the layout it's now web design.