views

Structure

1. Directory Organization

app/views/
├── layouts/
├── shared/
├── components/
└── [resource]/
    ├── index.html.erb
    ├── show.html.erb
    ├── _form.html.erb
    └── [action].html.erb

1. Naming Conventions

• Use lowercase
• Use underscores for spaces
• Prefix partials with underscore
• Use meaningful names
• Follow resource naming

Templates

1. Layout Files

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "application", defer: true %>
  </head>
  <body>
    <%= render "shared/header" %>
    <main>
      <%= render "shared/flash" %>
      <%= yield %>
    </main>
    <%= render "shared/footer" %>
  </body>
</html>

1. Index Views

<% content_for :title, t('.title') %>

<div class="container">
  <header class="mb-4">
    <h1><%= t('.title') %></h1>
    <%= link_to t('.new'), new_resource_path, class: 'button' %>
  </header>

  <%= render 'filter_form' if @filters.present? %>

  <% if @resources.any? %>
    <%= render @resources %>
  <% else %>
    <%= render 'shared/empty_state' %>
  <% end %>

  <%= render 'shared/pagination', collection: @resources %>
</div>

1. Show Views

<% content_for :title, t('.title', name: @resource.name) %>

<div class="container">
  <header class="mb-4">
    <h1><%= t('.title', name: @resource.name) %></h1>
    <div class="actions">
      <%= link_to t('.edit'), edit_resource_path(@resource), class: 'button' %>
      <%= button_to t('.delete'), resource_path(@resource),
          method: :delete,
          class: 'button button--danger',
          data: { confirm: t('.confirm_delete') } %>
    </div>
  </header>

  <%= render 'details', resource: @resource %>
  <%= render 'related_resources' if @resource.related.any? %>
</div>

1. Form Partials

<%= form_with model: @resource, class: 'form' do |f| %>
  <%= render 'shared/error_messages', resource: @resource %>

  <div class="form-group">
    <%= f.label :attribute %>
    <%= f.text_field :attribute, class: 'form-control' %>
    <%= f.error_message :attribute %>
  </div>

  <div class="actions">
    <%= f.submit class: 'button' %>
    <%= link_to t('.cancel'), :back, class: 'button button--secondary' %>
  </div>
<% end %>