Basic Layouts in HTML

This document is going to show you how to create some simple page layouts. Note: I have a whole web design class where all we do is layouts, so my goal here is to teach you as little as possible to accomplish some common patterns you will want.

• Basic Layouts in HTML
  • Notes
  • Header/Body/Footer
  • Left/Right Chat Bubbles
  • Grid
  • Centered Pop-Up

Notes

I make some use of CSS variables here, which can be defined with a line like this:

--variable-name : value;

And can be accessed with a line like this:

property : var(--variable-name);

In practice, that looks like this:

#main {
  --width: 800px;
  width: var(--width);
}
#footer {
  width: var(--width);
}

I also make some use of calculations in my templates which allow you to do some basic math, like this:

#main {
  height: calc(100vw - var(--header-height));
}

Header/Body/Footer

Here is a template you can use for a fixed header/footer at the top and bottom of the screen and a body that takes up the whole screen.

See the Pen Squares by Tom Hinkle (IACS) (@thinkle-iacs) on CodePen.

The basic concepts applied above are:

1. Fix our main window to the top left and make it take up the whole screen
2. Make the main content lay the items below it out automatically from top to bottom and centered.
3. Fix the height of our three child elements (header/body/footer). 1- Basic Layouts in HTML
   • Header/Body/Footer
   • Left/Right Chat Bubbles
   • Grid
   • Centered Pop-Up. Make our header and footer lay items out left-to-right (display: flex, align-items: center, justify-content: space-between).

Left/Right Chat Bubbles

For the layout How-To, I’m going to use a simple flexbox container, which allows us align items on both a top-to-bottom axis and a left-to-right axis.

I’ll also use two classes (bubble and left and bubble and right) to move them around.

Finally, we’ll do some border rounding for kicks.

See the Pen Squares by Tom Hinkle (IACS) (@thinkle-iacs) on CodePen.

Grid

See the Pen Squares by Tom Hinkle (IACS) (@thinkle-iacs) on CodePen.

Centered Pop-Up

See the Pen Squares by Tom Hinkle (IACS) (@thinkle-iacs) on CodePen.