EPA Style Guide Pattern Lab
On This Page:
- Pattern Lab Overview
- Styles
- WebCMS Rich Text Editor
- JavaScript Snippets
- Widgets and Other Styling Components
- Clearing Floats
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 its view, located at the top right.
The pattern lab is responsive. Use the icons, located at the top right of the screen, to view how the pattern lab will appear on various devices.
At the top left of the screen you will find the menu with all the elements you can use to stylize your content.
Styles
Components marked with an "*" can also be applied directly to the HTML by selecting the Source button in the WYSIWYG editor. If you can apply the information through the WYSIWYG editor, you should.
Microsites
Grid (Columns)
In-line Styles
- Abbreviation *
- Adding Definitions *
- Headings *
- Highlighted Headings *
- Horizontal Line *
- iFrame (video) *
- Other Elements
- Pull Quote *
Forms
Images / Graphics
Lists
- Basic list *
- Ordered list *
- Unordered list *
- Clean list *
(no bullets) - Definition list
- Pipeline *
- Tag list
- Underlined list
Tables
- All Table Styles
- Accessible tables
- With Borders
- Without Borders
- Sortable Table
- Striped Table
- Unstyled Table
- Datatables (Requires Javascript)
Boxes
- Multipurpose Boxes
- Special One Item *
- No Style (no Box) *
- RSS *
- Blog *
- Box Alignment *
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, you can add content that “clears” these floated elements by adding one of the following classes:
- .u-clear-both
- .u-clear-left
- .u-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
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.).
- Select the Source code button in the WYSIWYG editor toolbar and in the source code, add the appropriate class to the <p>, <div>, or <drupal-paragraph> 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">
- Paragraph code example: <drupal-paragraph class="u-clear-right"