Style Guide Test Page
On This Page:
- Pattern Lab Overview
- Styles
- WebCMS Rich Text Editor
- JavaScript Snippets
- Widgets and Other Styling Components
Pattern Lab Overview
What follows is a style guide and pattern library, showing many allowed elements for EPA.gov.
Use the pattern lab settings to customize it's view, located at the top right.
Pattern lab is responsive. Use the icons, located at the top right of the screen, to view the code on various devices.
The menu on the top left has all the elements for styling your content.
Styles
Components marked with an "*" can also be applied through the Rich Text Editor. If you can apply the information through the WYSIWYG editor, you should.
In-line Styles
- Abbreviation *
- Adding Definitions *
- Headings *
- Highlighted Headings *
- Horizontal Line *
- iFrame (video) *
- Other Elements
- Italics *
- Strong *
- Small element *
- Mark *
- Super/ Subscripts *
- Warning *
- Pull Quote *
Forms
Images / Graphics
Boxes
- Web Standard: Boxes
- About Boxes
- Related Info *
- Highlight *
- News *
- Alert *
- Multipurpose Boxes
- Special One Item *
- No Style (no Box) *
- RSS *
- Blog *
- Box Alignment *
- Clearing Box (and image) Floats
Lists
- Basic list *
- Ordered list *
- Unordered list *
- Clean list *
(no bullets) - Definition list
- Pipeline *
- Tag list
- Underlined list
On This Page
Tables
Disclaimers
Grid (Columns)
WebCMS Rich Text Editor
Using the Drupal WebCMS editor, you can apply many different styles and formats to your content. Note: many of the styles in the rich text editor toolbar are also found in the Pattern Lab.
The WebCMS Editor Quick Reference Sheet provides a description of each of the icons in the rich text editor.
JavaScript Snippets
Widgets and Other Styling Components
Clearing Floats
When adding boxes and images that are floated to the left or right, the following classes will "clear" the floated elements.
.u-clear-both,.clear-both{clear:both;}.u-clear-left .clear-left{clear:left;}u-clear-right .clear-right{clear:right;}
Example:
Image, floated right
Duis ut ante est. Suspendisse id tortor augue. Ut mauris dolor, elementum sed faucibus vitae, malesuada nec libero. Sed sed ipsum urna. Duis sed turpis ipsum, vel accumsan eros. Morbi in dolor quam, quis interdum felis. Aliquam commodo leo quis orci mattis eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac leo ac lectus fermentum lobortis. Phasellus dapibus quam id sem congue non aliquet nulla volutpat. Ut ullamcorper nulla nibh. Proin dapibus scelerisque nulla. Nunc pulvinar, odio in malesuada condimentum, libero justo consectetur odio, a volutpat risus orci nec augue. Nam eget tempor dolor. Aliquam in varius elit
Image, floated right, with "u-clear-right"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet aliquet sollicitudin. In lectus metus, rhoncus ut volutpat vel, aliquam nec mauris. Donec vestibulum consequat metus, a eleifend dui porttitor at. Nam cursus porttitor cursus. Cras vulputate adipiscing tortor, sed rutrum velit scelerisque non. Etiam iaculis accumsan sodales. Donec dolor eros, consectetur id aliquet quis, imperdiet sed lorem. In eget libero in ante molestie ullamcorper ut nec diam. Cras semper blandit est, id cursus magna porttitor quis. Vivamus quis dui eu purus ullamcorper adipiscing. Suspendisse rhoncus condimentum bibendum. Suspendisse vulputate neque quis tortor ornare elementum. Integer fringilla consectetur nunc, a mollis risus adipiscing vitae. Nulla varius egestas bibendum. Maecenas orci ipsum, feugiat nec posuere eu, facilisis malesuada mi.
How to:
- First, add your content. Then add your floated images (or boxes, etc.).
- Disable rich-text and add the appropriate class to the <p> or <div> you want to clear.
- Match your clear to your float. If you float right, then clear right.
- Image code example:
<p class="u-clear-right">