Scaffolds

Theme

Hound

Framework

Tailwind CSS

Rails let's you get moving quick with scaffolds. Under the hood files and code are generated to remove the repetative nature of setting up new logic. The Hound theme provides some sensible defaults to make design work quickly for you as well.

When you install Rails UI the installer adds a generator configuration to your app's config/application.rb file

application.rb

module Hound
  class Application < Rails::Application
    config.generators do |g|
      g.template_engine :railsui
      # more generator stuff
    end
  end
end

If you'd prefer the default scaffolding templates, remove the line g.template_engine :railsui from your application.rb file as shown in the example above.

For the sake of example it's assumed we'll generate a scaffold with a Post model. Substitute your own resouce when referring to the snippets below.

Scaffolds

Index

Posts

New Post

Title

Example post title

Content

Example post content

Created 1 minute ago

View post

Title

Example post title 2

Content

Example post content 2

Created 1 minute ago

View post

index.html.erb
index.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="flex items-center justify-between pb-6 border-b dark:border-slate-700">
    <h1 class="text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Posts</h1>
    <div class="flex items-center justify-end">
      <%= link_to "New Post", new_post_path, class: "btn btn-primary" %>
    </div>
  </div>

  <div id="posts" class="divide-y dark:divide-slate-700 mb-10">
    <% @posts.each do |post| %>
      <div class="py-3">
        <%= render post %>

        <%= link_to "View post", post, class: "btn-link my-3 inline-block" %>
      </div>
    <% end %>
  </div>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .flex.items-center.justify-between.pb-6.border-b.dark:border-slate-700
    %h1.text-4xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight Posts
    .flex.items-center.justify-end
      = link_to "New Post", new_post_path, class: "btn btn-primary"
  #posts.divide-y.dark:divide-slate-700.mb-10
    - @posts.each do |post|
      .py-3
        = render post
        = link_to "View post", post, class: "btn-link my-3 inline-block"

Scaffolds

Show

post #1

Edit

Title

Example post title 2

Content

Example post content 2

Created 1 minute ago

show.html.erb
show.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="pb-6 border-b dark:border-slate-700">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-indigo-600 dark:text-indigo-500" aria-current="page">
            #<%= @post.id %>
          </span>
        </li>
      </ol>
    </nav>
    <div class="flex items-center justify-between">
      <h1 class="text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight flex-1">post #<%= @post.id %></h1>
      <%= link_to "Edit", edit_post_path(@post), class: "btn btn-light" %>
    </div>
  </div>
  <%= render @post %>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .pb-6.border-b.dark:border-slate-700
    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
      %ol.flex.flex-wrap.items-center.space-x-3
        %li
          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
        %li.flex.space-x-3
          .flex.items-center
            %span.text-slate-300.dark:text-slate-500 /
          %span.text-indigo-600.dark:text-indigo-500{"aria-current" => "page"}
            \##{@post.id}
    .flex.items-center.justify-between
      %h1.text-4xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight.flex-1
        post ##{@post.id}
      = link_to "Edit", edit_post_path(@post), class: "btn btn-light"
  = render @post

Scaffolds

New

New Post

new.html.erb
new.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="mb-4 pb-6 border-b dark:border-slate-700">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-indigo-600 dark:text-indigo-500" aria-current="page">New</span>
        </li>
      </ol>
    </nav>
    <h1 class="text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">New Post</h1>
  </div>

  <div>
    <%= render "form", post: @post %>
  </div>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .mb-4.pb-6.border-b.dark:border-slate-700
    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
      %ol.flex.flex-wrap.items-center.space-x-3
        %li
          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
        %li.flex.space-x-3
          .flex.items-center
            %span.text-slate-300.dark:text-slate-500 /
          %span.text-indigo-600.dark:text-indigo-500{"aria-current" => "page"} New
    %h1.sm:text-4xl.text-3xl New Post
  %div
    = render "form", post: @post

Scaffolds

Edit

Edit Post

edit.html.erb
edit.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="mb-4 pb-6 border-b dark:border-slate-700">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-indigo-600 dark:text-indigo-500" aria-current="page">Edit</span>
        </li>
      </ol>
    </nav>
    <div class="flex items-center justify-between">
      <h1 class="text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Edit Post</h1>
      <%= button_to "Delete", @post, method: :delete, class: "btn btn-light", form: { data: { turbo_confirm: "Are you sure?" } } %>
    </div>
  </div>

  <div>
    <%= render "form", post: @post %>
  </div>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .mb-4.pb-6.border-b.dark:border-slate-700
    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
      %ol.flex.flex-wrap.items-center.space-x-3
        %li
          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
        %li.flex.space-x-3
          .flex.items-center
            %span.text-slate-300.dark:text-slate-500 /
          %span.text-indigo-600.dark:text-indigo-500{"aria-current" => "page"} Edit
    .flex.items-center.justify-between
      %h1.text-4xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight Edit Post
      = button_to "Delete", @post, method: :delete, class: "btn btn-light", form: { data: { turbo_confirm: "Are you sure?" } }
  %div
    = render "form", post: @post

Scaffolds

Partial

Title

Example post title 2

Content

Example post content 2

Created 1 minute ago

_post.html.erb
_post.haml.erb

<article id="<%= dom_id post %>" class="py-6 prose dark:prose-invert">
  <div>
    <p class="mb-0 font-semibold">
      Title
    </p>
    <p class="mt-0">
      <%= post.title %>
    </p>
  </div>
  <div>
    <p class="mb-0 font-semibold">
      Content
    </p>
    <p class="my-0">
      <%= post.content %>
    </p>
  </div>
  <time class="text-slate-600 dark:text-slate-400 text-xs mt-2" datetime="<%= post.created_at.to_formatted_s(:long) %>">Created <%= time_ago_in_words(post.created_at) + " ago" %></time>
</article>

%article.py-6.prose.dark:prose-invert{id: "#{dom_id post }"}
  %div
    %p.mb-0.font-semibold
      Title
    %p.mt-0
      = post.title
  %div
    %p.mb-0.font-semibold
      Content
    %p.my-0
      = post.content
  %time.text-slate-600.dark:text-slate-400.text-xs.mt-2{datetime: "#{post.created_at.to_formatted_s(:long)}"} Created
    = time_ago_in_words(post.created_at) + " ago"

Pages

Forms