31:[] 2f:{"title":"🤔 How to: use libraries that need CSS","cells":[{"id":0,"value":"md`# 🤔 How to: use libraries that need CSS\n\nDiscussion: https://talk.observablehq.com/t/import-a-cell-requiring-css/4890/\n\nSo you really want to use a library, but importing it in Observable only includes the JavaScript code and not the stylesheets. What do you do? In most cases, there's a fix: fetching the required CSS and putting it on the page with the \\`html\\` tagged template literal. Let's use [Chartist](http://gionkunz.github.io/chartist-js/index.html) as an example: it's a library that generates SVG-based charts, and uses a bunch of default CSS to style the elements. If you just include the library and create a chart, it looks pretty borked: you need the CSS.\n\n1. Figure out where the CSS is, by going to \\`https://unpkg.com/modulename\\`\n2. Insert that CSS text on the page in a \\`\\` tag in html.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"// we can add a stylesheet like this, but it would not be 'exported' to any other notebook\n/*\nstylesheet = html``\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`Then we can use Chartist just like we'd use any other module.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"chart = {\n let container = DOM.element('div');\n container.style.height = `${width / 1.6}px`;\n new Chartist.Line(\n container,\n {\n labels: [1, 2, 3, 4, 5, 6, 7, 8],\n series: [\n [1, 2, 3, 1, -2, 0, 1, 0],\n [-2, -1, -2, -1, -2.5, -1, -2, -1],\n [0, 0, 0, 1, 2, 2.5, 2, 1],\n [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]\n ]\n },\n {\n high: 3,\n low: -3,\n showArea: true,\n showLine: false,\n showPoint: false,\n fullWidth: true,\n axisX: {\n showLabel: false,\n showGrid: false\n }\n }\n );\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"Chartist = {\n // this will be 'exported' as well along with 'Chartist' imported to any other notebook\n document.head.appendChild(html``);\n\n return await require('chartist');\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}