Try Install Learn Blog API Packages GitHub
Posts

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 it's 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 🙏