Mint 🍃: Styling Elements

This is the fifth post in a series that showcases the features of Mint, you can find the previous posts here:

• Mint 🍃: Getting Started
• Mint 🍃: Components
• Mint 🍃: Events and State of Components
• Mint 🍃: Handling HTTP Requests

In this post I will show you how to style elements.

In Mint styling is built in and handled at the language level.

You can add styles to HTML elements in a component using the style keyword:

component Main {
  style base {
    /* You can use standard CSS here... */
    background-color: red;
    color: white;
  }

  fun render : Html {
    <div::base>
      "I'm white on red!"

      <span>"Yey!"</span>
    </div>
  }
}

The base is the identifier of the style which can be used to attach it to an HTML element with two colons (::) after name of the opening tag (<div::base>).

In the example we added the style base to our div.

Pseudo classes and elements

There are many instances where you need to style an elements states (:hover, :active, etc...) or it's pseudo elements (::before and ::after).

You can do that in a style by adding a new block whith a & prefix (just like the parent selector in sass but limited):

style base {
  background-color: red;
  color: white;

  &::before {
    content: "Hello I'm blue!";
    color: blue;
  }
}

The same syntax can be used to style child elements:

style base {
  background-color: red;
  color: white;

  & span {
    font-weight: bold;
  }
}

Media Queries

Mint supports media queries in style blocks (with the same syntax) to allow for responsive design:

style base {
  background-color: red;
  color: white;

  @media (max-width: 600px) {
    font-style: italic;
  }
}

Interpolation

In an interactive application you want to style things depending on some state. In Mint you can use interpolation {...} in CSS values to get data from the component:

component Main {
  state color : String = "red"

  style base {
    color: {color};
  }

  fun handleClick : Promise(Never, Void) {
    if (color == "red") {
      next { color = "blue" }
    } else {
      next { color = "red" }
    }
  }

  fun render : Html {
    <div::base onClick={handleClick}>
      <{ "I'm " + color + "!" }>
    </div>
  }
}

In the example we use the color state to style the element, when clicking on it we toggle between red and blue.

Multiple interpolations can be used in the same value, for example, if I have a top and a left state we can use them to set the transform property:

...
state left : Number = 100
state top : Number = 100

style base {
  transform: translate({left}px, {top}px) /* translate(100px, 100px) */
}

That's it for today, thank you for reading 🙏:

If you like to learn more about Mint check out the guide 📖

In the next part I'm going to show how you how you can create a package that can be shared with other people 😉 see you there 👋