Skip to main content

CSS Installation

Follow these steps to install Pearson's CSS. Start by choosing how you want to load the library into your application.

CDN#

The quickest way to get up and running with CSS is to load the small 12k file from our CDN.

<link rel="stylesheet" href="https://pearsonux.sfo2.cdn.digitaloceanspaces.com/css/pso-design.css"/>
NPM#

If you want to customize your css build using SCSS you can install the package from NPM

npm i @pearson-ux/pso-design --save

Dependancies#

Next, grab this dependency. CSS uses tippy.js for tooltip positioning. Include this script in the <head> of your document:

<script src="https://unpkg.com/tippy.js@4"></script>

For more information on Tippy.js view the documentation

Icons#

If you are not using web components you will need to load this script directly before the </body> tag.

<script>
(function (win, doc) {
'use strict';
doc.addEventListener("DOMContentLoaded", function(){
if (!document.getElementById('pe-icons-sprite')) {
var pe_ajax = new XMLHttpRequest();
pe_ajax.open("GET", "https://pearsonux.sfo2.cdn.digitaloceanspaces.com/css/p-icons-sprite-1.1.svg", true);
pe_ajax.responseType = "document";
pe_ajax.onload = function(e) {
document.body.insertBefore(
pe_ajax.responseXML.documentElement,
document.body.childNodes[0]
);
const events = new Event('iconsLoaded');
document.dispatchEvent(events);
};
pe_ajax.send();
}
});
})(window, document)
</script>

Example#

<head>
<title>Your Application</title>
<!-- CSS -->
<link rel="stylesheet" href="https://pearsonux.sfo2.cdn.digitaloceanspaces.com/css/pso-design.css" />
<!-- load tippy -->
<script src="https://unpkg.com/tippy.js@4"></script>
</head>
<body>
<main id="main">
<!-- place your app markup here -->
</main>
<!-- load icons -->
<script>
(function (win, doc) {
'use strict';
doc.addEventListener("DOMContentLoaded", function(){
if (!document.getElementById('pe-icons-sprite')) {
var pe_ajax = new XMLHttpRequest();
pe_ajax.open("GET", "https://pearsonux.sfo2.cdn.digitaloceanspaces.com/css/p-icons-sprite-1.1.svg", true);
pe_ajax.responseType = "document";
pe_ajax.onload = function(e) {
document.body.insertBefore(
pe_ajax.responseXML.documentElement,
document.body.childNodes[0]
);
const events = new Event('iconsLoaded');
document.dispatchEvent(events);
};
pe_ajax.send();
}
});
})(window, document)
</script>
</body>