Thinking in Boxes
Tags: html, css, design
Published: 2020-06-25 16:23:26

---
title: Thinking in Boxes
published: true
description: A guide on how to think about Web layout and design
tags: html, css, design
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hvjx87theh75auhoqgus.jpg
---

> Cover photo by [Guilluame Bolduc](https://unsplash.com/@guibolduc) on [Unsplash](https://unsplash.com).

##__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!.

![Home page of Google's search engine with elements highlighted](https://dev-to-uploads.s3.amazonaws.com/i/6vepqeimqiuystjwq47y.png)<figcaption>Google's Home page</figcaption>

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

Let's find out.

<hr>

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](https://dev.to/ziizium/the-css-box-model-14k).

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.

![Google's Home page with the logo moved below the search box](https://dev-to-uploads.s3.amazonaws.com/i/ci1k45b6sf0f2mxf0wpr.png)<figcaption>Google's home page</figcaption>

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

![Google's Home page with the logo moved to the left of the screen](https://dev-to-uploads.s3.amazonaws.com/i/u7mabneptlxeasbs5fg8.png)<figcaption>Google's home page</figcaption>

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](https://unsplash.com) in which I applied the `transform` property with a value of `translateX(5%)` and black border.

![Altered profile page on Unsplash](https://dev-to-uploads.s3.amazonaws.com/i/347bwup77om2rnvb6svc.png)<figcaption>Profile page on Unsplash</figcaption>

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`.

![Colored boxes shown in Firefox Web browser](https://dev-to-uploads.s3.amazonaws.com/i/8sl8qyeozc3p3k9ehih0.png)<figcaption>Colored boxes</figcaption>

##__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 <b>+</b> to add new CSS to the page as shown in the image below

![Button to add new rule in Firefox Web browser](https://dev-to-uploads.s3.amazonaws.com/i/a1auz1pue9lthsq8xaeh.png)<figcaption>New CSS rule button in Firefox</figcaption>

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

![Button to add new rule in Brave Web browser](https://dev-to-uploads.s3.amazonaws.com/i/2zihmghorvjwidng6q2p.png)<figcaption>New CSS rule button in Chrome</figcaption>


4. Then you can apply styles to all elements using the _universal selector_ <b>*</b>. Example

```css
/**
 * 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_.