Getting Started

Start building rich interactive user-interfaces , writing minimal custom Javascript now. For a quick start, choose one of the boilerplates projects or install Surface from scratch.

Boilerplates

A minimal bare bones Surface boilerplate is available in case you want to take it for a spin without even bothering to install node/npm, i.e., no webpack, no babel , etc.

Steps required:

Clone the project with git clone git@github.com:msaraiva/surface_app.git Install dependencies with mix deps.get Start Phoenix endpoint with mix phx.server

That’s all! You can then visit localhost:4000 from your browser.

Further information and source code be found at github.com/msaraiva/surface_app .

Installing from scratch

Requirements:

Install Phoenix ( https://hexdocs.pm/phoenix/installation.html).

Install Phoenix LiveView ( https://hexdocs.pm/phoenix_live_view/installation.html )

Then add surface to the list of dependencies in mix.exs :

def deps do [ {:surface, "~> 0.1.0-alpha.1"} ] end

In order to have ~H available for any Phoenix view, add the following import to your web file in lib/my_app_web.ex :

# lib/my_app_web.ex ... def view do quote do ... import Surface end end

If you’re using mix format , make sure you add surface to the import_deps configuration in your .formatter.exs file:

[ import_deps: [:ecto, :phoenix, :surface], ... ]

Running the examples

Most of the components used in this website as well the examples in the documentation are just thin wrappers around Bulma components. Why Bulma? Because it’s a free, open source, responsive CSS framework with no JS dependencies , which makes it a perfect fit to use with Phoenix LiveView . However, you can easily adapt any of the examples to any library of your preference or try them out with your own CSS styles.

For a quick start with bulma, you can 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 add it to the list of dependencies in assets/package.json :

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

Tooling