Aral Balkan
2 months ago

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


#Kitten #SmallWeb #web #dev #js #css #styles #conditionals

Screenshot of code:

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

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

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

    <${Footer} />


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

      <if ${layout==='settings'}>
        #application {
          display: grid;
            '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 {
Aral Balkan
3 months ago

Right, I just made the end tags for <then> and <else> optional so now you can also write your conditionals like this! :)

#Kitten #SmallWeb #conditionals #markup

Screenshot of code:

<ul id='messages' @htmx:load='${js`
showPlaceholder = false
$el.scrollTop = $el.scrollHeight
<if ${db.messages.length === 0}>
    <li id='placeholder' x-show='showPlaceholder'>
      No messages yet, why not send one?
    ${ => html`<${Message} message=${message} />`)}
7 months ago

Fascinated by #Conditionals in English. I was an EFL teacher for 14 years, and was never happy with the way they were presented and taught. I hope to be able to suggest improvements in relation to this.