Sample UI Components
A set of reusable UI components you can use as templates to create your own custom components.
Includes some of the most common components includng buttons, tabs, dialogs, cards, table grids and more.
These sample components use Bulma for CSS styling.
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
To use bulma's CSS styles, choose one of the following methods:
1. Using CDN or downloading files
Add the following line to your root.html.leex
:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/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 root.html.leex
:
<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.9.3"
}