OEM Styleguide

This style guide illustrates common reusable variables and patterns within the OEM intranet.

Colors

The OEM Intranet uses a range of grays that come built into Bootstrap, as well as a set of custom blues and red for special alerts.

Bootstrap-based grays

hex: #222

SCSS variable: $gray-darker

hex: #333

SCSS variable: $gray-dark

hex: #555

SCSS variable: $gray

hex: #999

SCSS variable: $gray-light

hex: #eee

SCSS variable: $gray-lighter

OEM Colors

hex: #20589f

SCSS variable: $oem-blue

hex: #29405c

SCSS variable: $oem-blue-dark

hex: #2b3138

SCSS variable: $oem-blue-darker

hex: #8e3337

SCSS variable: $oem-red

hex: #53d054

SCSS variable: $oem-green

Typography

The OEM Intranet works off of Bootstrap's default typography, using an all sans-serif type palette. The primary typeface is Helvetica Neue, with fallback options of Helvetica, Arial, and generic sans-serif.

Font Stacks

Helvetica Neue

Helvetica

Arial

$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;

$font-family-base: $font-family-sans-serif !default;

Basic Headings

Base settings for HTML headings, h1 through h6.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
h3 {
font-weight: normal;
color: $oem-blue;
margin: 1em 0;
}

h4 {
font-weight: bold;
font-size: 12px;
margin: 1.5em 0 .5em 0;
border-top: 1px solid $gray-light;
padding-top: 1.5em;
}

h5 {
font-size: 12px;
margin: 0.5em 0 1em 0;
}

p {
font-size: 14px;
margin: 0 0 ($line-height-computed / 2);
}

Headings with dividers

Want left, right, top, or bottom borders around a heading? Or any element, for that matter? Just add @include divider-top, @include divider-bottom, @include divider-left, or @include divider-right. By default, the border is offset by a value of 1em, but you can change that value by passing an argument in the mixin by typing @include divider-top(value).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
@mixin divider-top ($border-offset: 1em) {
padding-top: $border-offset;
border-top: 1px
solid $border-color;
margin-top: $border-offset;
}
h1,h2,h3 {
@include divider-top(.5em);
}

h4,h5,h6 {
@include divider-top;
}

Colors for emphasis

Want to make some text red or blue for emphasis? Gray it out so it attracts less attention? Want to give something a colored background so it really stands out?

For colored text, add a class of .blue, .red, .red-light, .green, .gray, .gray-light, or .gray-lighter. For colored backgrounds, add a class of .blue-bg, .red-bg, .red-light-bg, .green-bg, .gray-bg, .gray-light-bg, or .gray-lighter-bg.

<h3 class="blue">

<h3 class="red">

<h3 class="red-light">

<h3 class="green">

<h3 class="gray">

<h3 class="gray-light">

<h3 class="gray-lighter">

<h3 class="blue-bg">

<h3 class="red-bg">

<h3 class="red-light-bg">

<h3 class="green-bg">

<h3 class="gray-bg">

<h3 class="gray-light-bg">

<h3 class="gray-lighter-bg">

Lorem Ipsum

Id eum novum officiis appellantur, an veritus similique vis. Causae albucius appareat nam ea, et sonet conclusionemque vix. Brute verterem assueverit mel ut, at usu eligendi epicurei. Eam meis postulant ad, vel cu percipitur definitionem. Scaevola cotidieque signiferumque pri in. Per virtute constituam no.

.blue {
color: $oem-blue;
}

.red {
color: $oem-red;
}
<h3 class="blue">Lorem Ipsum</h3>

<p>Id eum novum officiis appellantur, an veritus similique vis. Causae albucius appareat nam ea, et sonet conclusionemque vix. <span class="red-bg">Brute verterem assueverit mel ut,</span> at usu eligendi epicurei. Eam meis postulant ad, vel cu percipitur definitionem. Scaevola cotidieque signiferumque pri in. Per virtute constituam no.</p>

Tables

