Following is an outline description of some of the major elements in (typical) hierarchical order.
Which class is attached to which element within the hierarchy often varies. For example, in some instances you can apply '.normal-width' to the '.article', fixing the width of all child content. In other instances you may need content to be variable widths within the '.article'.
| Element | Common Classes | Styling |
|---|---|---|
| .section | .normal-section | 100% width, standard vertical padding |
| .separate | extra vertical padding on large screens | |
| .separate-top | extra top padding on large screens | |
| .separate-bottom | extra bottom padding on large screens | |
| .border | top and bottom border | |
| .border-top | top border | |
| .border-bottom | bottom border | |
| .box | top and bottom box effect | |
| .box-top | top box effect | |
| .box-bottom | bottom box effect | |
| .article | .normal-width | fixes standard maximum width on large screens |
| .normal-width.narrow | fixes narrower maximum width on large screens | |
| .normal-width.xnarrow | fixes narrowest maximum width on large screens | |
| .normal-box | standard horizontal padding | |
| .row | .normal-width | fixes standard maximum width on large screens |
| .normal-width.narrow | fixes narrower maximum width on large screens | |
| .normal-width.xnarrow | fixes narrowest maximum width on large screens | |
| .normal-box | horizontal padding | |
| .normal-title | standard title block styling | |
| .normal-text | standard text block styling | |
| .column | .normal-box | standard horizontal padding |
| .column-33 | 33.3% width on large screens | |
| .column-50 | 50% width on large screens | |
| .column-66 | 66.7% width on large screens | |
| .column-left | floats left, can be placed before or after '.column-left' to determine order on small screens | |
| .column-right | floats right, can be placed before or after '.column-left' to determine order on small screens |
Scroll Animation (examples on index.html) - disabled on mobile devices.
| Class | Element (usual) | Styling |
|---|---|---|
| animatein-fade | .section, any | fade in at bottom |
| animateout-fade | .section, any | fade out at top |
| animatein-slide | .section, any | slide in at bottom |
| animateout-slide | .section, any | slide out at top |
| animatein-background | .row-background | parallax effect at bottom |
| animateout-background | .row-background | parallax effect at top |
