Web Type

Layouts and Structure

Normal Flow

With HTML, the normal flow is a top-to-bottom rendering of the elements.

Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one. Inline elements appear adjacent to each other.

<h1>Normal Flow</h1>
<p>
  With HTML, the normal flow is a top-to-bottom rendering of the html file.
</p>
<p>
  Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one. <em> Inline elements appear adjacent to each other.</em>
</p>

Change the Display properity

Any element’s display property can be changed by overriding the default behavior with CSS.

For example, <div> elements by default have the property display: block;, for example, but this can be adjusted by adding display: inline and specifying a width property for div in CSS.

Positioning

static | relative | absolute | fixed

Positioning allows you to control the layout of a page using the position property. Positioning allows you to establish elements independent of the normal flow. By default, all elements have a position: static CSS property which gives them their normal flow.

Relative Positioning

This offsets an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.

<div>...</div>
<div class="example">...</div>
<div>...</div>

.example {
  background: blue;
  position: relative; 
  top: -15px;
  left: 100px;
}

Absolute Positioning

The element’s box is completely removed from the flow of the document and positioned with respect to its containing block, which may be another element in the document or the initial containing block. Whatever space the element might have occupied in the normal document flow is closed up, as though the element did not exist.

<div>...</div>
<div class="example">...</div>
<div>...</div>

.example {
  background: red;
  position: absolute; 
  top: 0; 
  right: 0;
  width: 60%;
}

Fixed Positioning

The element’s box behaves as though it were set to absolute, but its containing block is the viewport. Viewport refers to the boundaries of browser window. This means that fixed position elements don’t move when the page is scrolled, because it is always relative to the window (instead of the document.)

<div>...</div>
<div class="example">...</div>
<div>...</div>

.example {
  background: blue;
  position: fixed; 
  bottom: 0;
  right: 0;
  width: 40px;
}

Z-index

The z-index value specifies the stack order of an element for any non-standard positioned elements. This is similar to how layers work in Photoshop.

An element with a bigger number is always in front of an element with a smaller number.

The default is 0. It is good to use intervals of 10 in case additional elements need to be placed in between.

<div class="square">...</div>
<div class="square">...</div>
<div class="square" >...</div>

.square{
  width: 80px;
  height: 80px;
  background: grey;
  display: inline-block;
}

.square:nth-child(2) {
  background: blue;
  z-index: 10; 
  position: relative;
  top: 40px;
  left: -40px;
}

.square:nth-child(3) {
  position: relative;
  top: 80px;
  left: -80px;
}

The Container

When positioining elements, the containing block / parent is your positioning context or reference point.

Overflow

visible | hidden | scroll | auto | inherit

Overflow accounts for when your content doesn’t fit within the container and specifies how the text overflows.

<div class="container">
  <div class="line">...</div>
  <div class="line">...</div>
  <div class="line">...</div>
</div>

.container {
  overflow: hidden; 
  height: 80px;
}

.line {
  height: 1.5em;
  background: #e6e6e6;
  margin-bottom: .5em;
}

Hierarchy & Structure

Visual hierarchy is the order in which the eye perceives what it sees. This order is created by visual contrast between forms in a perceptual field.

Content Types

Structure within a chunk of content: the typographic organization of repeating groups of text. In order to structure your typography, we can begin to identify what categories of content there are.

Wireframes

Structure within a page: the visual organization of display patterns laid out within a webpage. Different types of pages will have diffent skeletons.

Sitemap

Structure within a website: the organization of sections of content within a website.

Grids and Columns

CSS Grid

CSS Grid allows you to define the column-row structure for all of your content. By declaring display: grid on a container element, child elements need to be defined where they align to on the grid.

<div class="container">
  <div class="cell item">
    .item
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
</div>

.container {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 2fr 1fr;
  column-gap: .5em;
  height: 200px;
}
 
.item {
  grid-column-start: 1;
  grid-column-end: 4;
}
.item

Flexbox model

Flex box is a popular method for creating “flexible” columns of containers. By declaring display: flex on a container element, child elements could be made to shrink or expand according to specified properties.

<div class="container">
  <div class="col">
    stuff
  </div>
  <div class="col">
    stuff
  </div>
  <div class="col">
    stuff
  </div>
</div>

.container{
  display: flex; 
  column-gap: .5em;
}

.col{
  flex: 1;
}
stuff
stuff
stuff

Grid vs. Flexbox