Tony's Collections
Tony's Bundles
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">