Best Practices for Monitoring

This document shows all of our standard stlyle elements that are used in our custom theme. This theme is built on top of foundation, and customized to fit the specific needs of PagerDuty.

Color Palette

Base Color

Used for backgrounds, etc.

GZ Colors

GZ Green
GZ Blue
GZ Drk Gray
GZ Space Gray
GZ Med Gray
GZ Lt Gray
GZ xLt Gray

Foundation Default Colors

Primary
Secondary
Success
Warning
Alert

Try one of these buttons:

Check out the docs to see them all, along with details on making them your own.

Go to Foundation Docs

Typography

This is a h1

This is a h2

This is a h3

This is a h4

This is a h5
This is a h6

The Grid

This is a twelve column section in a row. Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.

Six columns

Six columns

Six columns

Six columns

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Add the class collapse to the row to get rid of the gutters

class="row collapse"

Six columns

Callouts and Colors

Callouts use background opacity to reduce the strength of the color applied to the background

class="gz-green-color callout"
class="gz-blue callout"
class="gz-drk-gray callout"
class="gz-space-gray callout"
class="gz-med-gray callout"
class="gz-lt-gray callout"
class="gz-xlt-gray callout"
class="primary callout"
class="secondary callout"
class="success callout"
class="warning callout"
class="alert callout"

Code Snippets

To display a block of code, wrap the code in <pre> tags.
<pre class="prettyprint"></pre>
By adding the class 'prettyprint' to the tag, this will color the code syntax correctly

*NOTE to add HTML to a code block you need to do an extra step
<pre class="prettyprint"<xmp></xmp></pre>

Be careful when you are inserting your code snippets, because this will respect any tabs you have in your code, unlike HTML rendering that strips out tabs.

<pre class="prettyprint">
    /* Non HTML Code Here */
</pre>

<pre class="prettyprint">
  <xmp>
    /* HTML Code Here */
  </xmp>
</pre>

 

Output.
In this example the code was formatted with javascript syntax highlighting.
function updateSearchPlaceholderText(selectedTab) {
  var tabDisplayName = selectedTab.replace(/\b[a-z]/, function(letter) {
  return letter.toUpperCase();
});
$('#partners-search').attr("placeholder", "Search " + tabDisplayName + "s");
}
    

Font Awesome

Installed and maintained with bower. It is added in your /scss/app.scss file
@import 'font-awesome';
//Adding font awesome in html
    <i class='fa fa-rocket'></i>
    
Output


Adding font awesome directly in scss
//Adding font awesome in css
    pre.prettyprint:before {
      font-family: 'FontAwesome';
      content: "\f121";
    }
    

Forms

.com

Badges

1 2 3 A B B

Accordians

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.

Slide Switch

Slider

  • Space
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World
  • Space
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World