Mint Page

1. Mint-Bulma Tutorial

Adding an external CSS: in this case Bulma https://bulma.io/

This should allow us to greatly shorten our code to focus on the logic not the format!

1.1. Intitialize a project:

$ mint-lang init count_bulma
$ cd count_bulma
$ mkdir assets
$ touch assets/head.html
$ mint-lang start

open http://localhost:3000

be sure you see: Hello Mint!

1.2. Add Bulma and Fontawesome

We will control our counter values and save the state centrally (this Store resets with every page reload / new connection)

code/mint/src/count_bulma/assets/head.html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- adding Bulma CSS -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
  crossorigin="anonymous">

<!-- add Litera Theme -->
<link rel="stylesheet"
  href="https://unpkg.com/bulmaswatch/litera/bulmaswatch.min.css">

<!-- Add Fontawesome -->
<link rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
  integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
  crossorigin="anonymous">

Now we have to tell mint to use this file - you do this by adding:

"application": {
    "head": "assets/head.html"
  },

to the mint.json file — so now the file looks like:

code/mint/src/count_bulma/mint.json
{
  "name": "bulma_count",
  "source-directories": [
    "source"
  ],
  "application": {
    "head": "assets/head.html"
  },
  "test-directories": [
    "tests"
  ]
}

1.3. Counter Component

Now you can see the code is focused on the logic and CSS is mostly external.

Note
 We are still using the CounterStore from the previous exploration.
code/mint/src/count_bulma/source/Counter.mint
component Counter {

  connect Counter.Store exposing {
    count,
    increment as incrementCounter,
    decrement as decrementCounter
  }

  fun handleDecrement (event : Html.Event) : Promise(Never, Void) {
    decrementCounter()
  }

  fun handleIncrement (event : Html.Event) : Promise(Never, Void) {
    incrementCounter()
  }

  fun render : Html {
    <nav class="panel">
      <p class="panel-heading">
        <{ "Mint Counter" }>
      </p>
      <p class="panel-tabs">
        <a>
          <button class="button is-medium is-warning" onClick={handleDecrement}>
            <i class="fas fa-minus"></i>
          </button>
        </a>
        <a>
          <p class="title is-3">
            <{ "Count: #{count}" }>
          </p>
        </a>
        <a>
          <button class="button is-medium is-success" onClick={handleIncrement}>
            <i class="fas fa-plus"></i>
          </button>
        </a>
      </p>
    </nav>
  }
}

1.4. Add our Counter to Main

code/mint/src/count_bulma/source/Main.mint
component Main {

  style centerAll {
    font-family: sans;
    font-weight: bold;
    font-size: 50px;

    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    width: 100vw;
  }

  fun render : Html {
    <div::centerAll class="container is-fluid">
      <Counter/>
    </div>
  }

}

  • here in Main we used Mint CSS in <div::centerAll class="container is-fluid"> — so we can now use both Bulma class tags and Mint to override.

  • you must stop mint and restart — to load the new assets.

Now open http://localhost:3000

be sure you see:

  • Count: centered vertically and horizontally in a new font

  • and + and - buttons formatted with Fontawesome Icons

  • the buttons should be rounded using the litera Bulma theme.

Mint Page