Customized Devise view (the Sign-Up page) with Bulma CSS framework

new.html.erb

<%# part of this article: https://medium.com/@dyanagi/a-bulma-form-builder-for-ruby-on-rails-applications-aef780808bab %>

<div class="section">
  <div class="container">
    <div class="content is-medium is-narrow">

      <h2><%= t('.sign_up') %></h2>

      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= render "layouts/error_messages", resource: resource %>

        <div class="field">
          <%= f.email_field_with_label :email, autofocus: true, autocomplete: "email" %>
        </div>

        <div class="field">
          <%= f.password_field_with_label :password, autocomplete: "new-password" %>
          <% if @minimum_password_length %>
            <p class="help"><%= t('users.shared.minimum_password_length', count: @minimum_password_length) %></p>
          <% end %>
        </div>

        <div class="field">
          <%= f.password_field_with_label :password_confirmation, autocomplete: "new-password" %>
        </div>

        <div class="field has-text-danger">
          <%= flash[:recaptcha_error] %>
          <%= recaptcha_tags %>
        </div>

        <div class="actions">
          <%= f.submit_primary t('.sign_up') %>
        </div>
      <% end %>

      <%= render "users/shared/links" %>
    </div>
  </div>
</div>