Includes some of the most common components includng buttons, tabs, dialogs, cards, table grids and more.

This suite uses Bulma for CSS styling. Bulma it's a free, open source, responsive CSS framework with no JS dependencies, which makes it a perfect fit to use with Phoenix LiveView.

Source code can be found at: github.com/msaraiva/surface_bulma.

Note: Feel free to adapt any of the components or examples to any other CSS framework of your preference. You can use Tailwind, Bootstrap or try them out with your own CSS styles.

Usage

Add surface_bulma to the list of dependencies in mix.exs:

def deps do
  [
    ...
    {:surface_bulma, github: "msaraiva/surface_bulma"}
  ]
end

To use bulma's CSS styles, choose one of the following methods:

1. Using CDN or downloading files

Add the following line to your layout_view.ex:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css" />

Or download the .css file and manually add it to your priv/static/css folder. In this case, add the following line to your layout_view.ex:

<link rel="stylesheet" href={{ Routes.static_path(@conn, "/css/bulma.min.css") }} />

2. NPM or Yarn

Add bulma to the list of dependencies in assets/package.json:

"dependencies": {
  ...
  "bulma": "0.8.0"
}