Mastodon @Mastodon

**Aral Balkan** @aral@mastodon.ar.al · Mar 31, 2023

Mar 31, 2023

One of the nice things with the new conditional syntax in Kitten¹ is that you can have conditional styles in your components :)

¹ https://codeberg.org/kitten/app

Screenshot of code:

export default ({ SLOT, activeSection = '', autoHeading = true}) => html`
<${Application} layout='settings'>
<${Navigation} activeSection=${activeSection} />
<main id='content'>
<if ${autoHeading}>
<h2>${activeSection}</h2>
</if>
${SLOT}
</main>
</>

Screenshot of code:

// Application layout.
import Footer from './Footer.component.js'

export default ({ layout, SLOT }) => html`
<div id='application'>
${SLOT}
</div>

<${Footer} />

<style>
…

#application {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}

<if ${layout==='settings'}>
#application {
display: grid;
grid-template-areas:
'navigation main '
'footer footer';
grid-template-rows: 1fr fit-content(100%);
grid-template-columns: fit-content(100%) 1fr;
}

/* On narrower screens, use one-column layout. */
@media screen and (max-width: 660px) {
#application {
grid-template-areas:
'navigation'
'main'
'footer';
}
}
</if>
</style>
`

#Kitten #SmallWeb #web

**Raymond Camden** @raymondcamden · Mar 31, 2023

Mar 31, 2023

Raymond Camden @raymondcamden

@aral never looked at Kitten before, but taking a look today. I see it uses Alpine, nice! I'm only a recent user of it.

**Aral Balkan** @aral@mastodon.ar.al · Mar 31, 2023

Mar 31, 2023

Aral Balkan @aral@mastodon.ar.al

@raymondcamden Hey stranger, it’s been a minute. Yeah, the idea is you build using good old (new) HTML, CSS, and JS and enhance with htmx and Alpine.js (although you can use any library you want, of course. Kitten just has built-in support for those two.)

It’s very early days but if you’re having a play I’d love to hear your thoughts :)