A few people were asking for the QuickSettings Library to be added to a CDN for ease of use in projects. I finally got around to doing this. It’s now hosted on https://www.jsdelivr.com/.
To use QuickSettings in a project, you can directly link to the main minified js file at:
https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.min.js
You’ll also need to add one of the QuickSettings style sheets.
Plain:
https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.css
Minimal:
https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings_minimal.css
or Minimal Dark:
https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings_minimal_dark.css
JSBin
You can add QuickSettings to JSBin semi-permanently. While on the JSBin page, open the browser’s console. Emphasis on browser’s console. NOT JSBin’s console section. And paste in this snippet:
libraries.add({text: "QuickSettings", scripts: [ {text: "QuickSettings", url: [ "https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.min.js", "https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.css"]}]});
This will be saved via your browser’s local storage, so you don’t need to do this every time. Generally once per machine/browser. Now you can hit the Add Library dropdown and scroll down to see QuickSettings. Select that and QuickSettings is added to the current bin.
CodePen
This also works on CodePen. Create a new pen and go into the pen settings. In the JavaScript section, add the url to the quicksettings.min.js file above. And then in the CSS section, add the url to the CSS file of your choice. You’re good to go.
I’m not as familiar with CodePen to know if there is a way to save particular libraries to make them easier to use across multiple pens, or if you just need to paste the two urls in there every time. Maybe someone else knows.