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>