Part I - Learning

Part II - Preparation

Part III - Writing the Code

Part IV - Templates

Part V - Exercises

Appendix B - Orders, Tiers and Piers

The below code is proprietary code that I designed to be easy to learn and to implement in making a website responsive both on the desktop and mobile. It is based on three components.

Order

.order

An Order groups tiers and piers neatly into parts or sections of the webpage. Creates horizontal sections to the webpage to keep content organized within a section of the page.

Pier

.pier

Columns or blocks of content within the tier. Within a Tier there will be a certain amount of Piers based on layout preference. It may look like the following (if there were four columns of information):

pier1of4, pier2of4, pier3of4, pier4of4

All would have widths totally 100% of the page. This would include margins and padding.

Tier

.tier

Tiers are sections or rows that span across the webpage. Tiers solve floating issues by forcing the order to clear.

Piers and Tiers by Columns

2 columns
pier1of2   pier2of2

3 columns
pier1of3   pier2of3   pier3of3

4 columns
pier1of4   pier2of4   pier3of4   pier4of4

5 columns
pier1of5   pier2of5   pier3of5   pier4of5   pier5of5

6 columns
pier1of6   pier2of6   pier3of6   pier4of6   pier5of6   pier6of6

7 columns
pier1of7   pier2of7   pier3of7   pier4of7   pier5of7   pier6of7   pier7of7

8 columns
pier1of8   pier2of8   pier3of8   pier4of8   pier5of8   pier6of8   pier7of8   pier8of8

You can keep going if you really need more columns. I haven’t come across a situation where I needed more than 8 columns.

HTML Code for Piers 2 through 8 column

Decide on how many piers (columns) across you need for your order (section). If you are doing 4 piers across, you only need to use the code for 4 piers. Your CSS file needs to have the CSS code for 4 piers as well.

2 piers

<div class=”order tier”>
<div class=”pier pier1of2”>Column 1 of 2</div>
<div class=”pier pier2of2”>Column 2 of 2</div>
</div>

3 piers

<div class=”order tier”>
<div class=”pier pier1of3”>Column 1 of 3</div>
<div class=”pier pier2of3”>Column 2 of 3</div>
<div class=”pier pier3of3”>Column 3 of 3</div>
</div>

4 piers

<div class=”order tier”>
<div class=”pier pier1of4”>Column 1 of 4</div>
<div class=”pier pier2of4”>Column 2 of 4</div>
<div class=”pier pier3of4”>Column 3 of 4</div>
<div class=”pier pier4of4”>Column 4 of 4<div>
</div>

5 piers

<div class=”order tier”>
<div class=”pier pier1of5”>Column 1 of 5</div>
<div class=”pier pier2of5”>Column 2 of 5</div>
<div class=”pier pier3of5”>Column 3 of 5</div>
<div class=”pier pier4of5”>Column 4 of 5</div>
<div class=”pier pier5of5”>Column 5 of 5</div>
</div>

6 piers

<div class=”order tier”>
<div class=”pier pier1of6”>Column 1 of 6</div>
<div class=”pier pier2of6”>Column 2 of 6</div>
<div class=”pier pier3of6”>Column 3 of 6</div>
<div class=”pier pier4of6”>Column 4 of 6</div>
<div class=”pier pier5of6”>Column 5 of 6</div>
<div class=”pier pier6of6”>Column 6 of 6</div>
</div>

7 piers

<div class=”order tier”>
<div class=”pier pier1of7”>Column 1 of 7</div>
<div class=”pier pier2of7”>Column 2 of 7</div>
<div class=”pier pier3of7”>Column 3 of 7</div>
<div class=”pier pier4of7”>Column 4 of 7</div>
<div class=”pier pier5of7”>Column 5 of 7</div>
<div class=”pier pier6of7”>Column 6 of 7</div>
<div class=”pier pier7of7”>Column 7 of 7</div>
</div>

8 piers

<div class=”order tier”>
<div class=”pier pier1of8”>Column 1 of 8</div>
<div class=”pier pier2of8”>Column 2 of 8</div>
<div class=”pier pier3of8”>Column 3 of 8</div>
<div class=”pier pier4of8”>Column 4 of 8</div>
<div class=”pier pier5of8”>Column 5 of 8</div>
<div class=”pier pier6of8”>Column 6 of 8</div>
<div class=”pier pier7of8”>Column 7 of 8</div>
<div class=”pier pier8of8”>Column 7 of 8</div>
</div>

