UI Components (WIP)
A suite of reusable UI components that can be used directly in your projects
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"
}