3e:null 3f:["$","title",null,{"children":"🤔 How to: use libraries that need CSS | easz | Observable"}] 45:[] 43:{"id":"1dba7c71111d04f5","slug":"how-to-use-libraries-that-need-css","title":"🤔 How to: use libraries that need CSS","thumbnail":"0cbdd4152d420e0253b29b6c1ccfe208991193ba5642ddc9e8dc8a317c0d9fa5","access_level":"public","create_time":"$D2021-04-07T17:16:45.813Z","update_time":"$D2021-04-08T15:01:52.894Z","view_time":null,"first_public_time":"$D2021-04-07T17:23:33.254Z","has_unpublished_edits":null,"fork":{"id":"b1d21aa36a488ee1","slug":"how-to-use-libraries-that-need-css","title":"🤔 How to: use libraries that need CSS","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":0,"starred":false,"owner":{"type":"team","id":"955771df3d257190","login":"easz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d0f550a2263338034839220e8fc0db2732b688fe60a694152ddab6d0deb59456","tier":"starter_2024","bio":""},"version":150,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"57136f3cc685a62d","login":"easz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d0f550a2263338034839220e8fc0db2732b688fe60a694152ddab6d0deb59456","tier":null,"bio":""}],"members":[{"type":"individual","id":"57136f3cc685a62d","login":"easz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d0f550a2263338034839220e8fc0db2732b688fe60a694152ddab6d0deb59456","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"49302472208a45e2","slug":"sandbox","title":"Sandbox","owner":{"id":"955771df3d257190","login":"easz","name":""}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"