SurfaceBulma (WIP)

A set of simple Surface components based on Bulma.

Documentation and live examples can be found at http://surface-demo.msaraiva.io/uicomponents.

Note: This is not a full-featured suite of components yet. Most of the functionality we have so far is based on the requirements we had to build Surface's website.

Components

Button - The classic button, in different colors, sizes, and states. (Thanks Tiago Morais).
Table - The inevitable HTML table.
Tabs - A simple horizontal navigation tabs component.
Form inputs Most of the Form inputs that exist in Surface are now available.
Panel component
Navbar (Soon!)
Dialog (Soon!)
Card (Soon!)

More components will be added soon. Contributions are welcome!

Example

<Table data={{ album <- @albums }} rowClass={{ &rowClass/2 }} bordered>
  <Column label="Album">
    {{ album.name }}
  </Column>
  <Column label="Released">
    {{ album.released }}
  </Column>
  <Column label="Artist">
    <a href="#">{{ album.artist }}</a>
  </Column>
</Table>

Usage

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

def deps do
  [
    ...
    {:surface_bulma, "~> 0.3.0"}
  ]
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"
}

License

Surface source code is licensed under the MIT License.