How to create a form with Beyond Canvas styles

In this guide, you'll learn how to create a form that has the Beyond Cancas styles applied. To do so, you first need to make your controller use some of the layouts provided by Beyond Canvas:

class UsersController < ApplicationController
  layout 'beyond_canvas/public'
end

It is recommended to set the beyond_canvas/public layout for the ApplicationController. This way all controllers inheriting from ApplicationController will use the same layout.

Next, use an html structure like the following to create your form:

<div class="card card--padding">
  <%= form_for @user, builder: BeyondCanvas::FormBuilder do |f| %>

    <h2 class="card__headline">Create your account</h2>

    <%= f.email_field :email, label: 'Your email' %>
    <%= f.password_field :password, label: 'Your password', hint: 'Must contain letters and numbers.' %>

    <div class="form__actions--left">
      <%= f.button 'Save', type: :submit, class: 'button__solid--primary' %>
    </div>

  <% end %>
</div>

Done! That's all you need to do to apply the Beyond Canvas styles to your forms.