Harmonium

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, "~> 2.1.1"}
  ]
end

Then, in config.exs, pass in your Phoenix application's error translator function:

config :harmonium,
  error_helper: {YourAppWeb.ErrorHelpers, :translate_error}

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

Checkout the documentation for more examples and a full list of functions.

<%= 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 %>

Making a new release

To deploy and update to the harmonium hex package, you first need to increment version number in mix.exs. Afterwards all that needs to be done is to create a new release tag for the new version number, and Travis should deploy the package automatically.