close
Back To Tony's Profile Sign In
tony / Rails Layout

Tony's Current Go-To Rails Boilerplate

Notes

  • Follows the general principles laid out on html-first.com
  • Doesn't use the asset pipeline.
  • Doesn't use any of the Rails frontend recommendations
    • Doesn't use Stimulus. Uses Mini.js for moderate frontend interactivity.
    • Doesn't use Hotwire. Uses HTMX for asynchronous links, buttons, and forms.
    • Uses Tailwind Lite for CSS Utility Classes.

Included Patterns

The Application Layout

<!-- /app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html class="h-full" lang="en">
  <head>
    <%= render :partial=> "shared/head" %>
  </head>
  <body class="relative h-full <%= body_background_class %>" hx-boost="true" hx-target="#main-content" hx-select="#main-content"  hx-history="false" hx-indicator="#main-content" hx-swap="outerHTML">
    <%= render :partial => "shared/partial_containers" %>
    <div id="main-content" class="h-full">
      <% if use_bare_layout? %>
        <%= yield %>
      <% else %>
        <div class="min-h-full grid grid-cols-1 md:grid-cols-6" >
          <div class="col-span-1">
            <%= render :partial => "shared/left_nav" %>
          </div>
          <div class="col-span-1 md:col-span-5 border-l border-gray-200">
            <div id="center-container" style="max-width:900px">
              <div class="shown-while-loading shimmer p-5">
                <div class="rect width-.5"></div>
                <div class="rect width-.5"></div>
                <div class="rect"></div>
                <div class="rect width-.75"></div>
                <div class="rect width-.5"></div>
                <div class="rect width-.25"></div>
              </div>
              <div class="hidden-while-loading">
                <%= yield %>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </body>
</html>

The Head

<!-- /app/views/shared/_head.html.erb -->
<title><%= page_title %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="<%= page_description %>">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" href="/vendor/tailwind-lite/1.0.2.css">
<link rel="stylesheet" href="/stylesheets/styles.css<%= cache_buster %>">
<script src="/js/custom.js<%= cache_buster %>"></script>
<script src="/vendor/htmx/1.9.9.js" defer></script>
<script src="/vendor/mini/1.0.15.js" ></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700&display=swap" rel="stylesheet">
<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700&display=swap" rel="stylesheet">
</noscript>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Partials