How to load a CSS framework from a CDN

#The one line install

Put this tag in the <head> of your page. jsDelivr reads the package manifest and serves the minified stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

unpkg works the same way and serves the same file:

<link rel="stylesheet" href="https://unpkg.com/monsooncss">

Both URLs resolve to dist/monsoon.min.css from the latest published version. That is perfect for prototypes, demos, documentation and code you paste into an online editor, because readers can copy the snippet and it simply works.

#Pin a version before you go live

An unversioned URL follows new releases. For a production site you want the exact bytes you tested, so name the version and the file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css">

A pinned URL never changes content, which lets the CDN and the browser cache it for a long time. When a new version comes out, read the changelog, update the number and test. jsDelivr also accepts a range such as monsooncss@0.1 if you prefer patch releases to arrive on their own.

#Add subresource integrity

Subresource integrity lets the browser refuse a file whose content does not match a hash you wrote down. It only makes sense with a pinned URL. Generate the hash from the exact file you will reference:

curl -s https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css | openssl dgst -sha384 -binary | openssl base64 -A

Then add it with crossorigin, which public CDNs support:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css"
  integrity="sha384-PASTE_THE_HASH_HERE"
  crossorigin="anonymous">

If the hash is wrong the stylesheet is blocked entirely, so regenerate it every time you change the version.

#Make the first request faster

A stylesheet in the head blocks rendering until it arrives, which is what you want for CSS: no flash of unstyled content. You can shave the connection time by warming up the CDN host early, especially if the page also loads fonts or scripts from it:

<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css">

Keep Monsoon as one of the first stylesheets so your own rules come after it and win on equal specificity. The reset lives in a cascade layer named base, so element styles you write later override it naturally.

#When to host the file yourself

A public CDN is not always the right answer. Host the stylesheet on your own domain when:

• a strict Content Security Policy only allows styles from your own origin,
• the site runs on an internal network or offline,
• you want one less third party connection for privacy reasons,
• you purge the stylesheet, since the result is specific to your project.

Self hosting is a copy away. Install the package and copy the file into your public folder, or download it once:

npm install monsooncss
cp node_modules/monsooncss/dist/monsoon.min.css public/monsoon.css

The package also exposes the readable build as monsooncss/css (dist/monsoon.css) if you want to read the source of a rule.

#Checklist

1. Use the short URL while prototyping.
2. Pin monsooncss@VERSION/dist/monsoon.min.css for production.
3. Add an integrity hash if your policy asks for it.
4. Preconnect to the CDN host if it is the first request to that origin.
5. Self host or purge when policy, privacy or size requires it.

#Frequently asked questions

#Keep reading