Harmonium

Build Status Hex.pm License: MIT

Phoenix Framework view helpers for Harmonium-styled HTML without React.

Harmonium was originally conceived as a set of styled React components (harmonium.revelry.co). This library brings the style and markup framework of Harmonium into Phoenix, but leaves the JavaScript behind.

Here are a just few of the features:

  • Flexible grid layout system
  • Enhanced form helpers that decorate your inputs with errors and help text in a uniform way
  • Functions for inserting just the right CSS class names, for those moments when you want to go off the pre-built path

Installation

Add harmonium to your list of dependencies in mix.exs before running mix deps.get:

def deps do
  [
    {:harmonium, "~> 1.0.0"}
  ]
end

From your app’s root directory, run this command to get the harmonium package from NPM, which contains the SCSS you’ll need:

$(cd assets && npm install --save harmonium)

In assets/app.scss, import the SCSS:

@import '~harmonium/scss/app';

For more details, and a set of Starter Settings for configuring Harmonium styles, go to harmonium.revelry.co

Example Usage

<%= form_for @changeset, @action, fn f -> %>
  <%= row do %>
    <%= col medium: 6, large: 4 do %>
      <%= text_input_stack f, :username, label: "Username", help: "Pick a good one. You can't change it later." %>
    <% end %>
    <%= col medium: 6, large: 4 do %>
      <%= password_input_stack f, :password, label: "Password", help: "Make it strong!" %>
    <% end %>
    <%= col medium: 6, large: 4 do %>
      <%= password_input_stack f, :password, label: "Password (confirm)", help: "Type it again." %>
    <% end %>
  <% end %>
  <%= row do %>
    <%= col do %>
      <%= single_checkbox f, :subscribe_to_newsletter, label: "Please, please, please subscribe to my newsletter." %>
    <% end %>
  <% end %>
  <%= row do %>
    <%= col do %>
      <%= submit "Save", class: button_class(expanded: true) %>
    <% end %>
  <% end %>
<% end %>