UI Building Blocks

The core resources consist of the global CSS and JavaScript references which are intended for every page. Both absolute and relative references are configurable depending on the end consumers specific implementation. The core resources are listed below.

• Global Typography CSS
• Core Toolkit CSS
• Icon Fonts
• JavaScript Frameworks
• Header Footer Service URLs
• Browser Fav Icons
• RespondJS for IE8
• Toolkit JavaScript
• JS Initialization Placeholder

The below meta tags are required for Toolkit pages to behave properly. They should follow the order as shown below. Alsolute URLs and minifed version are available.

<!-- BEGIN Required Meta Tags --><meta http-equiv='X-UA-Compatible' content='IE=edge'/><break><meta http-equiv='content-type' content='text/html; charset=UTF-8'/><break><meta name='viewport' content='width=device-width, user-scalable=yes'/><!-- END Required Meta Tags -->

There are two CSS files that wire-up HP's Global Typography and Toolkit Core Styles. The CSS files need follow the same order as shown below in the next section if they are being integreated seperately. Both seperate and concatenated CSS files integrations are available. As mentioned in the Overview section above, there are two implementation approaches that can be taken for the Global Typography and Toolkit styles, a Relative or Absolute reference. Both approaches are described below.

When implementing relative references for global typography, the most important implementation detail is to append the correct locale on the file name to get the correct Font Face and styles. For absolute references the typography file name remains the same and the locale is configured within the URL pattern.

Relative Reference Non-minified

<!-- BEGIN Stylesheets --><link rel='stylesheet' href='../../styles/rdt/rdt-typo.css' media='all'/><break><link rel='stylesheet' href='../../styles/rdt/rdt.css' media='all'/><!-- END Stylesheets -->

Relative Reference Minified

<!-- BEGIN Stylesheets --><link rel='stylesheet' href='../../styles/rdt/rdt-typo-min.css' media='all'/><break><link rel='stylesheet' href='../../styles/rdt/rdt-min.css' media='all'/><!-- END Stylesheets -->

Relative Reference for Locales

When implementing absolute references for global typography, the typography styles are combined with the core Toolkit styles. Additionally the file name remains the same and the locale is configured within the URL pattern.

<!-- BEGIN Stylesheets --><link rel='stylesheet' href='http://www8.hp.com/us/en/system/styles/rdt/rdt.css' media='all'/><!-- END Stylesheets -->

There are two JavaScript frameworks required for the CaaS Header Footer Service, jQuery and Can JS. Additionally required is the HTTP service call URL. The below represents a client-side integration and end consumers should implement a server-side solution whenever possible. For more detailed information, visit the Header Footer Web Service page.

Client-side Integration

<!-- BEGIN CaaS HF Service --><script src='http://www8.hp.com/us/en/scripts/framework/jquery/v-1-8/jquery.js' type='text/javascript'>//</script><break><script src='http://www8.hp.com/us/en/scripts/framework/jquery/v-1-8/can.jquery.js' type='text/javascript'>//</script><break><script src='http://www8.hp.com/caas/header-footer/us/en/default/latest.r/root?contentType=js' type='text/javascript'>//</script><!-- END CaaS HF Service -->