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.