Order, Tiers and Piers Setup CSS Code

The code for tiers, piers and orders below is needed regardless of how many columns you are using.

/* TIERS */
/* Sections or rows spanning across the page */
.tier {
   clear: both;
   padding: 0px;
   margin: 0px;
}

/* PIERS */
/* Columns of content across the page */
.pier {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.pier:first-child { margin-left: 0; }

/* ORDER */
/* Contains the Tiers and Piers */
.order:before, .order:after { content:""; display:table; }
.order:after { clear:both;}
.order { zoom:1; /* For IE 6/7 */ }

You only need to copy the code needed for the number of columns needed. If you only need 4 columns, then copy the code for four piers.

Piers 2 through 8 CSS Code

/* Two Piers */
  .pier2of2 { width: 100%; }
  .pier1of2 { width: 49.2%; }

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
  .col { margin: 1% 0 1% 0%; }
}
@media only screen and (max-width: 480px) {
  .pier1of2, .pier2of2 { width: 100%; }
}
/* End Two Piers */

/* Three Piers */
  .pier3of3 { width: 100%; }
  .pier2of3 { width: 66.13%; }
  .pier1of3 { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .pier { margin: 1% 0 1% 0%; }
  .pier3of3, .pier2of3, .pier1of3 { width: 100%; }
}
/* End Three Piers */

/* Four Piers */
  .pier4of4 { width: 100%; }
  .pier3of4 { width: 74.6%; }
  .pier2of4 { width: 49.2%; }
  .pier1of4 { width: 23.8%; }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .pier { margin: 1% 0 1% 0%; }
  .pier1of4, .pier2of4, .pier3of4, .pier4of4 { width: 100%; }
}
/* End Four Piers */

/* Five Piers */
  .pier5of5 { width: 100%; }
  .pier4of5 { width: 79.68%; }
  .pier3of5 { width: 59.36%; }
  .pier2of5 { width: 39.04%; }
  .pier1of5 { width: 18.72%; }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .pier { margin: 1% 0 1% 0%; }
  .pier1of5, .pier2of5, .pier3of5, .pier4of5, .pier5of5 { width: 100%; }
}
/* End Five Piers */

/* Six Piers */
  .pier6of6 { width: 100%; }
  .pier5of6 { width: 83.06%; }
  .pier4of6 { width: 66.13%; }
  .pier3of6 { width: 49.2%; }
  .pier2of6 { width: 32.26%; }
  .pier1of6 { width: 15.33%; }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .pier { margin: 1% 0 1% 0%; }
  .pier1of6, .pier2of6, .pier3of6, .pier4of6, .pier5of6, .pier6of6 { width: 100%; }
}
/* End Six Piers */

/* Seven Piers */
  .pier7of7 { width: 100%; }
  .pier6of7 { width: 85.48%; }
  .pier5of7 { width: 70.97%; }
  .pier4of7 { width: 56.45%; }
  .pier3of7 { width: 41.94%; }
  .pier2of7 { width: 27.42%; }
  .pier1of7 { width: 12.91%; }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .pier { margin: 1% 0 1% 0%; }
  .pier1of7, .pier2of7, .pier3of7, .pier4of7, .pier5of7, .pier6of7, .pier7of7 { width: 100%; }
}
/* End Seven Piers */

/* Eight Piers */
  .pier8of8 { width: 100%; }
  .pier7of8 { width: 87.3%; }
  .pier6of8 { width: 74.6%; }
  .pier5of8 { width: 61.9%; }
  .pier4of8 { width: 49.2%; }
  .pier3of8 { width: 36.5%; }
  .pier2of8 { width: 23.8%; }
  .pier1of8 { width: 11.1%; }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .pier { margin: 1% 0 1% 0%; }
  .pier1of8, .pier2of8, .pier3of8, .pier4of8, .pier5of8, .pier6of8, .pier7of8, .pier8of8 { width: 100%; }
}
/* End Eight Piers */

This is all the code you need for your orders, tiers and piers and your webpage will be responsive.