Tables are fairly straightforward. Their default settings include 100% width, 12px type, no borders, and minimal padding between cells.

If you want borders drawn between cells, add class="borders" to the table element.

You can also add colors to you <td> cells the same way you would to regular text. For colored text, add a class of .blue, .red, .red-light, .green, .gray, .gray-light, or .gray-lighter. For colored backgrounds, add a class of .blue-bg, .red-bg, .red-light-bg, .green-bg, .gray-bg, .gray-light-bg, or .gray-lighter-bg.

(Code snippet provided for final sample table with colored cells.)

Basic Table

Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Table with Borders

Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Table with Colored Cells

Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Special! Table Cell
Table Cell Table Cell Table Cell Table Cell
<table>
<h3>Table with Colored Cells</h3>
<tbody>
<tr>
<td class="blue-bg"><b>Table Cell</b></td>
<td class="gray-bg">Table Cell</td>
<td class="gray-bg">Table Cell</td>
<td class="gray-bg">Table Cell</td>
</tr>
<tr>
<td class="gray-light-bg">Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td class="gray-light-bg">Table Cell</td>
<td>Table Cell</td>
<td class="red-light-bg">Special!</td>
<td>Table Cell</td>
</tr>
<tr>
<td class="gray-light-bg">Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody>
</table>

Icon Fonts

Bootstrap 3 comes with the Glyphicons Halflings icon font as a default. It's selection of icons is a good starting point, but is fairly limited. As an alternative, we've included the much-more-thorough FontAwesome icon font.

Like the name implies, Font Awesome (and icon fonts in general) are awesome. You can do pretty much anything to an icon font that you could do to regular text. Make it any size you want, any color, apply hover states or CSS transitions, even make them appear via CSS's content property.

To add icons directly in your HTML, first refer to the handy icon chart here. Find the icon you want, click on it, copy the provided code for the <i> element, and paste it into your document. Done! (Or add applicable class or id tags and style as you like.)

To add them via CSS, you'll need to know each icon's character value. Fortunately, here's a handy page that lists each icon and its corresponding character value. It also provides simple instructions for this technique.

We've included custom classes for CSS-driven icons that appear frequently throughout the designs:

RSS

Edit

Warning

Chevron Up

Chevron Circle Up

Chevron Down

Chevron Circle Down

Chevron Right

Chevron Circle Right

<h3 class="rss">RSS</h3>
<h3 class="edit">Edit</h3>
<h3 class="search">Search</h3>
<h3 class="warning">Warning</h3>
<h3 class="chevron-up">Chevron Up</h3>
<h3 class="chevron-circle-up">Chevron Circle Up</h3>
<h3 class="chevron-down">Chevron Down</h3>
<h3 class="chevron-circle-down">Chevron Circle Down</h3>
<h3 class="chevron-right">Chevron Right</h3>
<h3 class="chevron-circle-right">Chevron Circle Right</h3>

Widgets

Based on repeating patterns in the OEM intranet design, we've made a number of reusable widgets and components.

Weather

The weather widget displays the current forecast and temperature. The icons come from Weather Icons, an icon font that behaves the same way as Font Awesome.

26°

Some of the many other icons available:

   wi-day-cloudy

   wi-day-sunny

   wi-cloudy-gusts

   wi-rain

   wi-snow

.weather {
font-size: 30px;
padding: 15px;
i {
margin-right: 15px;
}
}
<h3 class="weather"><i class="wi-day-lightning"></i>26°</h3>

On Call

The On Call widget is always in the upper right corner of the page, providing OEM users with ingight into which team is currently on call. The widget's color will change to match the color of the on-call team.

On Call: Red

On Call: Blue

On Call: White

The On Call widget is always part of the "sidebar-heading" list, following the weather widget. It picks up the appropriate size and padding from parent properties in this list.

More color classes can be added based on the the colors used by OEM's teams.

.on-call {
color: $oem-blue-darker !important;
font-weight: bold;
font-size: $font-size-base;
&.red {
background-color: $oem-red !important;
}
}
<ul class="sidebar-heading">
<li class="col-xs-6 weather"><i class="wi-day-lightning"></i>26°</li>
<li class="col-xs-6 on-call red">On Call: Red</li>
</ul>

