29:null 2a:["$","title",null,{"children":"🤔 How to: use libraries that need CSS | Tom MacWright | Observable"}] 2f:[] 2d:{"id":"b1d21aa36a488ee1","slug":"how-to-use-libraries-that-need-css","title":"🤔 How to: use libraries that need CSS","thumbnail":"1b4a38162640a6746296702bace4e1b8d4ec00cb04c2740c6efcafb87e3e46c4","access_level":"public","create_time":"$D2017-11-30T00:03:59.549Z","update_time":"$D2017-11-30T03:00:57.475Z","view_time":null,"first_public_time":"$D2017-11-30T00:35:37.298Z","has_unpublished_edits":null,"fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":100,"publish_version":100,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"e75d00d97e0606b2","slug":"tips-tricks","title":"Tips & Tricks","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"type":"notebook","body":{"title":"🤔 How to: use libraries that need CSS","cells":[{"id":0,"value":"md`# 🤔 How to: use libraries that need CSS\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`Then we can use Chartist just like we'd use any other module.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"{\n let container = DOM.element('div');\n container.style.height = `${width / 1.6}px`;\n new Chartist.Line(container, {\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 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 return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"Chartist = require('chartist')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"