CSS Installation
Follow these steps to install Pearson's CSS. Start by choosing how you want to load the library into your application.
#
CDNThe 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"/>
#
NPMIf you want to customize your css build using SCSS you can install the package from NPM
npm i @pearson-ux/pso-design --save
#
DependanciesNext, 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
#
IconsIf 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>