Panels

The basic panel builds off of Bootstrap's core styles while bringing it more in like with the OEM site design. Specific kinds of panels, like Roll Call or Alert, have been designed for easy reuse throughout the intranet.

Basic Panel:

E-Team

Roll Call:

Upcoming Roll Call

  • Health & Medical etc.
  • Agency etc.

Alert:

Plan in Effect

Coastal Storm Plan activated October 14, 2013

Activation: (Note the extra padding and negative margin that pulls it flush to the edge of its containing element)

Activation in Effect

<div class="panel">
<h3>E-Team</h3>
<a href=""><i class="fa fa-chevron-circle-right"></i></a>
</div>
<div class="panel roll-call">
<h3>Upcoming Roll Call</h3>
<ul>
<li><b>Health & Medical</b> etc.</li>
<li><b>Agency</b> etc.</li>
</ul>
</div>
<div class="panel alert">
<h3>Plan in Effect</h3>
<h4>Coastal Storm Plan activated October 14, 2013</h4>
<a href=""><i class="fa fa-chevron-circle-right"></i></a>
</div>
<div class="panel activation">
<h2>Activation in Effect</h2>
<a href=""><i class="fa fa-times-circle"></i></a>
</div>

RSS Feeds

To indicate an RSS feed, add class="rss" to an element.

RSS feed here

<p class="rss">RSS feed here</p>

File Tree

The File Tree widget is used in the right sidebar, organizing Documents and Links into collaspasble directories.

To use the File Tree, simply write out your file structure as a nested set of <ul> and <li> elements. List items with a child <ul> should have their text wrapped in a <span> tag, which gives it the necessary padding and background for its hover state. Make sure to wrap everything in a containing <div class="tree">.

<div class="tree">
<ul>
<li><span>Folder 1</span>
<ul>
<li><span>Subfolder 1</span>
<ul>
<li><span><a href="#">file.doc</a></span></li>
<li><span><a href="#">file.doc</a></span></li>
</ul>
</li>
<li><span>Subfolder 2</span>
<ul>
<li><span><a href="#">file.doc</a></span></li>
<li><span><a href="#">file.doc</a></span></li>
<li><span><a href="#">file.doc</a></span></li>
<li><span><a href="#">file.doc</a></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Status by borough

The Status By Borough widget consists of a heading, a list, and <span> tags that "light up" depending on each borough's status. To highlight a particular list item with a red dot and hazard sign, simply add class="notice" to the <li> tag.

ConEd Status Service Coverage 85%

  • Brooklyn
  • Bronx
  • Manhattan
  • Queens
  • Staten Island
<div class="status-by-borough">
<h2 class="gray-light">ConEd Status <span>Service Coverage <b>85%</b></span></h2>
<ul>
<li><span class="signal"></span>Brooklyn</li>
<li><span class="signal"></span>Bronx</li>
<li class="notice"><span class="signal"></span>Manhattan</li>
<li><span class="signal"></span>Queens</li>
<li><span class="signal"></span>Staten Island</li>
</ul>
</div>

Asset Lists

Asset Lists include lists of documents, resources, downloads, related items, etc. They can be used in sidebars or in the main body column. By default, they'll extend to fill the width of their containing element.

List items may also include icon-based sub-lists with functions like "view online" or "download." Within an existing <li>, insert a new <ul class="actions">. Then, assign its <li> children classes of file or download, and the corresponding icon will appear.

<div class="asset-list">
<ul>
<li>Employee Handbook
<ul class="actions">
<li class="file"><a href="#">View Online</a></li>
<li class="download"><a href="#">Download</a></li>
</ul>
</li>
<li>Interagency Transfer
<ul class="actions">
<li class="file"><a href="#">View Online</a></li>
<li class="download"><a href="#">Download</a></li>
</ul>
</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>

Collapsible Lists

