Styles

There are lots of ways to make your Tyrian apps look nicer, see below for an example of Bootstrap, but there are many others you could try using the same principles, such as TailwindCSS.

Bootstrap

Install sass css and Bootstrap in your project:

npm install sass
npm install bootstrap

Add a sass CSS file like the one below:

@import "../node_modules/bootstrap/scss/bootstrap";

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 3em $font-stack;
  color: $primary-color;
}

Refer to your bundler's documentation for how to include it in your site build pipeline. For example, you may need to include a link to the file in the header of your HTML page:

<link rel="stylesheet" href="./scss/custom.scss">

Make use of the imported / available styles in your Scala based HTML:

  def view(model: Model): Html[Msg] =
    div(`class` := "container")(
      div(`class` := "row")(
        div(`class` := "col bodyText", styles("text-align" -> "right"))(
          button(onClick(Msg.Decrement))(text("-"))
        ),
        div(`class` := "col bodyText", styles("text-align" -> "center"))(
          text(model.toString)
        ),
        div(`class` := "col bodyText", styles("text-align" -> "left"))(
          button(onClick(Msg.Increment))(text("+"))
        )
      )
    )