Styling Elements Thursday, May 16th, 2019

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 its pseudo elements ( ::before and ::after ).

You can do that in a style by adding a new block with 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 style child elements just do it like you would in sass:

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 🙏