These are a simplified variation of Bootstrap’s Collapse functionality. They're good for things like shorting long Q&A lists that would otherwise sprawl down the page.

Each .panel-heading h4 a should target the unique ID of the div it toggles. For example, the first one here in the example has href="#collapse-1" becuase the panel it toggles has id="collapse-1".

Per ex alii nusquam mediocrem, ea nonumy admodum sapientem eum. Sed apeirian sensibus vituperata ut, quem prima mucius cum et. His labore necessitatibus ei, mel aperiam discere ei, cu est quot tollit expetendis. Ad nam fugit elitr ludus, has ut quando iuvaret lucilius. In vel splendide scripserit. Ut quo officiis delicata, quo fabulas fuisset signiferumque at. No doctus aliquip honestatis duo, suscipit oporteat sadipscing ne vis, inani bonorum urbanitas no ius. Ad has habeo nonumes pericula. Homero latine definiebas vix eu, ut everti iudicabit nam. Aperiri saperet liberavisse ut ius. Nam liber honestatis ei. Nec id labores verterem.

Per ex alii nusquam mediocrem, ea nonumy admodum sapientem eum. Sed apeirian sensibus vituperata ut, quem prima mucius cum et. His labore necessitatibus ei, mel aperiam discere ei, cu est quot tollit expetendis. Ad nam fugit elitr ludus, has ut quando iuvaret lucilius. In vel splendide scripserit. Ut quo officiis delicata, quo fabulas fuisset signiferumque at. No doctus aliquip honestatis duo, suscipit oporteat sadipscing ne vis, inani bonorum urbanitas no ius. Ad has habeo nonumes pericula. Homero latine definiebas vix eu, ut everti iudicabit nam. Aperiri saperet liberavisse ut ius. Nam liber honestatis ei. Nec id labores verterem.

<div class="collapsible-lists">
<div>
<div class="panel-heading">
<h4><a data-toggle="collapse" href="#collapse-1" class="chevron-down">Lorem ipsum dolor sit amet ei mei scaevola legere graeci rationibus?</a></h4>
</div>
<div id="collapse-1" class="panel-collapse collapse">
<p> Per ex alii nusquam mediocrem, ea nonumy admodum sapientem eum. Sed apeirian sensibus vituperata ut, quem prima mucius cum et. His labore necessitatibus ei, mel aperiam discere ei, cu est quot tollit expetendis. Ad nam fugit elitr ludus, has ut quando iuvaret lucilius. In vel splendide scripserit. Ut quo officiis delicata, quo fabulas fuisset signiferumque at. No doctus aliquip honestatis duo, suscipit oporteat sadipscing ne vis, inani bonorum urbanitas no ius. Ad has habeo nonumes pericula. Homero latine definiebas vix eu, ut everti iudicabit nam. Aperiri saperet liberavisse ut ius. Nam liber honestatis ei. Nec id labores verterem.</p>
</div>
</div>
<div>
<div class="panel-heading">
<h4><a data-toggle="collapse" href="#collapse-2" class="chevron-down">Lorem ipsum dolor sit amet ei mei scaevola legere graeci rationibus?</a></h4>
</div>
<div id="collapse-2" class="panel-collapse collapse">
<p> Per ex alii nusquam mediocrem, ea nonumy admodum sapientem eum. Sed apeirian sensibus vituperata ut, quem prima mucius cum et. His labore necessitatibus ei, mel aperiam discere ei, cu est quot tollit expetendis. Ad nam fugit elitr ludus, has ut quando iuvaret lucilius. In vel splendide scripserit. Ut quo officiis delicata, quo fabulas fuisset signiferumque at. No doctus aliquip honestatis duo, suscipit oporteat sadipscing ne vis, inani bonorum urbanitas no ius. Ad has habeo nonumes pericula. Homero latine definiebas vix eu, ut everti iudicabit nam. Aperiri saperet liberavisse ut ius. Nam liber honestatis ei. Nec id labores verterem.</p>
</div>
</div>
<div>