Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.
Public
Edited
Sep 9, 2021
8 stars
jss = {
// Import JSS and the its standard plugin presets
const jss = (await import('https://cdn.skypack.dev/pin/jss@v10.7.1-0io08BuoEGJZhr50DQb4/mode=imports,min/optimized/jss.js')).default;
const jssPresetDefault = (await import('https://cdn.skypack.dev/pin/jss-preset-default@v10.7.1-1T1Nw5lj6Qj07Mdml4Fm/mode=imports,min/optimized/jss-preset-default.js')).default;
// Setup JSS and return the JSS instance
return jss.setup(jssPresetDefault());
}
myStyleSheet =
({
content: {
'& h1, h2': {
fontFamily: 'monospace'
},
'& p': {
color: 'pink'
}
}
})
jssStyleSheet = jss.createStyleSheet(myStyleSheet);
jssStyleSheet.toString()
function toggleStyleSheet() {
if (jssStyleSheet.attached) {
jssStyleSheet.detach();
}
else {
jssStyleSheet.attach();
}
}
html`<div class=${jssStyleSheet.classes.content}>
<h1>CSS-in-JS</h1>
<h2>Maybe it's a good idea?</h2>
<p>And this could be the start of a wonderful thing.</p
</div>
`
function scoped(styles, content) {
const styleObj = {
container: {}
};
for (const key of Object.keys(styles)) {
// Apply the nesting operator to force the defined styles to get the container prefix
styleObj.container['& ' + key] = styles[key];
}
const sheet = jss.createStyleSheet(styleObj);
const wrapper = html`<div class="${sheet.classes.container}">
<style>${sheet.toString()}</style>
${content}
</div>`;
return wrapper;
}
scoped({
p: {
padding: 8,
color: '#333',
textAlign: 'justify',
background: 'linear-gradient(#c0f0c0, #c0c0f0)',
fontFamily: 'sans-serif'
}
}, `<p>Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Must go faster... go, go, go, go, go! I gave it a cold? I gave it a virus. A computer virus. I was part of something special. Checkmate... Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p>`)
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.
