Layout: Set Up Secrets

Layout is meant to create visual consistency across the pages. A contractor would not build the walls of house before setting the foundation. Likewise, your website layout must be developed first.

Main Structures

Just like you can expect a house to have floors, walls, and a roof, there are some main structures that nearly every website layout consists of.

• Header
• Navigation
• Content
• Footer

Before you dive into colors and typography and all the fun stuff that you have been excited to develop, take a moment to set your layout. Even before you have developed the header or footer to specification, you can set in place where they will go. Create a placeholder box for each layout element and set their width, height, margin, and padding. Think about how the layout pieces relate to one another in terms of rows or columns. Keep in mind that you should be developing mobile first, then scaling up your css media queries to desktop.

Blank Space

Surprise, surprise, it’s not just a Taylor Swift song. Many layouts will have a set empty space on each side of the main content. Rather than having to write out the same margin and padding on every content component, why not set it globally. This method reduces lines of code and also mistakes and inconsistencies. Perhaps the designer set a left and right margin of 8px on mobile, 16px on tablet, and 32px on desktop. Write it out one time and you’re done!

CSS Layout Options

Flexbox

Flexbox is my favorite method of creating a css layout. It is a very powerful and simple tool. It is used more frequently in my experience than any other layout method.

If you’re curious about learning flexbox, here are a couple of fun ways to learn it. 

https://flexboxfroggy.com/

http://www.flexboxdefense.com/

CSS Position

CSS Position is my second most used layout method. I recommend using these properties on the header and footer for fixing them to the top or bottom of the screen. It also has the ability to remove items from a layout and place them anywhere on the screen. Check it out!

https://learnlayout.com/position.html

CSS Grid

CSS Grid is another method that breaks the page into columns and rows like a chess board. While this is not my preferred method of layout, I suggest taking a look at it and deciding for yourself. 

https://cssgridgarden.com/

I have created a rough layout example to help you visualize some of these concepts. Feel free to adjust, improve, and copy parts of it for your own practice.

Please take this knowledge and these resources and apply them to your next project. Laying the foundation with a solid layout will save you many painstaking bugs and page breaks. Double check every screen size before you start developing the individual components. You are one step closer to being a Precise Dev.