Mint 🍃: Styling Elements
Tags: mintlang, css, javascript, webdev
Published: 2019-05-16 12:47:22

_This is the fifth post in a series that showcases the features of Mint, you can find the previous posts here:_
* _[Mint 🍃: Getting Started](/gdotdesign/getting-started-with-mint-3k2o)_
* _[Mint 🍃: Components](/gdotdesign/components-in-mint-4a4n)_
* _[Mint 🍃: Events and State of Components](/gdotdesign/mint-events-and-state-of-components-3j3a)_
* _[Mint 🍃: Handling HTTP Requests](https://dev.to/gdotdesign/mint-handling-http-requests-2ep3)_

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](https://sass-lang.com/documentation/style-rules/parent-selector) 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](https://guide.mint-lang.com) 📖

In the next part I'm going to show how you how you [can create a package](https://dev.to/gdotdesign/mint-creating-a-packages-5e9b) that can be shared with other people 😉 see you there 👋