Published
Edited
Jun 24, 2022
2 stars
<div>
<style>
${serializeCss({
".foo": {
backgroundColor: "gray",
color: "white",
maxWidth : "15em",
minHeight: "5em",
padding: "0.8em",
borderRadius: "0.25em"
}
})}
</style>
<div class="foo">Hello, there!</div>
</div>
<div>
<style>
${serializeCss({
".button": {
backgroundColor: "gray",
color: "white",
padding: "0.5em",
".chip" : { // An chip in the button
display : "inline-block",
width : "1.25em",
height: "1.25em",
backgroundColor: "white",
color: "black",
borderRadius: "1.25em",
padding: "0.1em",
marginLeft: "0.5em"
},
}
})}
</style>
<button class="button">
Hello, there!
<span class="chip">42</span>
</button>
</div>
<div>
<style>
${serializeCss({
".ex3-button": {
backgroundColor: "navy",
color: "yellow",
// *Note:* Starts with the "&" symbol!
"&.ex3-big": {
// Modifier of the basic button class
fontSize: "1.2em"
}
}
})}
</style>
<button class="ex3-button">Simple Button</button>
<button class="ex3-button ex3-big">Big Button</button>
</div>
<div>
<style>
${serializeCss({
".ex4-button": {
backgroundColor: "white",
color: "blue",
// *Note:* selectors are separated by ","
"&.ex4-big, &.ex4-huge": {
fontWeight: "strong"
},
"&.ex4-big": {
fontSize: "1.2em"
},
"&.ex4-huge": {
fontSize: "1.4em"
}
}
})}
</style>
<button class="ex4-button">Simple Button</button>
<button class="ex4-button ex4-big">Big Button</button>
<button class="ex4-button ex4-huge">Huge Button</button>
</div>
import { serializeCss } from "@kotelnikov/serialize-css"
import { toc } from "@nebrius/indented-toc"
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.
