Overview

The purpose of this style guide is to describe and provide examples of the standards used within ServiceNow for building user interfaces that present a consistent brand. Ultimately this translates to a better experience, higher usability, and lets the user operate more effectively. Additionally, the style guide will reduce the number of questions that the developers have on how, where , and when certain components and styles should be used, allowing them to work faster. Teams should not deviate from what is presented in this reference and should make every effort to use the code provided to them for implementing the designs listed in order to ensure that future updates are cascaded throughout the applications across the enterprise.

Custom vs. Platform

In order to facilitate a consistent User Interface, the Platform UI team will be providing components comprised of HTML, JavaScript, and Style Sheets. These will be leveraging the Boostrap framework; however, this platform-specifc code is not completed yet.

Add to Your Page

To include the CSS portion of Heisenberg, we've packaged everything in one file:

CSS - Jelly

You will have access to Source Sans Pro font while Concourse is active.

<g:inline template="heisenberg_output.xml" type="css"/>

CSS - Plain HTML

This does not include Source Sans Pro font.

<link rel="stylesheet" href="styles/heisenberg/heisenberg_all.css" />

JavaScript - Jelly

We may not always do this, but for now, everything in Heisenberg JS is packaged as one includes. However, there are many places that already include jQuery, so we are not including jQuery in Heisenberg.

<g:requires name="scripts/lib/jquery2_includes.js"/>
<g:requires name="scripts/heisenberg/heisenberg_all.js" includes="true"/>

JavaScript - Plain HTML

<script src="scripts/lib/jquery2_includes.js" />
<script src="scripts/heisenberg/heisenberg_all.js" />

IE7 and IE8 Support

Heisenberg offers limited support for some old versions of IE

Basic support:

Buttons
Inputs
Selects (but not with Select2)
Headers
Segmented tabs

Adding support for IE

To add support for these to your page, you must add more files to your page:

Jelly

<g:inline template="ie_checker.xml" />
<j2:if test="$[jvar_isMSIE8 || jvar_isMSIE7]">
  <g:requires name="scripts/heisenberg/thirdparty/respond.min.js"/>
</j2:if>

Outside of Jelly

<!--[if lt IE 9]><!-->
  <script src="/scripts/heisenberg/thirdparty/respond.min.js"></script>
  <script src="/scripts/heisenberg/thirdparty/html5shiv.js"></script>
<!-->![endif]-->