The URI Modern theme and the Component Library contain a few special CSS selectors that can be used in pages and posts to adjust typography and layout.
Note that the following information applies to sites using the URI Modern theme. Older themes are being phased out to unify the look and feel of URI’s web presence.
Typography
Theme Introductory Text
Introductory text can be styled with the class type-intro.
Some introductory text.
Theme Monospaced Text
Monospaced text can be styled using the class type-mono.
This paragraph contains some message set in monotype.
This style is typically reserved for cases where monospaced text improves readability, such as code.
Theme Fullwidth Paragraphs
To improve readability, paragraphs have a maximum width of 800px, while the page has a maximum width of 1000px. To force a paragraph to assume the entire width of the page, use the class fullwidth.
This paragraph might be important, introductory, or contain elements that should float to the page margin. It will appear wider than other paragraphs on the page.
Theme Feature Captions
Captions on heroes and other large images can be styled using the class feature-caption. A photo credit within the caption can be further styled using the class credit on a nested element.
Layout
Theme Alignment
The same fullwidth class used in paragraphs can also be used to facilitate floating images into the right margin. Image alignment can be specified when adding images from the media library, but images aligned right will generally float to the edge of the paragraph. To float the image into the margin, wrap the aligned image in a div with class fullwidth.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec felis tortor. Mauris lobortis cursus tortor, vel porttitor enim. Proin tristique laoreet dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Suspendisse potenti. Donec at vulputate neque, venenatis semper nulla. Vivamus eget commodo neque, sed volutpat purus. Donec vel nisi posuere, luctus ipsum vel, fermentum nunc. Vivamus venenatis laoreet venenatis. Integer odio justo, eleifend quis tellus ut, lacinia iaculis est. Aenean nec odio tortor.
Theme Stages
A stage defines a special type of hero treatment available in the theme. In its most basic implementation, a stage adds a prompter arrow to the bottom of its content. Clicking this arrow invokes a scroll to the content immediately after the stage.
Stages are designed to work best when used in conjunction with heroes formatted as super, but can work with virtually any content.
To add a stage, use the id stage.
See an example of a stage.
Classes
Stages can be further embellished by adding a class to define additional behavior. Currently, one class exists. Adding the class fade will create a stage that remains fixed when the user scrolls, and becomes obscured by the content below.
See an example of a stage with class fade.
CL Fitted Components
Block-level components (all components except buttons, share bars, and social bars) have a bottom margin by default. In rare cases, this may be undesirable. To remove the bottom margin from the component, use the class fitted.
CL Block-level Components
Inline components (buttons, share bars, and social bars) do not have a bottom margin by default. In some cases, this may be undesirable. To add a bottom margin to the component similar to that of block-level components, use the class block-level.