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.
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.
To include the CSS portion of Heisenberg, we've packaged everything in one file:
<g:inline template="heisenberg_output.xml" type="css"/>
<link rel="stylesheet" href="styles/heisenberg/heisenberg_all.css" />
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"/>
<script src="scripts/lib/jquery2_includes.js" />
<script src="scripts/heisenberg/heisenberg_all.js" />
Heisenberg offers limited support for some old versions of IE
To add support for these to your page, you must add more files to your page:
<g:inline template="ie_checker.xml" />
<j2:if test="$[jvar_isMSIE8 || jvar_isMSIE7]">
<g:requires name="scripts/heisenberg/thirdparty/respond.min.js"/>
</j2:if>
<!--[if lt IE 9]><!-->
<script src="/scripts/heisenberg/thirdparty/respond.min.js"></script>
<script src="/scripts/heisenberg/thirdparty/html5shiv.js"></script>
<!-->![endif]-->