tachyons grid layout

Community Help
1

Inspired by @mootari/notebook-teasers, I would like to make a simple row of card that collapses from three columns into one, but the tachyons CSS grid doesn’t seem to be working:

I start by referencing in the CSS file (is this even necessary, as Observable uses tachyons?), and from there plug in two online examples:

  1. one drawn from grid
  2. one drawn from flex

yet in both cases my grids don’t seem to take effect.

I notice in other tachyons examples that most elements come paired with additional / specific CSS. Is it the case that with each component I wish to use, I will have to copy out this css, store it somewhere and reference it in (such can be accomplished as an Observable html cell)? Or am I missing some method for just listing the components that I wish to use?

Any advice would be greatly appreciated! :heart:

Also:

1 Like
2

Yes, because the stylesheet isn’t present in the iframe.

Also, your stylesheet inclusion is invalid. <style> may only contain CSS (also see the <link> documentation). I highly recommend the MDN docs, they are a great resource and starting point.

A great way to check wether a resource is actually loaded is to open the network tab in your dev tools and filter the entries by the resource name (you may need to reload the page if your dev tools were closed).

Include your stylesheet with:

html`<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">`

However, Tachyons will reset some properties. To learn how to properly include it, please see Combined And Custom Forms / Fabian Iwand | Observable.

1 Like
3

Thank you @mootari! So the issue that I had pretty much everything wrong :stuck_out_tongue: I’ll get this working. Thanks again! :heart_decoration: