The site uses Bootstrap 4 and Font-Awesome Pro. Refer to their documentation for general concepts and layout control.
Here are the general styles. Some appearance issues have been customized by an extension css file.
[ item here ] is the class or html code markup
Headings
Heading One [<h1></h1>]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Heading Two [<h2></h2>]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Heading Three [<h3></h3>]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Heading Four [<h4></h4>]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Heading Five [<h5></h5>]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Heading Six [<h6></h6>]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Horizontal Rule
Think of it as a line [hr]
Paragraph Text
[<p></p>]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lists
[<ul> <li></li> <li></li> <li></li> </ul>]
- First bullet
- Second bullet
- Third bullet
Text Alignment
Left aligned text on all viewport sizes. [text-left]
Center aligned text on all viewport sizes. [text-center]
Right aligned text on all viewport sizes. [text-right]
Text Elements
(IE: weight, italics, small, highlight)
Bold text. [font-weight-bold]
Normal weight text. [font-weight-normal]
Light weight text. [font-weight-light]
Italic text. [font-italic]
Small Text. Fine or small print. [<small></small>]
Highlight Text. Use the mark tag to highlight. [<mark></mark>]
Text Colors
text-primary
text-secondary
text-success
text-danger
text-warning
text-info
text-light
text-dark
text-muted
text-white
Background Colors
Alerts
Alert - Alert Info. Used with paragraph tag [alert alert-info]
Alert - Alert Warning. Used with paragraph tag [alert alert-warning]
Alert - Danger. Used with paragraph tag [alert alert-danger]
Alert - Alert Success. Used with paragraph tag alert alert-success]
Not used as much -- if at all. So, colors may not be set correctly.
Alert - Alert Primary. Used with paragraph tag alert alert-primary]
Alert - Alert Secondary. Used with paragraph tag alert alert-secondary]
Alert - Alert Light. Used with paragraph tag alert alert-light]
Alert - Alert Dark. Used with paragraph tag alert alert-dark]
Buttons
Button Sizing and Styles
Small Buttons.
Videos
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/EzcmCCN6x-0" allowfullscreen></iframe> </div>
Images
[img-fluid] Image size is based on viewport size
Special Content
There are numerous content "widgets" in use by the site. This content is self-contained, self-styled. It would be quite cumbersome and 'expensive' to change it different stylist purposes so 'design' around it if its needed on a page. Typically, we do this where content and code are complex and interwined. When an addition or update is needed, it only needs to be preformed in one area. The Product finder, for example, appears in 12 different locations.
For example:<mvt:item name="procontentx" param="snippet(paper_finder)" />
Renders this widget:
A SUPERIOR PAPER IS JUST A CLICK AWAY
Looking for an alternative or replacement for another inkjet paper? Use our PAPERfinder to find the best Red River Paper product for the job.
