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>