Social development practitioner. Trying to understand our world.
Published unlisted
Edited
Aug 16, 2019
html`
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
`
html`
<div class="flex">
<div class="outline w-25 pa3 mr2">
<code>
<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
<img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="Photo of a kitten looking menacing.">
<div class="pa2 ph3-ns pb3-ns">
<div class="dt w-100 mt1">
<div class="dtc">
<h1 class="f5 f4-ns mv0">Cat</h1>
</div>
<div class="dtc tr">
<h2 class="f5 mv0">$1,000</h2>
</div>
</div>
<p class="f6 lh-copy measure mt2 mid-gray">
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
and touch water with paw then recoil in horror.
</p>
</div>
</article>
</code>
</div>
<div class="outline w-25 pa3 mr2">
<code>
<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
<img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="Photo of a kitten looking menacing.">
<div class="pa2 ph3-ns pb3-ns">
<div class="dt w-100 mt1">
<div class="dtc">
<h1 class="f5 f4-ns mv0">Cat</h1>
</div>
<div class="dtc tr">
<h2 class="f5 mv0">$1,000</h2>
</div>
</div>
<p class="f6 lh-copy measure mt2 mid-gray">
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
and touch water with paw then recoil in horror.
</p>
</div>
</article>
</code>
</div>
<div class="outline w-25 pa3 mr2">
<code>
<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
<img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="Photo of a kitten looking menacing.">
<div class="pa2 ph3-ns pb3-ns">
<div class="dt w-100 mt1">
<div class="dtc">
<h1 class="f5 f4-ns mv0">Cat</h1>
</div>
<div class="dtc tr">
<h2 class="f5 mv0">$1,000</h2>
</div>
</div>
<p class="f6 lh-copy measure mt2 mid-gray">
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
and touch water with paw then recoil in horror.
</p>
</div>
</article>
</code>
</div>
<div class="outline w-25 pa3 mr2">
<code>
<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
<img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="Photo of a kitten looking menacing.">
<div class="pa2 ph3-ns pb3-ns">
<div class="dt w-100 mt1">
<div class="dtc">
<h1 class="f5 f4-ns mv0">Cat</h1>
</div>
<div class="dtc tr">
<h2 class="f5 mv0">$1,000</h2>
</div>
</div>
<p class="f6 lh-copy measure mt2 mid-gray">
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
and touch water with paw then recoil in horror.
</p>
</div>
</article>
</code>
</div>
<div class="outline w-25 pa3">
<code>5</code>
</div>
</div>
`
html`
<div class="mw9 center ph3-ns">
<div class="cf ph2-ns">
<div class="fl w-100 w-third-ns pa2">
<div class="outline bg-white pv4">1</div>
</div>
<div class="fl w-100 w-third-ns pa2">
<div class="outline bg-white pv4">2</div>
</div>
<div class="fl w-100 w-third-ns pa2">
<div class="outline bg-white pv4">3</div>
</div>
</div>
</div>
`
require('tachyons-grid-layout') // Note: Tom's debugger doesn't return success
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
