Forem: Dailson Igo Araujo Palheta

Ruby on Rails 8 - Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless

Dailson Igo Araujo Palheta — Wed, 22 Jan 2025 16:34:20 +0000

Este artigo é intencionalmente muito semelhante aos anteriores desta série, mas agora usaremos um excelente frameword css recém-criado, o CSS Zero, pronto para usar com "nobuild" ou para aplicações Ruby on Rail que precisam do "build" também.

Antes de iniciar, observe que o objetivo do framework CSS Zero não é ser um framework classless ou class-light. As mudanças sugeridas aqui são apenas para efeito de teste, com o objetivo de estilizar todos os elementos das páginas HTML deste tutorial sem ter que adicionar nenhuma classe.

Portanto, em alguns elementos HTML, provavelmente a formatação não ficará de acordo com o que o framework CSS Zero propõe de estilização, design, disposição e comportamento. Para verificar o funcionamento de acordo com o que o framework CSS Zero propõe, acesse o Lookbook do CSS Zero aqui, mas para vê-lo em funcionamento como um framework classless, siga os passos abaixo.

Inicie um novo aplicativo Rails

O time antes do comando rails serve para exibir no final da execução do comando o seu tempo de execução. No exemplo abaixo, levou 47 segundos.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

O Rails 8, dentro de sua filosofia No Build, utilizará por padrão o Propshaft como biblioteca de pipeline de assets e o Importmap como biblioteca para JavaScript. O Importmap não realiza nenhum tipo de processamento do JavaScript.

Abra o projeto com o VSCode ou seu editor preferido

$ cd classless-css-zero && code .

Criando algumas páginas para visualizar a estilização dos elementos HTML

As páginas estão nos Passos Comuns no primeiro artigo da série.

Adicione o CSS Zero ao seu projeto

Exibir mais …

Siga as orientações do CSS Zero para incluí-lo ao seu projeto, conforme copiados abaixo:

$ bundle add css-zero
$ bin/rails generate css_zero:install

Para verificar quais componentes estão disponíveis, execute o comando abaixo:

$ bin/rails generate css_zero:add --help

Para adicionar todos os componentes, execute o comando a seguir:

bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share

Observe que caso outros componentes sejam adicionados ou algum possa ter sido sido removido, o comando acima estará obsoleto.

Alterando o arquivo `app/assets/stylesheets/base.css`

Exibir mais …

Ao observar o uso para títulos HTML exemplificado no link Headings, vemos que muitos elementos estilizados precisão estar dentro de uma div com a class="prose".

<div class="prose">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>

Para que estes elementos HTML sejam estilizados sem o uso de nenhuma div class="prose" será necessário alterar a forma como estes elementos são estilizados. Abra o arquivo app/assets/stylesheets/prose.css e copie o conteúdo abaixo logo que se encontra após o :where(.prose) {.

  font-size: var(--text-fluid-base);
  max-inline-size: 65ch;

  /* Antialiased fonts */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-extrabold);
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.5em;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

Agora com o arquivo app/assets/stylesheets/base.css aberto, procure pela linha body { e cole o conteúdo copiado após o text-rendering: optimizeLegibility;. Ao colar o conteúdo, remova ou comente a linha max-inline-size: 65ch;. O conteúdo de body deve ficar igual ao exemplo abaixo:

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;

  /* Teste para Configuração Classless */
  font-size: var(--text-fluid-base);
  /* max-inline-size: 65ch; */

  /* Antialiased fonts */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-extrabold);
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.5em;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}

Abra novamente o arquivo app/assets/stylesheets/prose.css e copie o conteúdo que inclua as linhas a seguir:

De:

  h1 {
    font-size: 2.4em;
  }

Até:

   mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }

O Conteúdo que deverá ser copiado está abaixo para facilitar o exercício:

/* Teste para Configuração Classless */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.8em;
  }

  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }

  :is(b, strong) {
    font-weight: var(--font-bold);
  }

  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded);
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }

  code {
    padding: 0.1em 0.3em;
  }

  pre {
    border-radius: 0.5em;
    overflow-x: auto;
    padding: 0.5lh 2ch;
    text-wrap: nowrap;
  }

  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }

  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }

  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }

  blockquote p {
    hyphens: none;
  }

  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }

  th {
    font-weight: var(--font-bold);
  }

  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }

  th {
    border-block-end-width: 3px;
  }

  del {
    background-color: rgb(from var(--color-negative) r g b / .1);
    color: var(--color-negative);
  }

  ins {
    background-color: rgb(from var(--color-positive) r g b / .1);
    color: var(--color-positive);
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }

Após copiar o conteúdo acima, cole no final do arquivo app/assets/stylesheets/base.css

Alterando o arquivo `app/assets/stylesheets/button.css`

Exibir mais …

Altere a classe css .btn para que todos os elementos de botão do HTML usem este estilo automaticamente.

Altere de:

.btn {

Para:

/* Teste para Configuração Classless */
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
::file-selector-button,
button {

Alterando o arquivo `app/assets/stylesheets/input.css`

Exibir mais …

Altere a classe css .input para que todos os elementos de input do HTML usem este estilo automaticamente.

Altere de:

.input {

Para:

/* Teste para Configuração Classless */
.input,
input[type="email"],
input[type="password"],
input[type="search"],
input[type="text"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="tel"],
select[multiple],
textarea,
select {

Altere de :

.checkbox, .radio {

Para :

/* Teste para Configuração Classless */
.checkbox, .radio, input[type="checkbox"], input[type="radio"] {

Altere de:

.range {

Para:

/* Teste para Configuração Classless */
.range, input[type="range"] {

Altere de:

:is(.input, .checkbox, .radio, .range) {

Para:

/* Teste para Configuração Classless */
:is(.input, .checkbox, .radio, .range,
input[type="email"],
input[type="password"],
input[type="search"],
input[type="text"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="tel"],
select[multiple],
textarea,
select,
input[type="checkbox"],
input[type="radio"],
input[type="range"]
) {

Ajustes no arquivo `app/views/layouts/application.html.erb`

Exibir mais …

Dependendo de onde você colocou a referência para os arquivo de teste html no application.html.erb, a exibição dos links ficará em uma disposição diferente. Caso queira que a apresentação fique igual ao do tutorial, altere a parte do <header id="header"> para que fique igual ao exemplo abaixo:

  <body class="header-layout">
    <header id="header">
      <div class="container">
        <h1 class="font-bold text-2xl">Classless Css Um</h1>
      </div>

      <div>
        <%= link_to "HTM de Teste 1", pages_html_test_1_path %> /
        <%= link_to "HTM de Teste 2", pages_html_test_2_path %> /
        <%= link_to "HTM de Teste 3", pages_html_test_3_path %> /
        <%= link_to "HTM de Teste 4", pages_html_test_4_path %>
      </div>
    </header>

Agora sim, um HTML estilizando usando o CSS Zero como um framework classless 🤩

Após configurar o CSS Zero com as customizações acima e iniciar o servior do Rails você verá seu HTML estilizado.

Modo dark

Alguns estilos possuem a opção para modo escuro (dark mode). Para confirmar, altere o tema do seu computador nas opções de personalização de cores. Procure no Windows por Ativar modo escuro para apps e alterne entre modo escuro ou claro. A página HTML deverá automaticamente muda após a alteração no sistema operacional, indicando que possui suporte para o modo light e dark.

Passos seguintes

[x] Organizar os estilos de acordo com sua preferência;
[x] Usar estilização a partir de arquivos CSS do projeto, sem usar CDN;
[x] Replicar a capacidade de um framework classless CSS usando Tailwind;
[-] Atualizar dinamicamente no navegador as alterações feitas no projeto usando Rails Live Reload;
[-] Se quiser gastar um pouco mais de tempo com o frontend, verifique as opções de customização do seu estilo favorito;

Referências

Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless

Dailson Igo Araujo Palheta — Wed, 22 Jan 2025 16:33:44 +0000

Este artigo é intencionalmente muito semelhante aos anteriores desta série, mas desta vez usaremos o framework Tailwind como um framework css classless. Ele foi inspirado no artigo Classless CSS based on Tailwind

Inicie um novo aplicativo Rails

O time antes do comando rails serve para exibir no final da execução do comando o seu tempo de execução. No exemplo abaixo, levou 47 segundos.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Abra o projeto com o VSCode ou seu editor preferido

$ cd classless-css-tailwind && code .

Criando algumas páginas para visualizar a estilização dos elementos HTML

As páginas estão nos Passos Comuns no primeiro artigo da série.

Altere o arquivo do Tailwind `app/assets/stylesheets/application.tailwind.css`

Exibir mais …
Altere o arquivo acima para incluir a referência aos arquivos com a estilização em Tailwind CSS. Observe que apenas o Opção 1 está descomentada.

/* INSIRA OS CSS CUSTOMIZADOS DO TAILWIND NA PARTE SUPERIOR */
/* SE O "@tailwind base", "@tailwind components" E "@tailwind utilities" NÃO ESTIVEREM COMENTADOS */

/* Opção 1: Verde */
@import "./custom_tailwind/custom1.css";

/* Opção 2: Azul */
/* @import "./custom_tailwind/custom2.css"; */

/* Opção3: Do artigo "Classless CSS based on Tailwind" */
/* https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f */
/* @import "./custom_tailwind/custom3.css"; */

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

Crie a pasta custom_tailwind dentro do diretório app/assets/stylesheets/ para adicionar os arquivos customizados do Tailwind.

Insira o conteúdo do 1º arquivo Tailwind customizado em `custom1.css`

Exibir mais …
Crie o arquivo app/assets/stylesheets/custom_tailwind/custom1.css e copie o conteúdo a seguir.

/* 
  Visão geral:
    Unificação de variáveis de tema (ao invés de --background-light e --background-dark, temos apenas --background, e assim por diante).
    Redução de duplicações de @media (prefers-color-scheme: dark). Boa parte do tema escuro está centralizado no :root.
    Usamos variáveis no lugar das cores diretas e, em alguns pontos, aproveitar a nomenclatura do Tailwind.

    Caso utilize o modo escuro via classes (class="dark") em vez de prefers-color-scheme, 
    a lógica seria um pouco diferente (usando dark:bg-*, dark:text-*, etc.). 
    Mas, conforme as recomendações, mantivemos o @media (prefers-color-scheme: dark) para respeitar as preferências do usuário.


  1. Variáveis de tema unificadas
  Agora temos --background, --text e --accent (entre outras) em vez de --background-light, --background-dark, etc.
  Isso reduz a repetição e deixa o código mais fácil de manter.

  2. Menos repetições de @media (prefers-color-scheme: dark)
  Quase tudo para o tema escuro foi concentrado em um único bloco, dentro do :root.
  Assim, sempre que o usuário preferir o modo escuro, todas as variáveis são redefinidas.

  3. Uso de variáveis complementares
  Adicionamos --background-code, --border, --form-border e --focus-ring para garantir que todas as cores que possam variar 
  conforme o tema sejam facilmente alteradas.

  4. Estilos de formulário otimizados
  Em vez de separar cada tipo de input em vários blocos, unificamos a maioria deles.
  Evita duplicações e mantém uma consistência de design.

  ---
  Observações Finais

  Se quiser seguir ainda mais o padrão do Tailwind sem tantas variáveis, você poderia usar as classes utilitárias padrão 
  (bg-gray-50, text-gray-900, dark:bg-gray-800, dark:text-gray-100, etc.).
  Para quem prefere o modo escuro via classe .dark, bastaria trocar o @media (prefers-color-scheme: dark) 
  por seletores .dark & { ... } no arquivo e controlar o tema em JavaScript ou manualmente no HTML (<html class="dark">).

*/

/* 
 |-----------------------------------------------------------------------------
 | IMPORTA O TAILWIND CSS
 |-----------------------------------------------------------------------------
 | Aqui importamos as diretivas do Tailwind para carregar o CSS base, 
 | componentes e utilitários. Isso garante que todas as funcionalidades 
 | essenciais do Tailwind sejam carregadas antes de adicionarmos 
 | nossas customizações.
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 
 |-----------------------------------------------------------------------------
 | VARIÁVEIS CSS PARA TEMAS CLARO/ESCURO
 |-----------------------------------------------------------------------------
 | Agora, unificamos as variáveis para evitar duplicação. Em vez de termos
 | --background-light e --background-dark, temos apenas --background e 
 | mudamos seu valor no @media (prefers-color-scheme: dark).
 */
:root {
  /* Tema claro (default) */
  --background: #ffffff; /* Fundo do site */
  --text: #292929; /* Cor principal do texto */
  --accent: #1a8917; /* Cor de destaque (links, botões, etc.) */

  /* Variáveis complementares para uso em elementos específicos */
  --background-code: #f3f4f6; /* Fundo de blocos de código no claro */
  --border: #e5e7eb; /* Cor de borda padrão (claro) */
  --form-border: #d1d5db; /* Cor de borda padrão para formulários (claro) */
  --focus-ring: #1a8917; /* Cor do anel de foco (claro) */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Tema escuro */
    --background: #121212; /* Fundo do site */
    --text: #e6e6e6; /* Cor principal do texto */
    --accent: #4caf50; /* Cor de destaque (links, botões, etc.) */

    /* Variáveis complementares */
    --background-code: #1f2937; /* Fundo de blocos de código no escuro */
    --border: #374151; /* Cor de borda padrão (escuro) */
    --form-border: #4b5563; /* Cor de borda padrão para formulários (escuro) */
    --focus-ring: #4caf50; /* Cor do anel de foco (escuro) */
  }
}

/* 
 |-----------------------------------------------------------------------------
 | ESTILOS BASE
 |-----------------------------------------------------------------------------
 | A camada base (layer base) permite que possamos sobrescrever
 | estilos padrão do browser e aplicar resets ou estéticas iniciais.
 | Aqui fazemos o 'apply' de classes Tailwind diretamente em tags HTML 
 | para criar estilos globais.
 */
@layer base {
  /*
   |-----------------------------------------------------------------------------
   | HTML
   |-----------------------------------------------------------------------------
   | O <html> recebe o antialiased (que melhora a renderização de fontes),
   | além das cores de fundo e texto baseadas em nossas variáveis.
   */
  html {
    @apply antialiased;
    background-color: var(--background);
    color: var(--text);
  }

  /*
   |-----------------------------------------------------------------------------
   | BODY
   |-----------------------------------------------------------------------------
   | Aqui definimos o espaçamento interno (padding) para o corpo do site
   | e uma largura máxima de 4xl, centralizando (mx-auto) para que o 
   | conteúdo não fique muito extenso em telas grandes.
   */
  body {
    @apply mx-auto max-w-4xl px-4 leading-relaxed sm:px-6 lg:px-8;
  }

  /*
   |-----------------------------------------------------------------------------
   | TÍTULOS (H1, H2, H3, etc.)
   |-----------------------------------------------------------------------------
   | Definimos tamanhos de fonte diferentes para cada nível de título,
   | além de margens inferiores para separar visualmente do texto seguinte.
   | Também usamos breakpoints (sm:) para modificar o tamanho em telas maiores.
   */
  /* h1 {
    @apply mb-8 text-4xl font-bold leading-tight sm:text-5xl;
  }
  h2 {
    @apply mb-6 text-3xl font-bold leading-tight sm:text-4xl;
  }
  h3 {
    @apply mb-4 text-2xl font-bold sm:text-3xl;
  }
  h4 {
    @apply mb-4 text-xl font-bold;
  }
  h5 {
    @apply mb-4 text-lg font-bold;
  }
  h6 {
    @apply mb-4 text-base font-bold;
  } */

  /* Principais mudanças feitas:

  1. Removemos os breakpoints `sm:` fixos e substituímos por `clamp()`
  2. A função `clamp()` aceita três valores:
    - Valor mínimo (para telas pequenas)
    - Valor preferido (calculado usando viewport width)
    - Valor máximo (para telas grandes)

  3. A fórmula geral usada é:
    - Para títulos: percentual do viewport (vw) + valor base em rem
    - Para texto regular: valor menor do viewport + valor base menor

  4. Os valores foram escolhidos para criar uma transição suave entre:
    - Telas móveis (320px+)
    - Tablets (768px+)
    - Desktops (1024px+)
    - Telas grandes (1440px+)

  Esta implementação oferece várias vantagens:
  - Transição mais suave entre tamanhos de tela
  - Elimina "saltos" abruptos nos breakpoints
  - Mantém a legibilidade em todos os tamanhos de tela
  - Reduz a quantidade de código necessário
  - Proporciona uma experiência mais fluida aos usuários */

  h1 {
    @apply mb-8 font-bold leading-tight;
    font-size: clamp(2.25rem, 5vw + 1rem, 3.5rem);
  }

  h2 {
    @apply mb-6 font-bold leading-tight;
    font-size: clamp(1.875rem, 4vw + 0.5rem, 2.75rem);
  }

  h3 {
    @apply mb-4 font-bold;
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  }

  h4 {
    @apply mb-4 font-bold;
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  }

  h5 {
    @apply mb-4 font-bold;
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
  }

  h6 {
    @apply mb-4 font-bold;
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
  }


  /*
   |-----------------------------------------------------------------------------
   | PARÁGRAFOS (P) E TEXTO EM GERAL
   |-----------------------------------------------------------------------------
   | Damos um espaçamento (margin-bottom) e um tamanho de fonte confortável.
   | sm:text-xl faz com que, em telas no breakpoint "sm" (ex: >= 640px), 
   | o texto fique maior.
   */
  /* p {
    @apply mb-6 text-lg leading-relaxed sm:text-xl;
  } */

  p {
    @apply mb-6 leading-relaxed;
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  }

  /*
   |-----------------------------------------------------------------------------
   | LINKS (A)
   |-----------------------------------------------------------------------------
   | Usamos a cor de destaque (var(--accent)) e sublinhado. 
   | O :hover diminui a opacidade para dar um efeito de feedback ao usuário.
   */
  a {
    color: var(--accent);
    @apply hover:underline hover:opacity-80;
  }

  /*
   |-----------------------------------------------------------------------------
   | TEXTO EM NEGRITO (STRONG) E ITÁLICO (EM)
   |-----------------------------------------------------------------------------
   | Mantemos a semântica e a ênfase visualmente clara.
   */
  strong {
    @apply font-bold;
  }

  em {
    @apply italic;
  }

  /*
   |-----------------------------------------------------------------------------
   | LISTAS (UL, OL)
   |-----------------------------------------------------------------------------
   | Definimos margens, padding à esquerda e estilos de lista (disc, decimal).
   */
  ul,
  ol {
    @apply mb-6 pl-8;
  }

  /* li {
    @apply mb-2 text-lg sm:text-xl;
  } */

  li {
    @apply mb-2;
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  }

  ul > li {
    @apply list-disc;
  }

  ol > li {
    @apply list-decimal;
  }

  /*
   |-----------------------------------------------------------------------------
   | BLOCOS DE CÓDIGO (PRE, CODE)
   |-----------------------------------------------------------------------------
   | Usados para exibir trechos de código de forma destacada. 
   | O overflow-x-auto faz com que apareça scroll horizontal em códigos longos.
   */
  pre {
    @apply mb-6 overflow-x-auto rounded-lg p-4;
    background-color: var(--background-code);
  }

  code {
    @apply rounded px-1 font-mono text-sm;
    background-color: var(--background-code);
  }

  /*
   |-----------------------------------------------------------------------------
   | BLOCKQUOTE (CITAÇÕES)
   |-----------------------------------------------------------------------------
   | Recuo (padding-left), texto em itálico e borda esquerda na cor de destaque.
   */
  blockquote {
    @apply mb-6 pl-4 italic;
    border-left: 4px solid var(--accent);
  }

  /*
   |-----------------------------------------------------------------------------
   | TABELAS (TABLE, TH, TD)
   |-----------------------------------------------------------------------------
   | Tabelas ocupando toda a largura (w-full) e sem espaços entre as células
   | (border-collapse). Também definimos bordas para separar conteúdo.
   */
  table {
    @apply mb-6 w-full border-collapse;
  }

  th {
    @apply p-2 text-left font-bold;
    border-bottom: 2px solid var(--border);
  }

  td {
    @apply p-2;
    border-bottom: 1px solid var(--border);
  }

  /*
   |-----------------------------------------------------------------------------
   | FORMULÁRIOS (INPUT, TEXTAREA, SELECT)
   |-----------------------------------------------------------------------------
   | Unificamos a estilização para vários tipos de input:
   | - Todos terão largura cheia (w-full), padding, bordas arredondadas e 
   |   cor de fundo conforme o tema.
   | - A borda usa nossa variável de cor de borda.
   */
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="tel"],
  select[multiple],
  input,
  textarea,
  select {
    @apply w-full rounded-lg p-2;
    background-color: var(--background);
    border: 1px solid var(--form-border);
  }

  /*
   |-----------------------------------------------------------------------------
   | ESTADO DE FOCUS EM FORMULÁRIOS
   |-----------------------------------------------------------------------------
   | outline-none remove as bordas padrão do navegador,
   | e adicionamos um box-shadow para indicar que está em foco.
   */
   input[type="email"]:focus,
   input[type="password"]:focus,
   input[type="search"]:focus,
   input[type="text"]:focus,
   input[type="url"]:focus,
   input[type="number"]:focus,
   input[type="date"]:focus,
   input[type="datetime-local"]:focus,
   input[type="month"]:focus,
   input[type="week"]:focus,
   input[type="time"]:focus,
   input[type="tel"]:focus,
   select[multiple]:focus,
   input:focus,
   textarea:focus,
   select:focus {
    @apply outline-none;
    box-shadow: 0 0 0 2px var(--focus-ring);
  }

  /*
   |-----------------------------------------------------------------------------
   | BOTÕES (BUTTON, INPUT[TYPE=BUTTON/SUBMIT/RESET/FILE])
   |-----------------------------------------------------------------------------
   | Usamos a cor de destaque (accent) para o fundo e o texto fica branco.
   | Adicionamos hover e transition para ficar mais agradável ao usuário.
   */
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  ::file-selector-button,
  button {
    @apply rounded-lg px-4 py-2 text-white transition-opacity hover:opacity-90;
    background-color: var(--accent);
  }

  /*
   |-----------------------------------------------------------------------------
   | IMAGENS E MÍDIA (IMG, VIDEO, AUDIO)
   |-----------------------------------------------------------------------------
   | As imagens terão largura máxima de 100% (max-w-full) e altura automática 
   | (h-auto) para ficarem responsivas, centralizadas (ms-auto), além de bordas arredondadas (rounded-lg).
   */
  img {
    @apply mx-auto mb-6 h-auto max-w-full rounded-lg hover:scale-[1.02];
  }

  /* Figcaption (legendas de imagem) */
  figcaption {
    @apply mt-2 text-sm italic;
    text-align: center;
  }

  video,
  audio {
    @apply mb-6 w-full;
  }

  /*
   |-----------------------------------------------------------------------------
   | DIVISORES (HR)
   |-----------------------------------------------------------------------------
   | Linha horizontal para separar seções de conteúdo.
   | Usamos var(--border) para a cor da borda, de acordo com o tema.
   */
  hr {
    @apply my-8;
    border-top: 1px solid var(--border);
  }
}

/* 
 |-----------------------------------------------------------------------------
 | UTILITÁRIOS PERSONALIZADOS
 |-----------------------------------------------------------------------------
 | A camada utilities (layer utilities) é onde definimos classes utilitárias 
 | adicionais, caso as classes do Tailwind não cubram nossas necessidades.
 */
@layer utilities {
  /*
   |-----------------------------------------------------------------------------
   | CONTENT-WRAPPER
   |-----------------------------------------------------------------------------
   | Caso queiramos reaproveitar o max-w-4xl e o mx-auto + px-4 em um 
   | container específico.
   */
  .content-wrapper {
    @apply mx-auto max-w-4xl px-4;
  }

  /*
   |-----------------------------------------------------------------------------
   | TEXT-BALANCE
   |-----------------------------------------------------------------------------
   | Propriedade moderna (text-wrap: balance) que melhora a distribuição 
   | de palavras, mas não é suportada em todos os navegadores.
   | Lembre de testar compatibilidade.
   */
  .text-balance {
    text-wrap: balance;
  }

  /*
   |-----------------------------------------------------------------------------
   | PROSE
   |-----------------------------------------------------------------------------
   | Caso queira um estilo de texto ao estilo "prose" do Tailwind, mas 
   | sem o limite padrão de largura.
   */
  .prose {
    @apply max-w-none;
  }

  /*
   |-----------------------------------------------------------------------------
   | PROSE > IMG
   |-----------------------------------------------------------------------------
   | Exemplo de como centralizar imagens dentro de um container .prose.
   */
  .prose img {
    @apply mx-auto;
  }
}

/* 
---

 */

Insira o conteúdo do 2º arquivo Tailwind customizado em `custom2.css`

Exibir mais …
Crie o arquivo app/assets/stylesheets/custom_tailwind/custom2.css e copie o conteúdo a seguir.

/* =================================================================
   CONFIGURAÇÃO DE VARIÁVEIS CSS
   Definição centralizada de todas as variáveis do projeto
   ================================================================= */
:root {
  /* Cores - Tema Claro */
  --color-primary: #2563eb; /* blue-600 do Tailwind */
  --color-primary-hover: #1d4ed8; /* blue-700 do Tailwind */
  --color-background: #ffffff;
  --color-text: #1f2937; /* gray-800 do Tailwind */
  --color-text-muted: #4b5563; /* gray-600 do Tailwind */
  --color-border: #d1d5db; /* gray-300 do Tailwind */
  --color-input-bg: #f9fafb; /* gray-50 do Tailwind */
  --color-code-bg: #f3f4f6; /* gray-100 do Tailwind */
  --color-code-text: #273e65; /* blue-800 do Tailwind */

  /* Espaçamento */
  --spacing-base: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border Radius */
  --radius-base: 0.375rem;
  --radius-lg: 0.5rem;

  /* Larguras Máximas */
  --max-width-content: 48rem; /* 768px */
}

/* Configuração do tema escuro usando prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    /* Cores - Tema Escuro */
    --color-primary: #0284c7; /* sky-600 do Tailwind */
    --color-primary-hover: #6990c7; /* blue-400 do Tailwind */
    --color-background: #111827; /* gray-900 do Tailwind */
    --color-text: #f3f4f6; /* gray-100 do Tailwind */
    --color-text-muted: #9ca3af; /* gray-400 do Tailwind */
    --color-border: #374151; /* gray-700 do Tailwind */
    --color-input-bg: #1f2937; /* gray-800 do Tailwind */
    --color-code-bg: #1f2937; /* gray-800 do Tailwind */
    --color-code-text: #e8ecf6; /* blue-100 do Tailwind */
  }
}

/* Importações do Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* =================================================================
     ESTILOS BASE
     Configurações globais e reset de elementos HTML
     ================================================================= */
@layer base {
  body {
    @apply mx-auto max-w-3xl px-4 leading-relaxed tracking-wide sm:px-6 md:px-8 lg:px-12;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif;
      line-height: clamp(1.5, 2vw + 1.2, 1.75);
  }

  /* Links */
  a {
    color: var(--color-primary);
    @apply hover:underline;
  }

  /* Títulos - Usando variáveis CSS para tamanhos consistentes */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-base);
    @apply font-bold leading-tight;
  }

  /* Sistema de escala tipográfica responsiva */
  /* h1 {
    @apply text-3xl sm:text-4xl md:text-5xl;
  }
  h2 {
    @apply text-2xl sm:text-3xl md:text-4xl;
  }
  h3 {
    @apply text-xl sm:text-2xl md:text-3xl;
  }
  h4 {
    @apply text-lg sm:text-xl md:text-2xl;
  }
  h5 {
    @apply text-base sm:text-lg md:text-xl;
  }
  h6 {
    @apply text-sm sm:text-base md:text-lg;
  } */

  /* Sistema de escala tipográfica fluida usando clamp() */
  h1 {
    font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  }

  h2 {
    font-size: clamp(1.75rem, 4vw + 0.75rem, 3rem);
  }

  h3 {
    font-size: clamp(1.5rem, 3vw + 0.75rem, 2.5rem);
  }

  h4 {
    font-size: clamp(1.25rem, 2vw + 0.75rem, 2rem);
  }

  h5 {
    font-size: clamp(1.1rem, 1.5vw + 0.75rem, 1.5rem);
  }

  h6 {
    font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
  }

  /* Elementos de texto */
  /* p {
    margin-bottom: var(--spacing-base);
    @apply text-lg leading-relaxed;
  } */

  /* Parágrafos com tipografia fluida */
  p {
    margin-bottom: var(--spacing-base);
    font-size: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
    line-height: clamp(1.6, 2vw + 1.2, 1.8);
  }

  /* Listas */
  ul,
  ol {
    margin-bottom: var(--spacing-base);
    padding-left: var(--spacing-lg);
  }
  ul {
    @apply list-disc;
  }
  ol {
    @apply list-decimal;
  }
  /* li {
    margin-bottom: calc(var(--spacing-base) * 0.5);
  } */
  /* Elementos de lista com tipografia fluida */
  li {
    margin-bottom: calc(var(--spacing-base) * 0.5);
    font-size: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
  }


  /* Imagens responsivas */
  img {
    @apply h-auto w-full;
    border-radius: var(--radius-lg);
    margin: var(--spacing-base) 0;
  }

  /* Citações */
  /* blockquote {
    border-left: 4px solid var(--color-border);
    color: var(--color-text-muted);
    padding-left: var(--spacing-base);
    @apply my-4 italic;
  } */

  /* Código inline e blocos de código */
  /* code {
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    border-radius: var(--radius-base);
    @apply px-1 py-0.5 text-sm;
  } */

  /* pre {
    background-color: var(--color-code-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-base);
    @apply overflow-x-auto text-sm;
  } */

  /* Citações com tipografia fluida */
  blockquote {
    border-left: 4px solid var(--color-border);
    color: var(--color-text-muted);
    padding-left: var(--spacing-base);
    @apply my-4 italic;
    font-size: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
  }

  /* Código inline com tipografia fluida */
  code {
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    border-radius: var(--radius-base);
    @apply px-1 py-0.5;
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
  }

  /* Blocos de código com tipografia fluida */
  pre {
    background-color: var(--color-code-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-base);
    @apply overflow-x-auto;
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
  }

  /* Tabelas */
  table {
    @apply my-4 w-full border-collapse;
  }

  /* th,
  td {
    border-bottom: 1px solid var(--color-border);
    padding: calc(var(--spacing-base) * 0.5) var(--spacing-base);
    @apply text-left;
  } */

  /* Células de tabela com tipografia fluida */
  th, td {
    border-bottom: 1px solid var(--color-border);
    padding: calc(var(--spacing-base) * 0.5) var(--spacing-base);
    @apply text-left;
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
  }

  th {
    background-color: var(--color-code-bg);
    @apply font-semibold;
  }

  /* Formulários */
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="tel"],
  select[multiple],
  input,
  textarea,
  select,
  button {
    border-radius: var(--radius-base);
    margin-bottom: var(--spacing-base);
    padding: calc(var(--spacing-base) * 0.5) var(--spacing-base);
    width: 100%;
    border: 1px solid var(--color-border);
  }

  ::file-selector-button {
    border-radius: var(--radius-base);
    margin-bottom: var(--spacing-base);
    padding: calc(var(--spacing-base) * 0.5) var(--spacing-base);
    border: 1px solid var(--color-border);
  }

  /* Campos de formulário */
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="tel"],
  select[multiple],
  input,
  textarea,
  select {
    background-color: var(--color-input-bg);
    color: var(--color-text);
  }

  /* Estados de foco */
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="search"]:focus,
  input[type="text"]:focus,
  input[type="url"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="time"]:focus,
  input[type="tel"]:focus,
  select[multiple]:focus,
  input:focus,
  textarea:focus,
  select:focus {
    @apply outline-none ring-2 ring-blue-500 focus:ring-offset-2;
  }

  /* Botões */
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  ::file-selector-button {
    background-color: var(--color-primary);
    color: white;
    @apply cursor-pointer hover:bg-blue-700;
  }
}

/* =================================================================
     COMPONENTES
     Classes reutilizáveis para padrões comuns de design
     ================================================================= */
@layer components {
  .container-page {
    margin: 0 auto;
    max-width: var(--max-width-content);
    padding: 0 var(--spacing-base);
    @apply sm:px-6 md:px-8 lg:px-12;
  }

  .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-input-bg);
  }

  .code-block {
    background-color: var(--color-code-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-base);
    @apply overflow-x-auto text-sm;
  }
}

/* =================================================================
     UTILITÁRIOS
     Classes utilitárias personalizadas
     ================================================================= */
@layer utilities {
  .text-primary {
    color: var(--color-primary);
  }

  .bg-primary {
    background-color: var(--color-primary);
  }
}

Insira o conteúdo do 3º arquivo Tailwind customizado em `custom3.css`

Exibir mais …
Crie o arquivo app/assets/stylesheets/custom_tailwind/custom3.css e copie o conteúdo a seguir.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply min-h-screen bg-gradient-to-t from-slate-50 to-slate-200 text-slate-950;
  }

  h1 {
    @apply px-4 py-8 text-2xl;
  }

  h2 {
    @apply px-4 py-4 text-xl;
  }

  h3 {
    @apply px-4 pb-1 pt-2 text-xl;
  }

  h4,
  h5,
  h6 {
    @apply px-4 pb-0 pt-1 text-lg;
  }

  a {
    @apply underline decoration-sky-800 underline-offset-2;
  }

  a:hover {
    @apply decoration-2;
  }

  header,
  main,
  footer {
    @apply container max-w-3xl;
  }

  header {
    @apply mt-4 rounded-t-lg border border-slate-300 bg-slate-50;

    h1 {
      @apply pb-1 text-slate-900;
    }

    h2 {
      @apply font-normal text-slate-700;
    }

    p {
      @apply px-4 py-4 pt-0 text-base font-normal text-slate-500;
    }
  }

  main {
    @apply border-l border-r border-slate-300 bg-white;

    article {
      @apply py-2;

      p {
        @apply p-4 px-4 text-justify text-base leading-normal;

        img {
          @apply float-start m-3 rounded border border-gray-300 p-1;
        }
      }

      blockquote {
        @apply mx-4 p-4 px-4 text-justify text-base leading-normal text-slate-500;
        @apply border-l-4 border-l-slate-500;
      }

      ul {
        @apply m-4 rounded border border-gray-100;
        @apply divide-y divide-gray-200;

        li {
          @apply p-4;

          p {
            @apply my-0;
          }
        }
      }

      span {
        @apply text-base leading-normal;
      }

      button[type="button"] {
        @apply my-2 ml-4 rounded bg-amber-200 px-2 py-1;

        &:hover {
          @apply transition hover:bg-amber-500;
        }
      }
    }

    form {
      @apply p-4;

      fieldset {
        @apply rounded border border-gray-300 p-4;
      }

      input,
      textarea,
      select,
      button {
        @apply my-2 rounded border border-gray-300 p-2 shadow-sm;
        @apply ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-slate-800;
        &:disabled {
          @apply border-gray-100 ring-gray-200 focus:ring-gray-500;

          &:checked {
            @apply bg-gray-200;
          }
        }
      }
      input:disabled + label {
        @apply text-gray-500;
      }
      select {
        @apply w-96 rounded-md border-0 py-1.5;
      }

      button {
        @apply transition hover:bg-slate-200;
      }
    }
  }

  footer {
    @apply mb-4 rounded-b-lg border border-slate-300 bg-slate-50 p-4;
  }

  aside {
    @apply absolute right-0 top-0 m-4 max-h-[90vh] w-96 overflow-auto p-2;
    @apply rounded-md border border-slate-300 bg-white shadow;

    &[id="output"] {
      @apply left-0;
      code {
        @apply max-h-[90vh] overflow-y-scroll leading-4;
      }
    }

    nav {
      @apply top-0 flex justify-between bg-white;

      a {
        @apply rounded px-2 py-1 no-underline;

        &:hover {
          @apply transition hover:bg-slate-200;
        }

        &[rel="prev"]:before {
          content: "←";
          @apply mr-0.5;
        }

        &[rel="index"]:before {
          content: "§";
          @apply mr-0.5;
        }

        &[href="#"]:after {
          content: "↻";
          @apply ml-0.5;
        }

        &[rel="next"]:after {
          content: "→";
          @apply ml-0.5;
        }
      }
    }

    div {
      @apply max-h-[80vh] overflow-y-scroll;
    }

    hr {
      @apply mx-1 my-2;
    }

    p {
      @apply p-2 text-base;
    }

    code {
      @apply mt-2 block whitespace-pre-wrap px-2 py-1 leading-normal;
    }

    input {
      @apply m-0.5 p-1 font-mono text-base;
    }

    label {
      @apply m-0.5 px-0.5 font-mono text-base font-bold;
    }

    button[type="button"] {
      @apply my-1 min-w-24 rounded bg-slate-100 px-2 py-1;

      &:hover {
        @apply transition hover:bg-slate-200;
      }
    }
  }
}

@layer components {
  code {
    @apply relative inline-block rounded bg-slate-50 px-1 py-0.5 font-mono;

    span {
      @apply text-green-600;
    }

    em {
      @apply text-gray-500;
    }

    i {
      @apply not-italic text-red-800;
    }

    &[contenteditable] {
      @apply border border-green-100 bg-green-50;
    }

    &[contenteditable]::after {
      content: "✎";

      @apply absolute right-0 top-0 m-1 inline-flex h-6 w-6 items-center justify-center;
      @apply rounded-full bg-amber-100 text-sm font-semibold text-black;
    }
  }

  .accordion {
    article {
      @apply p-0;
      h3 {
        @apply border-b border-slate-300 bg-slate-100;
        @apply cursor-pointer;
        background-image: url(../images/arrows.png);
        background-position: 98% 12px;
        background-repeat: no-repeat;

        &:hover {
          @apply bg-slate-200;
        }
      }
      p {
        @apply hidden border-b border-slate-300;
      }
    }
  }

  .events {
    @apply list-none p-0;
    li {
      @apply p-[2px];
    }

    li span {
      @apply mx-1 mr-2 inline-block min-w-6 rounded-full bg-amber-400 px-1 text-center text-white;
    }
  }
}

@layer utilities {
  .formatter {
    h1,
    h2,
    h3 {
      @apply px-4 pb-1 pt-2 text-lg text-slate-900;
    }

    h1 {
      &::before {
        content: "<h1>";
        @apply mx-2 text-base text-sky-700;
      }

      &::after {
        content: "</h1>";
        @apply mx-2 text-base text-sky-700;
      }
    }
    h2 {
      &::before {
        content: "<h2>";
        @apply mx-2 text-base text-sky-700;
      }

      &::after {
        content: "</h2>";
        @apply mx-2 text-base text-sky-700;
      }
    }
    h3 {
      &::before {
        content: "<h3>";
        @apply mx-1 ml-2 text-base text-sky-700;
      }

      &::after {
        content: "</h3>";
        @apply mx-1 text-base text-sky-700;
      }
    }
    p {
      @apply ml-2;
      &::before {
        content: "<p>";
        @apply mr-1 text-base text-sky-700;
      }

      &::after {
        content: "</p>";
        @apply ml-1 text-base text-sky-700;
      }
    }
    div {
      @apply ml-6;
      &::before {
        content: "<div>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply mr-1 block text-base text-sky-700;
      }

      &::after {
        content: "</div>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply ml-1 block text-base text-sky-700;
      }
    }
    li {
      @apply ml-8;
      &::before {
        content: "<li>";
        @apply mr-1 text-base text-sky-700;
      }

      &::after {
        content: "</li>";
        @apply ml-1 text-base text-sky-700;
      }
    }

    header,
    main,
    article,
    article ul,
    div,
    footer {
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cellipse style='fill: rgb(245, 158, 11);' cx='6' cy='1' rx='1' ry='1'/%3E%3C/svg%3E");
      background-position: left;
      background-repeat: repeat-y;
    }

    header {
      &::before {
        content: "<header>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }

      &::after {
        content: "</header>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }
    }

    main {
      &::before {
        content: "<main>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }

      &::after {
        content: "</main>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }
    }
    article {
      @apply ml-6 mt-4 py-0;
      &::before {
        content: "<article>";
        @apply ml-1 block pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }

      &::after {
        content: "</article>";
        @apply ml-1 block pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }
      span {
        &::before {
          content: "<span>";
          @apply mr-1 inline-block text-base text-sky-700;
        }

        &::after {
          content: "</span>";
          @apply ml-1 inline-block text-base text-sky-700;
        }
      }
      i {
        @apply not-italic;
        &::before {
          content: "<i>";
          @apply mr-1 inline-block text-base text-sky-700;
        }

        &::after {
          content: "</i>";
          @apply ml-1 inline-block text-base text-sky-700;
        }
      }
    }

    ul {
      @apply ml-7 mt-4 py-0;
      &::before {
        content: "<ul>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }

      &::after {
        content: "</ul>";
        @apply ml-1 pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }
    }

    footer {
      &::before {
        content: "<footer>";
        @apply ml-1 block pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }

      &::after {
        content: "</footer>";
        @apply ml-1 block pl-2;
        @apply border-l-4 border-l-amber-500;
        @apply text-base text-sky-700;
      }
    }
  }
}

Remova as classes Tailwind do arquivo `app/views/layouts/application.html.erb`

Exibir mais …
No arquivo application.html.erb, remova ou comente a tag <main>, que está antes e depois da tag <%= yield %> para que não altere o comportamento da estilização customizada que criamos para o Tailwind.

    <%# <main class="container mx-auto mt-28 px-5 flex"> %>
      <%= yield %>
    <%# </main> %>

Alguns passos adicionais para fazer o estilo dos arquivos Tailwind customizados funcionarem.

Exibir mais …

Se você seguiu os passos anteriores, o arquivo app/assets/stylesheets/application.tailwind.css deve ter somente a linha @import "./custom_tailwind/custom1.css"; descomentada.

Deve existir apenas um estilo descomentado. Para testar um outro estilo, primeiro comente o estilo atualmente em uso e descomente o outro estilo que deseja testar.

Após escolher um dos estilos customizados disponíveis, execute o comando abaixo:

$ bin/rails assets:precompile
$ bin/dev

Caso o comando anterior não funcione para estilizar os elementos HTML, tente primeiro limpar os arquivos anteriores e depois precompilar novamente:

$ bin/rails assets:clobber 
$ bin/rails assets:precompile
$ bin/dev

Agora sim, um HTML estilizando usando Tailwind como um framework classless 🤩

Após configurar o Tailwind com as customizações acima e iniciar o servior do Rails você verá seu HTML estilizado.

Modo dark

Repositório

Acesse aqui o repositório com o código do tutorial

Passos seguintes

Referências

Ruby on Rails 8 - Frontend Rápido com Frameworks CSS Classless ou Class-Light sem CDN

Dailson Igo Araujo Palheta — Wed, 22 Jan 2025 16:33:10 +0000

Este artigo é intencionalmente muito semelhante ao anterior que trata do mesmo assunto, mas usou CDN para os frameworks CSS, entretanto, neste artigo passaremos a usar os arquivos CSS localmente, copiados para a pasta do projeto.

Inicie um novo aplicativo Rails

O time antes do comando rails serve para exibir no final da execução do comando o seu tempo de execução. No exemplo abaixo, levou 47 segundos.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Abra o projeto com o VSCode ou seu editor preferido

$ cd classless-css-local && code .

Criando algumas páginas para visualizar a estilização dos elementos HTML

As páginas estão nos Passos Comuns no primeiro artigo da série.

Copie seus arquivos CSS para seu projeto colando em `app/assets/stylesheets/`

Exibir mais …
Consultando a documentação do Rails sobre os arquivos CSS, podemos constatar que precisamos seguir poucos passos para estilizar nossa aplicação web copiando os arquivos CSS:

Copie o arquivo para a pasta app/assets/stylesheets/, ou para uma subpasta dentro dela, por exemplo, app/assets/stylesheets/classless
Fazer referência a este arquivo configurando o layout padrão do Rails no arquivo application.html.css com a tag correta, por exemplo:
- Se seu arquivo css ficou em app/assets/stylesheets/meuestilo.css, você deve adicionar ao seu application.html.css a tag <%= stylesheet_link_tag "meuestilo" %> sem a extenção .css;
- Se seu arquivo css ficou em app/assets/stylesheets/classless/meuestilo.css, você deve adicionar ao seu application.html.css a tag <%= stylesheet_link_tag "classless/meuestilo" %> sem a extenção .css;

Vamos criar uma subpasta classless dentro de app/assets/stylesheets para copiar os arquivos css baixados nos links abaixo:

Normalize CSS: https://necolas.github.io/normalize.css/latest/normalize.css
Pico CSS: https://github.com/picocss/pico/blob/main/css/pico.css
MVP CSS: https://andybrewer.github.io/mvp/mvp.css
Chota CSS: https://github.com/jenil/chota/blob/main/dist/chota.css
Simple CSS: https://github.com/kevquirk/simple.css/blob/main/simple.css
Classless CSS: https://classless.de/classless.css
Concrete CSS: https://github.com/louismerlin/concrete.css/blob/main/concrete.css
Almond CSS: https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
Picnic CSS: https://github.com/franciscop/picnic/blob/master/picnic.css
YACCK CSS: https://github.com/sphars/yacck/blob/master/yacck.css
Sakura CSS: https://github.com/oxalorg/sakura/blob/master/css/sakura.css
Bamboo CSS: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
O Bamboo CSS só possui o arquivo minificado. Você pode formatá-los para que seja mais fácil de entendê-lo usando serviços como o CSS Beautifier & Minifie. Cole o código a esquerda e pegue o arquivo formatado a direita. Renomeie o arquivo para bamboo.css.
Convertendo o Vanilla SCSS em Vanilla CSS:

# Acessa a pasta que criamos para os arquivos CSS
$ cd app/assets/stylesheets/classless/

# Clonar o repositório
$ git clone https://github.com/canonical/vanilla-framework.git
$ cd vanilla-framework

# Instalar dependências
$ yarn install

# Compilar SCSS para CSS
$ yarn build

Copie o arquivo dentro da pasta app/assets/stylesheets/classless/vanilla-framework/build/css/build.css e para deixar o código mais legível use o serviço do site CSS Beautifier & Minifie. Cole o código a esquerda e pegue o arquivo formatado a direita. Renomeie o arquivo para vanilla.css e recorte para a pasta app/assets/stylesheets/classless
Exclua a pasta app/assets/stylesheets/classless/vanilla-framework/

Abra novamente a página `app/views/layouts/application.html.erb` para referenciar os estilos CSS sem classe copiados para o projeto

Exibir mais …

Comente a linha <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> inserindo um # após o <% para que o Rails não carregue todos os estilos de uma só vez. Para descomentar, remova o #. Caso use os atalhos do VSCode Ctrl + K + C para comentar, a linha não ficará corretamente comentada. ALTERE DE:

    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>

PARA

    <%#= stylesheet_link_tag :app, "data-turbo-track": "reload" %>

Após o conteúdo abaixo, já com a linha comentada

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%#= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

E antes de </head>, cole o conteúdo a seguir. Você não precisa de todos esses estilos, eles foram inseridos para que você possa testar várias opções.

    <%# ---[ Normalize CSS: https://github.com/necolas/normalize.css/ ]--- %>
    <%# Normaliza alguns estilos, preserva padrões importantes, corrige bugs de alguns navegadores, etc ...  %>
    <%# Por exemplo, o o <h1> pode ter margens ou fontes diferentes entre navegadores %>
    <%# Mantenha este descomentado junto com um dos frameworks CSS abaixo %>
    <%= stylesheet_link_tag "classless/normalize" %>

    <%# ---[ Pico CSS: https://picocss.com/ ]--- %>
    <%= stylesheet_link_tag "classless/pico" %>

    <%# ---[ MVP CSS: https://andybrewer.github.io/mvp ]--- %>
    <%# Para usar a configuração do SO para o modo escuro/claro, configure na tag HTML assim: <html color-mode="user"> %>
    <%#= stylesheet_link_tag "classless/mvp" %>

    <%# ---[ Chota CSS: https://jenil.github.io/chota/ ]--- %>
    <%#= stylesheet_link_tag "classless/chota" %>

    <%# ---[ Simple CSS: https://simplecss.org/ ]--- %>
    <%#= stylesheet_link_tag "classless/simple" %>

    <%# ---[ Classless CSS: https://classless.de/ ]--- %>
    <%#= stylesheet_link_tag "classless/classless" %>

    <%# ---[ Concrete CSS: https://concrete.style/ ]--- %>
    <%#= stylesheet_link_tag "classless/concrete" %>

    <%# ---[ Almond CSS: https://alvaromontoro.github.io/almond.css/demo/ ]--- %>
    <%#= stylesheet_link_tag "classless/almond" %>

    <%# ---[ Vanilla CSS: https://vanillaframework.io/ ]--- %>
    <%#= stylesheet_link_tag "classless/vanilla" %>

    <%# ---[ Picnic CSS: https://picnicss.com/ ]--- %>
    <%#= stylesheet_link_tag "classless/picnic" %>

    <%# ---[ YACCK - Yet Another Classless CSS Kit: https://sphars.github.io/yacck/ ]--- %>
    <%#= stylesheet_link_tag "classless/yacck" %>

    <%# ---[ Sakura CSS: https://oxal.org/projects/sakura/ ]--- %>
    <%#= stylesheet_link_tag "classless/sakura" %>

    <%# ---[ Bamboo CSS: https://rilwis.github.io/bamboo/demo/ ]--- %>
    <%#= stylesheet_link_tag "classless/bamboo" %>

A maioria dos estilos está comentada, exceto o Normalize CSS e o Pico CSS
Salve o arquivo e atualize a página ou reinicie o servidor
Para testar um estilo diferente do Pico CSS, comente a linha que configura estilo local, no caso a linha <%= stylesheet_link_tag "classless/pico" %> e descomente a linha de outro estilo, por exemplo, a linha do Simple CSS.
Não esqueça que para comentar tags ERB você precisa inserir um # após o <%. Para descomentar, remova o #. Caso use os atalhos do VSCode Ctrl + K + C para comentar, a linha não ficará corretamente comentada.

Agora sim, um HTML estilizando usando um framework css classless sem CDN 🤩

Após salvar as folhas de estilo acima e iniciar o servior do Rails você verá seu HTML estilizado com o frameworks css escolhido.

Modo dark

Repositório

Acesse aqui o repositório com o código do tutorial

Passos seguintes

[x] Organizar os estilos de acordo com sua preferência;
[x] Usar estilização a partir de arquivos CSS do projeto, sem usar CDN;
[-] Atualizar dinamicamente no navegador as alterações feitas no projeto usando Rails Live Reload;
[-] Se quiser gastar um pouco mais de tempo com o frontend, verifique as opções de customização do seu estilo favorito;
[-] Replicar a capacidade de um framework classless CSS usando Tailwind;

Referências

Ruby on Rails 8 - Frontend Rápido com Frameworks CSS Classless ou Class-Light com CDN

Dailson Igo Araujo Palheta — Wed, 22 Jan 2025 16:32:16 +0000

Inicie um novo aplicativo Rails

O time antes do comando rails serve para exibir no final da execução do comando o seu tempo de execução. No exemplo abaixo, levou 47 segundos.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Abra o projeto com o VSCode ou seu editor preferido

$ cd classless-css-cdn && code .

Criando algumas páginas para visualizar a estilização dos elementos HTML

As páginas estão nos Passos Comuns no primeiro artigo da série.

Abra novamente a página `app/views/layouts/application.html.erb` para referenciar os estilos CSS sem classe via CDN

Exibir mais …

Após o conteúdo abaixo

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

E antes de </head>, cole o conteúdo a seguir. Você não precisa de todos esses estilos, eles foram inseridos para que você possa testar várias opções.

    <%# ---[ Normalize CSS: https://github.com/necolas/normalize.css/ ]--- %>
    <%# Normaliza alguns estilos, preserva padrões importantes, corrige bugs de alguns navegadores, etc ...  %>
    <%# Por exemplo, o o <h1> pode ter margens ou fontes diferentes entre navegadores %>
    <%# Mantenha este descomentado junto com um dos frameworks CSS abaixo %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css">

    <%# ---[ Pico CSS: https://picocss.com/ ]--- %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />

    <%# ---[ MVP CSS: https://andybrewer.github.io/mvp ]--- %>
    <%# Para usar a configuração do SO para o modo escuro/claro, configure na tag HTML assim: <html color-mode="user"> %>
    <%# <link rel="stylesheet" href="https://unpkg.com/mvp.css">  %>

    <%# ---[ Chota CSS: https://jenil.github.io/chota/ ]--- %>
    <%# <link rel="stylesheet" href="https://unpkg.com/chota"> %>

    <%# ---[ Simple CSS: https://simplecss.org/ ]--- %>
    <%# <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> %>

    <%# ---[ Classless CSS: https://classless.de/ ]--- %>
    <%# <link rel="stylesheet" href="https://classless.de/classless.css"> %>

    <%# ---[ Concrete CSS: https://concrete.style/ ]--- %>
    <%# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/concrete.css/3.0.0/concrete.min.css"> %>

    <%# ---[ Almond CSS: https://alvaromontoro.github.io/almond.css/demo/ ]--- %>
    <%# <link rel="stylesheet" href="https://unpkg.com/almond.css@latest/dist/almond.min.css" /> %>

    <%# ---[ Vanilla CSS: https://vanillaframework.io/ ]--- %>
    <%# <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.18.3.min.css" /> %>

    <%# ---[ Picnic CSS: https://picnicss.com/ ]--- %>
    <%# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic"> %>

    <%# ---[ YACCK - Yet Another Classless CSS Kit: https://sphars.github.io/yacck/ ]--- %>
    <%# <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sphars/yacck/yacck.min.css"> %>

    <%# ---[ Sakura CSS: https://oxal.org/projects/sakura/ ]--- %>
    <%# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css">
    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" />
    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" /> %>

    <%# ---[ Bamboo CSS: https://rilwis.github.io/bamboo/demo/ ]--- %>
    <%# <link rel="stylesheet" href="https://unpkg.com/bamboo.css"> %>

A maioria dos estilos está comentada, exceto o Normalize CSS e o Pico CSS
Salve o arquivo e atualize a página ou reinicie o servidor
Para testar um estilo diferente do Pico CSS, comente a linha que configura o CDN do estilo, no caso a linha <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" /> e descomente a linha de outro estilo, por exemplo, a linha do Simple CSS.
Para comentar e descomentar uma liha com o VSCode, use a combinhação de tecla Ctrl + K + C.

Agora sim, um HTML estilizando usando um framework css classless com CDN 🤩

Após salvar as folhas de estilo acima e iniciar o servior do Rails você verá seu HTML estilizado com o frameworks css escolhido.

Modo dark

Repositório

Acesse aqui o repositório com o código do tutorial

Passos seguintes

[-] Organizar os estilos de acordo com sua preferência;
[-] Usar estilização a partir de arquivos CSS do projeto, sem usar CDN;
[-] Atualizar dinamicamente no navegador as alterações feitas no projeto usando Rails Live Reload;
[-] Se quiser gastar um pouco mais de tempo com o frontend, verifique as opções de customização do seu estilo favorito;
[-] Replicar a capacidade de um framework classless CSS usando Tailwind;

Referências

Ruby on Rails 8 - Frontend Rápido com Frameworks CSS Classless ou Class-Light

Dailson Igo Araujo Palheta — Wed, 22 Jan 2025 16:31:25 +0000

Se você estiver começando no desenvolvimento web e seu foco não é se especializar no frontend, umas das barreiras que pode ser mais dolorosa é conseguir estilizar de forma fácil seu HTML feioso.

Para quem tem o primeiro contato parece enigmático e confuso tentar entender um HTML que possui uma sequência de letras e números com classes utilitárias predefinidas para aplicar estilos ao HTML, por exemplo:

<div class="container display-flex my-md mx-sm">
  <form class="form shadow-md my-md mx-sm align-center">
    <div class="input-wrapper border-radius-sm">
      <input type="text" class="input text-color-gray placeholder-color-light-gray focus-outline-blue">
    </div>
    <div class="button-wrapper border-radius-sm">
      <button type="submit" class="button bg-color-blue text-color-white focus-light-blue hover-light-blue">
        Action
      </button>
    </div>
  </form>
</div>

Copiado do site https://picocss.com

Os frameworks CSS que utilizam classes utilitárias são excelentes, versáteis, responsivos, elegantes e possuem muitas outras qualidades, mas o Tailwind CSS não é a única solução. Se você precisa de algo rápido e mais simples, usar um framework CSS classless ou class-light será uma solução melhor.

Frameworks CSS classless estilizam elementos HTML diretamente, sem classes. Frameworks class-light combinam estilos automáticos com algumas classes utilitárias opcionais para personalização, o que adicionar maior versatilidade com seu uso.

Usando uma abordagem classless ou class-light você pode resolver a estilização do HTML de forma rápida com uma, duas ou três linhas.

Veremos nesta série de artigos:

A utilização do framework Ruby on Rails na versão 8, com Propshaft e Importmap;
Conheceremos brevemente o arquivo com o layout padrão das páginas HTML;
Criaremos 4 páginas HTML com vários elementos para testar a estilização com CSS;
Faremos um breve resumo sobre as rotas criadas para as páginas;
Vamos alterar o layout padrão para incluir o link para as páginas HTML criadas;
Saberemos como identificar se o frameworks CSS possui o modo light e dark configurados automaticamente por padrão;
Na parte 2, criaremos um projeto com 12 frameworks CSS via CDN ao layout padrão;
Na parte 3, criaremos um projeto com 12 frameworks CSS copiando os arquivos para o projeto;
Na parte 4, criaremos um projeto com framework CSS Tailwind;
Na parte 5, criaremos um projeto com framework CSS CSS Zero;
Veremos também sugestões e novos desafios;

Conhecendo o layout padrão do Rails `app/views/layouts/application.html.erb`.

Exibir mais …

Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout padrão para renderizar todas as páginas;
O Arquivo original no Rails 8 deve ter um conteúdo igual ou parecido com o copiado abaixo:

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

A parte superior dentro da tag <head> … </head> possuem os elementos estruturais importantes para que a página seja renderizada e funcione corretamente. A tag headé usada para incluir metadados e recursos importantes que ajudam a configurar o comportamento da página (com javascript), sua aparência (com CSS), sua relação com outros sistemas e serviços e configurações de segurança como a proteção para CSRF e CSP ;
O conteúdo principal das páginas será renderizado dentro de <body> </body>, através da tag ERB <%= yield %>. Esta tag serve como ponto de integração para incluir o conteúdo de uma view renderizada dinamicamente pelo Rails;

Passos Comuns

Algumas etapas são comuns a todas os artigos da séria e ficaram aqui para simplificar. Não se preocupe, deixaremos claro nos próximos artigos quando os passos a seguir deverão ser seguidos.

Gere as páginas de teste, com um `controller pages` e as `actions html_test_1, html_test_2, html_test_3 e html_test_4`

Exibir mais …

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

Como durante a criação do controller e das actions acima as rotas também foram adicionadas, podendo acessar qualquer action criada a partir dos links
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

Abra o arquivo config/routes.rb pelo VSCode

Inclua a linha abaixo no final do arquivo para direcionar a raiz da página para o controller pages e action html_test_1 criados anteriormente. Assim, a primeira página a ser exibida ao acessar seu site ou sistema será a página html_test_1, do controller pages. Caso contrário, iria exibir a página padrão do rails.

root "pages#html_test_1"

Você poderia ter ignorada a adição das rotas para as actions criadas de tivesse passado o parâmetro --skip-routes ao criar o controller. O comando completo passaria a ser rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Exibindo as rotas do Rails

Exibir mais …

Usando o terminal, você pode exibir as rotas especificando um controller (com -c), por exemplo, do controller pages

$ rails routes -c pages
           Prefix Verb URI Pattern                  Controller#Action
pages_html_test_1 GET  /pages/html_test_1(.:format) pages#html_test_1
pages_html_test_2 GET  /pages/html_test_2(.:format) pages#html_test_2
pages_html_test_3 GET  /pages/html_test_3(.:format) pages#html_test_3
pages_html_test_4 GET  /pages/html_test_4(.:format) pages#html_test_4

Ou pode exibir todas as rotas com

$ rails routes
             Prefix Verb URI Pattern                   Controller#Action
                         /assets                       Propshaft::Server
  pages_html_test_1 GET  /pages/html_test_1(.:format)  pages#html_test_1
  pages_html_test_2 GET  /pages/html_test_2(.:format)  pages#html_test_2
  pages_html_test_3 GET  /pages/html_test_3(.:format)  pages#html_test_3
  pages_html_test_4 GET  /pages/html_test_4(.:format)  pages#html_test_4
 rails_health_check GET  /up(.:format)                 rails/health#show
              (...)

Também é possível acessar as rotas pelo navegador usando o endereço http://127.0.0.1:3000/rails/info/routes. Não esqueça de iniciar o servidor de desenvolvimento com bin/dev ou o servidor rails padrão com rails server do diretório raíz do seu projeto. O servidor de desenvolvimento fica “escutando” alterações nos arquivos de javascript e nos arquivos de css para realizar o processamento necessário para disponibilizá-los aos usuários.
Para que as alterações nestes arquivos sejam realizadas e visualizadas instantaneamente no navegador, é necessário instalar uma gema como a Rails Livre Reload.

Vamos criar quatro páginas com conteúdo HTML para testar os estilos CSS.

O Ruby on Rails utiliza a arquitetura MVC (Model-View-Controller) por padrão para iniciar a organização de seu projeto. Boa parte do seu código está organizado nas seguintes pastas:

Quando o código estiver relacionado à lógica de domínio/negócio e dados, mantenha na pasta app/models;
O código relacionado à exibição (HTML, JSON, XML, etc...) ficará em app/views;
Código elacionado ao ciclo de vida da requisição, ficará em app/controllers;

Insira o conteúdo da página `html_test_1`

Exibir mais …

Acesse o link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html e copie todo o conteúdo da tag main, conforme abaixo

  <main>
    <section id="content" class="container">
      <article>
        <h1>Lorem ipsum dolor sit amet</h1>
        <h2>Element demos</h2>
        <p>
          This is supposed to be a demo page so we need more elements!
        </p>

        <h3>Form elements</h3>
        <form>
          <div>
            <label for="email">Email</label>
            <input type="email" name="email" id="email" placeholder="john.doe@gmail.com">
          </div>

          <div>
            <label for="id">User id (read only)</label>
            <input readonly name="id" id="id" value="04D6H89Z">
          </div>

          <div>
            <label for="disabled">Random disabled input</label>
            <input disabled name="disabled" id="disabled" placeholder="Because why not?">
          </div>

          <div>
            <label for="about">About me</label>
            <textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
          </div>

          <div>
            <input type="checkbox" name="remember" id="remember">
            <label for="remember">Remember me</label>
          </div>

          <div>
            <label>
              <input type="checkbox" name="in-label" id="in-label" checked>
              Is this checkbox inside a <code>&lt;label&gt;</code> element?
            </label>
          </div>

          <div>
            <fieldset>
              <legend>Choose a cardinal direction:</legend>

              <div>
                <input type="radio" id="north" name="direction" value="north" checked>
                <label for="north">North</label>
              </div>

              <div>
                <input type="radio" id="east" name="direction" value="east">
                <label for="east">East</label>
              </div>

              <div>
                <input type="radio" id="south" name="direction" value="south">
                <label for="south">South</label>
              </div>

              <div>
                <input type="radio" id="west" name="direction" value="west">
                <label for="west">West</label>
              </div>

            </fieldset>
          </div>

          <input type="submit">
        </form>

        <h3>Code</h3>
        <p>
          Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
          Did you know, <code>alert(1)</code> can show an alert in JavaScript!
        </p>
        <pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>

        <h3>Other</h3>
        <p>Here's a horizontal rule and image because I don't know where else to put them.</p>
        <img src="http://via.placeholder.com/408x287" alt="Example image">
        <hr>

        <p>And here's a nicely marked up table!</p>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Quantity</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Godzilla</td>
              <td>2</td>
              <td>$299.99</td>
            </tr>
            <tr>
              <td>Mozilla</td>
              <td>10</td>
              <td>$100,000.00</td>
            </tr>
            <tr>
              <td>Quesadilla</td>
              <td>1</td>
              <td>$2.22</td>
            </tr>
          </tbody>
        </table>

        <h3>Typography</h3>
        <blockquote>
          This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
        </blockquote>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
        </p>
        <ul>
          <li>Unordered list item 1</li>
          <li>Unordered list item 2</li>
          <li>Unordered list item 3</li>
        </ul>
        <ol>
          <li>Ordered list item 1</li>
          <li>Ordered list item 2</li>
          <li>Ordered list item 3</li>
        </ol>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </article>
    </section>
  </main>

Abra o arquivo app/views/pages/html_test_1.html.erb e cole o conteúdo copiado acima

Insira o conteúdo da página `html_test_2`

Exibir mais …

Acesse o link https://gist.github.com/tommaitland/5865229 e copie todo o conteúdo da tag <form action="/">, conforme abaixo

<form action="/">

    <legend>A Sample Form Legend</legend>

    <label for="name">Name: </label>
    <input type="text" value="Name" name="Name" />

    <label for="email">Email: </label>
    <input type="email" value="Email" name="Email" />

    <label>Button: </label>
    <input type="button" value="Button" name="button" />

    <label>Single Checkbox: 
    <input type="checkbox" value="checkbox1" name="button" /></label>

    <fieldset>
        <legend>Group of Checkboxes: </legend>
        <label>Checkbox 1: 
            <input type="checkbox" value="checkbox1" name="checkgroup[]" /></label>
        <label>Checkbox 2: 
            <input type="checkbox" value="checkbox2" name="checkgroup[]" /></label>
        <label>Checkbox 3: 
            <input type="checkbox" value="checkbox3" name="checkgroup[]" /></label>
        <label>Checkbox 4: 
            <input type="checkbox" value="checkbox4" name="checkgroup[]" /></label>
    </fieldset>

    <label>Color: </label>
    <input type="color" value="color" name="color" />

    <label>Date: </label>
    <input type="date" value="date" name="date" />

    <label>Date, Time (Local): </label>
    <input type="datetime-local" value="datetime" name="datetime" />

    <label>File: </label>
    <input type="file" value="file" name="file" />

    <input type="hidden" value="hidden" name="hidden" />

    <label>Image: </label>
    <input type="image" value="image" name="image" />

    <label>Month: </label>
    <input type="month" value="month" name="month" />

    <label>Number: </label>
    <input type="number" value="number" name="number" />

    <label>Password: </label>
    <input type="password" value="password" name="password" />

    <label>Single Radio: 
    <input type="radio" value="radio" name="radio" /></label>

    <fieldset>
        <legend>Group of Radios: </legend>
        <label>Radio 1: 
            <input type="radio" value="radio1" name="radiogroup" /></label>
        <label>Radio 2: 
            <input type="radio" value="radio2" name="radiogroup" /></label>
        <label>Radio 3: 
            <input type="radio" value="radio3" name="radiogroup" /></label>
        <label>Radio 4: 
            <input type="radio" value="radio4" name="radiogroup" /></label>
    </fieldset>

    <label>Range: </label>
    <input type="range" value="range" name="range" />

    <label>Reset: </label>
    <input type="reset" value="reset" name="reset" />

    <label>Time: </label>
    <input type="time" value="time" name="time" />

    <label>Search: </label>
    <input type="search" value="search" name="search" />

    <label>Tel: </label>
    <input type="tel" value="tel" name="tel" />

    <label>Text: </label>
    <input type="text" value="text" name="text" />

    <label>URL: </label>
    <input type="url" value="url" name="url" />

    <label>Week: </label>
    <input type="week" value="week" name="week" />

    <button>This is a button!</button>

    <label>Select 1: </label>
    <select name="select" size="1">
        <option>Test</option>
        <option>Test</option>
    </select>

    <label>Select 2: </label>
    <select name="select1" size="3">
        <option>Test</option>
        <option>Test</option>
    </select>

    <label>Select Multiple: </label>
    <select name="select2" size="3" multiple>
        <option>Test</option>
        <option>Test</option>
    </select>

    <label>Select Groups: </label>
    <select name="select3" size="1" multiple>
        <optgroup label="First Group">
            <option>Test</option>
            <option>Test</option>
        </optgroup>
        <optgroup label="Second Group">
            <option>Test</option>
            <option>Test</option>
        </optgroup>
        <optgroup label="Third Group">
            <option>Test</option>
            <option>Test</option>
        </optgroup>
    </select>

    <fieldset>
        <legend>Datalist: </legend>
        <input type="text" name="datalist" list="samplelist">
        <datalist id="samplelist">
            <option>Something</option>
            <option>Something else</option>
            <option>Another thing</option>
        </datalist>
    </fieldset>

    <label>A textarea!</label>
    <textarea name="textarea">A paragraph in here</textarea>

    <label>Progress (very unsupported): </label>
    <progress value="20" max="100"></progress>

    <label>Meter (very unsupported): </label>
    <meter min="0" value="20" max="100" low="10" high="90" optimum="80">20 in the meter</meter>

    <input type="submit" value="GO" />

</form>

Abra o arquivo app/views/pages/html_test_2.html.erb e cole o conteúdo copiado acima

Insira o conteúdo da página `html_test_3`

Exibir mais …

Acesse o link https://github.com/cbracco/html5-test-page/blob/master/index.html e copie todo o conteúdo da <div> após <body>, que possui o texto <div id="top" role="document"> . Troque o texto “index.html”por <%= root_path %> sem aspas. Ele aparece em três lugares e já foi substituído no HTML abaixo:

      <nav>
        <ul>
          <li>
            <a href="#text">Text</a>
            <ul>
              <li><a href="#text__headings">Headings</a></li>
              <li><a href="#text__paragraphs">Paragraphs</a></li>
              <li><a href="#text__lists">Lists</a></li>
              <li><a href="#text__blockquotes">Blockquotes</a></li>
              <li><a href="#text__details">Details / Summary</a></li>
              <li><a href="#text__address">Address</a></li>
              <li><a href="#text__hr">Horizontal rules</a></li>
              <li><a href="#text__tables">Tabular data</a></li>
              <li><a href="#text__code">Code</a></li>
              <li><a href="#text__inline">Inline elements</a></li>
              <li><a href="#text__comments">HTML Comments</a></li>
            </ul>
          </li>
          <li>
            <a href="#embedded">Embedded content</a>
            <ul>
              <li><a href="#embedded__images">Images</a></li>
              <li><a href="#embedded__bgimages">Background images</a></li>
              <li><a href="#embedded__audio">Audio</a></li>
              <li><a href="#embedded__video">Video</a></li>
              <li><a href="#embedded__canvas">Canvas</a></li>
              <li><a href="#embedded__meter">Meter</a></li>
              <li><a href="#embedded__progress">Progress</a></li>
              <li><a href="#embedded__svg">Inline SVG</a></li>
              <li><a href="#embedded__iframe">IFrames</a></li>
              <li><a href="#embedded__embed">Embed</a></li>
              <li><a href="#embedded__object">Object</a></li>
            </ul>
          </li>
          <li>
            <a href="#forms">Form elements</a>
            <ul>
              <li><a href="#forms__input">Input fields</a></li>
              <li><a href="#forms__select">Select menus</a></li>
              <li><a href="#forms__checkbox">Checkboxes</a></li>
              <li><a href="#forms__radio">Radio buttons</a></li>
              <li><a href="#forms__textareas">Textareas</a></li>
              <li><a href="#forms__html5">HTML5 inputs</a></li>
              <li><a href="#forms__action">Action buttons</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      <main>
        <section id="text">
          <header><h1>Text</h1></header>
          <article id="text__headings">
            <header>
              <h2>Headings</h2>
            </header>
            <div>
              <h1>Heading 1</h1>
              <h2>Heading 2</h2>
              <h3>Heading 3</h3>
              <h4>Heading 4</h4>
              <h5>Heading 5</h5>
              <h6>Heading 6</h6>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__paragraphs">
            <header><h2>Paragraphs</h2></header>
            <div>
              <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__blockquotes">
            <header><h2>Blockquotes</h2></header>
            <div>
              <blockquote>
                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
                <cite><a href="#!">Said no one, ever.</a></cite>
              </blockquote>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__lists">
            <header><h2>Lists</h2></header>
            <div>
              <h3>Definition list</h3>
              <dl>
                <dt>Definition List Title</dt>
                <dd>This is a definition list division.</dd>
              </dl>
              <h3>Ordered List</h3>
              <ol type="1">
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ol type="A">
                    <li>List Item 1</li>
                    <li>
                      List Item 2
                      <ol type="a">
                        <li>List Item 1</li>
                        <li>
                          List Item 2
                          <ol type="I">
                            <li>List Item 1</li>
                            <li>
                              List Item 2
                              <ol type="i">
                                <li>List Item 1</li>
                                <li>List Item 2</li>
                                <li>List Item 3</li>
                              </ol>
                            </li>
                            <li>List Item 3</li>
                          </ol>
                        </li>
                        <li>List Item 3</li>
                      </ol>
                    </li>
                    <li>List Item 3</li>
                  </ol>
                </li>
                <li>List Item 3</li>
              </ol>
              <h3>Unordered List</h3>
              <ul>
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ul>
                    <li>List Item 1</li>
                    <li>
                      List Item 2
                      <ul>
                        <li>List Item 1</li>
                        <li>
                          List Item 2
                          <ul>
                            <li>List Item 1</li>
                            <li>
                              List Item 2
                              <ul>
                                <li>List Item 1</li>
                                <li>List Item 2</li>
                                <li>List Item 3</li>
                              </ul>
                            </li>
                            <li>List Item 3</li>
                          </ul>
                        </li>
                        <li>List Item 3</li>
                      </ul>
                    </li>
                    <li>List Item 3</li>
                  </ul>
                </li>
                <li>List Item 3</li>
              </ul>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__blockquotes">
            <header><h1>Blockquotes</h1></header>
            <div>
              <blockquote>
                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
                <cite><a href="#!">Said no one, ever.</a></cite>
              </blockquote>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__details">
            <header><h1>Details / Summary</h1></header>
            <details>
              <summary>Expand for details</summary>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
            </details>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__address">
            <header><h1>Address</h1></header>
            <address>
              Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
              Visit us at:<br>
              Example.com<br>
              Box 564, Disneyland<br>
              USA
            </address>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__hr">
            <header><h2>Horizontal rules</h2></header>
            <div>
              <hr>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__tables">
            <header><h2>Tabular data</h2></header>
            <table>
              <caption>Table Caption</caption>
              <thead>
                <tr>
                  <th>Table Heading 1</th>
                  <th>Table Heading 2</th>
                  <th>Table Heading 3</th>
                  <th>Table Heading 4</th>
                  <th>Table Heading 5</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>Table Footer 1</th>
                  <th>Table Footer 2</th>
                  <th>Table Footer 3</th>
                  <th>Table Footer 4</th>
                  <th>Table Footer 5</th>
                </tr>
              </tfoot>
              <tbody>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
              </tbody>
            </table>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__code">
            <header><h2>Code</h2></header>
            <div>
              <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
              <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
              <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
              <h2>Pre-formatted text</h2>
              <pre>P R E F O R M A T T E D T E X T
  ! " # $ % &amp; ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~ </pre>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__inline">
            <header><h2>Inline elements</h2></header>
            <div>
              <p><a href="#!">This is a text link</a>.</p>
              <p><strong>Strong is used to indicate strong importance.</strong></p>
              <p><em>This text has added emphasis.</em></p>
              <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
              <p>The <i>i element</i> is text that is offset from the normal text.</p>
              <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
              <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
              <p><s>This text has a strikethrough</s>.</p>
              <p>Superscript<sup>®</sup>.</p>
              <p>Subscript for things like H<sub>2</sub>O.</p>
              <p><small>This small text is small for fine print, etc.</small></p>
              <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
              <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
              <p><cite>This is a citation.</cite></p>
              <p>The <dfn>dfn element</dfn> indicates a definition.</p>
              <p>The <mark>mark element</mark> indicates a highlight.</p>
              <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
              <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__comments">
            <header><h2>HTML Comments</h2></header>
            <div>
              <p>There is comment here: <!--This comment should not be displayed--></p>
              <p>There is a comment spanning multiple tags and lines below here.</p>
              <!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
              <p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
              <p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="embedded">
          <header><h2>Embedded content</h2></header>
          <article id="embedded__images">
            <header><h2>Images</h2></header>
            <div>
              <h3>Plain <code>&lt;img&gt;</code> element</h3>
              <p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
              <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> element</h3>
              <figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
              <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> and <code>&lt;figcaption&gt;</code> elements</h3>
              <figure>
                <img src="https://placekitten.com/420/420" alt="Photo of a kitten">
                <figcaption>Here is a caption for this image.</figcaption>
              </figure>
              <h3><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> element</h3>
              <figure>
                <picture>
                  <source srcset="https://placekitten.com/800/800"
                    media="(min-width: 800px)">
                  <img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
                </picture>
              </figure>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__bgimages">
            <header><h2>Background images</h2></header>
            <div style="background-image:url('https://placekitten.com/300/300'); width:300px; height: 300px;"></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__audio">
            <header><h2>Audio</h2></header>
            <div><audio controls="">audio</audio></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__video">
            <header><h2>Video</h2></header>
            <div><video controls="">video</video></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__canvas">
            <header><h2>Canvas</h2></header>
            <div><canvas>canvas</canvas></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__meter">
            <header><h2>Meter</h2></header>
            <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__progress">
            <header><h2>Progress</h2></header>
            <div><progress>progress</progress></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__svg">
            <header><h2>Inline SVG</h2></header>
            <div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__iframe">
            <header><h2>IFrame</h2></header>
            <div><iframe src=<%= root_path %> height="300"></iframe></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__embed">
            <header><h2>Embed</h2></header>
            <div><embed src=<%= root_path %> height="300"></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__object">
            <header><h2>Object</h2></header>
            <div><object data=<%= root_path %> height="300"></object></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="forms">
          <header><h2>Form elements</h2></header>
          <form>
            <fieldset id="forms__input">
              <legend>Input fields</legend>
              <p>
                <label for="input__text">Text Input</label>
                <input id="input__text" type="text" placeholder="Text Input">
              </p>
              <p>
                <label for="input__password">Password</label>
                <input id="input__password" type="password" placeholder="Type your Password">
              </p>
              <p>
                <label for="input__webaddress">Web Address</label>
                <input id="input__webaddress" type="url" placeholder="https://yoursite.com">
              </p>
              <p>
                <label for="input__emailaddress">Email Address</label>
                <input id="input__emailaddress" type="email" placeholder="name@email.com">
              </p>
              <p>
                <label for="input__phone">Phone Number</label>
                <input id="input__phone" type="tel" placeholder="(999) 999-9999">
              </p>
              <p>
                <label for="input__search">Search</label>
                <input id="input__search" type="search" placeholder="Enter Search Term">
              </p>
              <p>
                <label for="input__text2">Number Input</label>
                <input id="input__text2" type="number" placeholder="Enter a Number">
              </p>
              <p>
                <label for="input__file">File Input</label>
                <input id="input__file" type="file">
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__select">
              <legend>Select menus</legend>
              <p>
                <label for="select">Select</label>
                <select id="select">
                  <optgroup label="Option Group">
                    <option>Option One</option>
                    <option>Option Two</option>
                    <option>Option Three</option>
                  </optgroup>
                </select>
              </p>
              <p>
                <label for="select_multiple">Select (multiple)</label>
                <select id="select_multiple" multiple="multiple">
                  <optgroup label="Option Group">
                    <option>Option One</option>
                    <option>Option Two</option>
                    <option>Option Three</option>
                  </optgroup>
                </select>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__checkbox">
              <legend>Checkboxes</legend>
              <ul>
                <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
                <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
                <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
              </ul>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__radio">
              <legend>Radio buttons</legend>
              <ul>
                <li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Option 1</label></li>
                <li><label for="radio2"><input id="radio2" name="radio" type="radio"> Option 2</label></li>
                <li><label for="radio3"><input id="radio3" name="radio" type="radio"> Option 3</label></li>
              </ul>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__textareas">
              <legend>Textareas</legend>
              <p>
                <label for="textarea">Textarea</label>
                <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__html5">
              <legend>HTML5 inputs</legend>
              <p>
                <label for="ic">Color input</label>
                <input type="color" id="ic" value="#000000">
              </p>
              <p>
                <label for="in">Number input</label>
                <input type="number" id="in" min="0" max="10" value="5">
              </p>
              <p>
                <label for="ir">Range input</label>
                <input type="range" id="ir" value="10">
              </p>
              <p>
                <label for="idd">Date input</label>
                <input type="date" id="idd" value="1970-01-01">
              </p>
              <p>
                <label for="idm">Month input</label>
                <input type="month" id="idm" value="1970-01">
              </p>
              <p>
                <label for="idw">Week input</label>
                <input type="week" id="idw" value="1970-W01">
              </p>
              <p>
                <label for="idt">Datetime input</label>
                <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
              </p>
              <p>
                <label for="idtl">Datetime-local input</label>
                <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
              </p>
              <p>
                <label for="idl">Datalist</label>
                <input type="text" id="idl" list="example-list">
                <datalist id="example-list">
                  <option value="Example #1" />
                  <option value="Example #2" />
                  <option value="Example #3" />
                </datalist>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__action">
              <legend>Action buttons</legend>
              <p>
                <input type="submit" value="<input type=submit>">
                <input type="button" value="<input type=button>">
                <input type="reset" value="<input type=reset>">
                <input type="submit" value="<input disabled>" disabled>
              </p>
              <p>
                <button type="submit">&lt;button type=submit&gt;</button>
                <button type="button">&lt;button type=button&gt;</button>
                <button type="reset">&lt;button type=reset&gt;</button>
                <button type="button" disabled>&lt;button disabled&gt;</button>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
          </form>
        </section>
      </main>
      <footer>
        <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
      </footer>

Abra o arquivo app/views/pages/html_test_3.html.erb e cole o conteúdo copiado acima

Insira o conteúdo da página `html_test_4`

Exibir mais …

Acesse o link https://github.com/alexandersandberg/html5-elements-tester/blob/master/index.html e copie todo o conteúdo de <main id="main">, conforme abaixo, removendo tudo que estiver entre as tags <script> </script>. O HTML limpo pode ser visto a seguir

 <main id="main">
    <nav id="nav">
      <h2>Navigation</h2>
      <ul>
        <li><a href="#sections">Sections</a></li>
        <li><a href="#grouping-content">Grouping content</a></li>
        <li><a href="#text-level-semantics">Text-level semantics</a></li>
        <li><a href="#edits">Edits</a></li>
        <li><a href="#embedded-content">Embedded content</a></li>
        <li><a href="#tabular-data">Tabular data</a></li>
        <li><a href="#forms">Forms</a></li>
        <li><a href="#interactive-elements">Interactive elements</a></li>
        <li><a href="#scripting">Scripting</a></li>
      </ul>
    </nav>
    <section id="sections">
      <header>
        <h2>Sections</h2>
        <p>Elements: <code>&lt;body&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;h1&gt;–&lt;h6&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;h1&gt;–&lt;h6&gt;</code>:</h3>
        </header>

        <!--
        Note that, in this context, this use of <h*>s is not of appropriate
          (accessible) rank, but used for testing purposes.
        -->
        <h1><code>&lt;h1&gt;</code> A unique title, specific for the page</h1>
        <h2><code>&lt;h2&gt;</code> Heading levels should reflect structure, not style</h2>
        <p>It can also be useful to test how body text below a heading appears on the page, for example to check the margin. This text is wrapped in &lt;p&gt; and is a direct sibling to the above &lt;h2&gt;.</p>
        <h3><code>&lt;h3&gt;</code> If you need a visually smaller title, use CSS</h3>
        <p>To create a semantically correct HTML structure that's accessible for everyone, make sure you're nesting the headings correctly. Never use more than one &lt;h1&gt; per page, and don't skip heading levels.</p>
        <h4><code>&lt;h4&gt;</code> Headings below level 4 are not used as much</h4>
        <h5><code>&lt;h5&gt;</code> But that doesn't mean you should forget about them</h5>
        <h6><code>&lt;h6&gt;</code> And last, but not least, the heading with the lowest rank</h6>
      </article>

      <article id="article">
        <header id="header">
          <h3><code>&lt;body&gt; + &lt;article&gt; + &lt;section&gt; + &lt;nav&gt; + &lt;aside&gt; + &lt;header&gt; + &lt;footer&gt;</code>:</h3>
        </header>

        <p>All these tags are already in use on the page. The list below contains links to each use case. See the source code of this file for more details.</p>
        <ul>
          <li><a href="#body"><code>&lt;body&gt;</code></a></li>
          <li><a href="#article"><code>&lt;article&gt;</code></a></li>
          <li><a href="#sections"><code>&lt;section&gt;</code></a></li>
          <li><a href="#nav"><code>&lt;nav&gt;</code></a></li>
          <li><a href="#aside"><code>&lt;aside&gt;</code></a></li>
          <li><a href="#header"><code>&lt;header&gt;</code></a></li>
          <li><a href="#footer"><code>&lt;footer&gt;</code></a></li>
        </ul>
      </article>

      <footer id="footer">
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="grouping-content">
      <header>
        <h2>Grouping content</h2>
        <p>Elements: <code>&lt;p&gt;</code>, <code>&lt;address&gt;</code>, <code>&lt;hr&gt;</code>, <code>&lt;pre&gt;</code>, <code>&lt;blockquote&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;li&gt;</code>, <code>&lt;dl&gt;</code>, <code>&lt;dt&gt;</code>, <code>&lt;dd&gt;</code>, <code>&lt;figure&gt;</code>, <code>&lt;figcaption&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;div&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;p&gt;</code>:</h3>
        </header>

        <p>Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. [1]</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;address&gt;</code>:</h3>
        </header>

        <address>
          Name: Alexander Sandberg<br>
          Street adress: 1 Rover street<br>
          State: N/A<br>
          Planet: Mars<br>
          Digital home: <a href="https://alexandersandberg.com">alexandersandberg.com</a><br>
        </address>
      </article>

      <article>
        <header>
          <h3><code>&lt;hr&gt;</code>:</h3>
        </header>

        <hr>
      </article>

      <article>
        <header>
          <h3><code>&lt;pre&gt;</code>:</h3>
        </header>

        <pre>Preformatted text
          will be presented
    exactly as written
          in the         HTML file.
        </pre>
      </article>

      <article>
        <header>
          <h3><code>&lt;blockquote&gt;</code>:</h3>
        </header>

        <blockquote>
          <p>The text inside this blockquote is wrapped in <code>&lt;p&gt;</code> tags. Sometimes the quote is really long, and possibly have to occupy multiple lines, but that shouldn't be a problem.</p>
        </blockquote>
      </article>

      <article>
        <header>
          <h3><code>&lt;ol&gt; + &lt;ul&gt; + &lt;li&gt;</code>:</h3>
        </header>

        <ol>
          <li>List item 1</li>
          <li>List item 2
            <ol>
              <li>List item 1</li>
            </ol>
          </li>
          <li>List item 3
            <ul>
              <li>List item 1</li>
              <li>List item 2
                <ul>
                  <li>List item 1
                    <ol>
                      <li>List item 1</li>
                      <li>List item 2</li>
                    </ol>
                  </li>
                  <li>List item 2</li>
                </ul>
              </li>
              <li>List item 3</li>
            </ul>
          </li>
          <li>List item 4</li>
        </ol>
        <ul>
          <li>List item 1
            <ul>
              <li>List item 1
                <ul>
                  <li>List item 1</li>
                </ul>
              </li>
              <li>List item 2</li>
            </ul>
          </li>
          <li>List item 2</li>
          <li>List item 3
            <ol>
              <li>List item 1</li>
              <li>List item 2</li>
            </ol>
          </li>
        </ul>
      </article>

      <article>
        <header>
          <h3><code>&lt;dl&gt; + &lt;dt&gt; + &lt;dd&gt;</code>:</h3>
        </header>

        <dl>
          <dt>This is a term</dt>
          <dd>And this is the accompanying description, explaining the above term.</dd>
          <dd>You can also have multiple descriptions (<code>&lt;dt&gt;</code>), like this one, for each term (<code>&lt;dt&gt;</code>).</dd>
          <dd>And why not nest lists inside this description?
            <dl>
              <dt>Another term</dt>
              <dd>With some description.</dd>
            </dl>
            <ul>
                <li>List item 1</li>
              </ul>
              <ol>
                <li>List item 1</li>
                <li>List item 2</li>
              </ol>
          </dd>
        </dl>
      </article>

      <article>
        <header>
          <h3><code>&lt;figure&gt; + &lt;figcaption&gt;</code>:</h3>
        </header>

        <p>Used with an <code>&lt;img&gt;</code>:</p>
        <figure>
          <img src="https://placekeanu.com/600/300" alt="Keanu Reeves looking fine">
          <figcaption>Wholesome Keanu Reeves from <a href="https://placekeanu.com" target="_blank">placekeanu.com</a>.</figcaption>
        </figure>

        <p>Used with a <code>&lt;blockquote&gt;</code>:</p>
        <figure>
          <blockquote>
            <p>Seek wealth, not money or status. Wealth is having assets that earn while you sleep. Money is how we transfer time and wealth. Status is your place in the social hierarchy.</p>
          </blockquote>

          <figcaption>
            <cite>Naval Ravikant (@naval)</cite> on <a href="https://twitter.com/naval/status/1002103497725173760">Twitter</a>.
          </figcaption>
        </figure>
      </article>

      <article>
        <header>
          <h3><code>&lt;main&gt;</code>:</h3>
        </header>

        <p>See the <a href="#main">main content</a> of this page for a use case of <code>&lt;main&gt;</code>.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;div&gt;</code>:</h3>
        </header>

        <div>
          <p>This paragraph of text is contained inside a <code>&lt;div&gt;</code>. The element really has no special meaning, other than grouping content together, and should be used as a last resort when no other element is suitable.</p>
        </div>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="text-level-semantics">
      <header>
        <h2>Text-level semantics</h2>
        <p>Elements: <code>&lt;a&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code>, <code>&lt;small&gt;</code>, <code>&lt;s&gt;</code>, <code>&lt;cite&gt;</code>, <code>&lt;q&gt;</code>, <code>&lt;dfn&gt;</code>, <code>&lt;abbr&gt;</code>, <code>&lt;ruby&gt;</code>, <code>&lt;rb&gt;</code>, <code>&lt;rt&gt;</code>, <code>&lt;rtc&gt;</code>, <code>&lt;rp&gt;</code>, <code>&lt;data&gt;</code>, <code>&lt;time&gt;</code>, <code>&lt;code&gt;</code>, <code>&lt;var&gt;</code>, <code>&lt;samp&gt;</code>, <code>&lt;kbd&gt;</code>, <code>&lt;sub&gt;</code>, <code>&lt;sup&gt;</code>, <code>&lt;i&gt;</code>, <code>&lt;b&gt;</code>, <code>&lt;u&gt;</code>, <code>&lt;mark&gt;</code>, <code>&lt;bdi&gt;</code>, <code>&lt;bdo&gt;</code>, <code>&lt;span&gt;</code>, <code>&lt;br&gt;</code>, <code>&lt;wbr&gt;</code></p>
      </header>

      <article id="a">
        <header>
          <h3><code>&lt;a&gt;</code>:</h3>
        </header>

        <p>Here is <a href="#a">a link</a> inside a paragraph of text. Below you can find a list of links with different <code>href</code> attributes.</p>
        <ul>
          <li><a href="https://github.com/alexandersandberg/html5-elements-tester">Link to an external website</a></li>
          <li><a href="#a">Anchor link to this element</a></li>
          <li><a href="">Link with an empty <code>href</code> attribute</a></li>
          <li><a>Link missing an <code>href</code> attribute</a></li>
        </ul>
      </article>

      <article>
        <header>
          <h3><code>&lt;em&gt; + &lt;i&gt; + &lt;strong&gt; + &lt;b&gt;</code>:</h3>
        </header>

        <p>The <code>&lt;em&gt;</code> element represents <em>stress emphasis</em> of its contents. Meanwhile, <code>&lt;i&gt;</code> is since HTML5 used for text in an alternative voice or mood, or otherwise offset from the <i>normal prose</i>, as you may define it.</p>
        <p>If you want to <b>draw attention</b> to some text, feel free to use <code>&lt;b&gt;</code>. However, if you want to mark the importance of something, <strong>you should use <code>&lt;strong&gt;</code></strong>.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;small&gt; + &lt;u&gt; + &lt;mark&gt; + &lt;s&gt;</code>:</h3>
        </header>

        <p><small>When you want your text to represent small print, use <code>&lt;small&gt;</code>.</small></p>
        <p>In most cases, there's a better element than <code>&lt;u&gt;</code> to use, but it can be useful for labelling <u>msispelt</u> text. Avoid using it, however, where the text could be confused for a hyperlink.</p>
        <p>You can <mark>highlight text</mark> for reference purposes with <code>&lt;mark&gt;</code>, or if the contents is <s>no longer accurate or relevant</s>, wrap it with <code>&lt;s&gt;</code>.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;abbr&gt; + &lt;dfn&gt;</code>:</h3>
        </header>

        <p>By wrapping an abbreviation like <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> in both <code>&lt;dfn&gt;</code> and <code>&lt;abbr&gt;</code>, we define the term. This can later be used only using <code>&lt;abbr&gt;</code>, since we already defined <abbr title="Cascading Style Sheets">CSS</abbr> once before.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;q&gt; + &lt;cite&gt; + &lt;data&gt; + &lt;time&gt;</code>:</h3>
        </header>

        <p>When citing creative work, include the reference with a <code>&lt;cite&gt;</code> element. <cite>www.w3.org</cite> explains that <q>A citation is not a quote (for which the <code>&lt;q&gt;</code> element is appropriate)</q> instead, like used here.</p>
        <p>If you want to link content with a <data value="123">machine-readable</data> translation, use <code>&lt;data&gt;</code> with a <code>value</code> attribute. However, if this data is a time- or date-related, like the date <time datetime="2019-07-04">July 4</time>, you have to use <code>&lt;time&gt;</code> together with the <code>datatime</code> attribute.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;code&gt; + &lt;var&gt; + &lt;samp&gt; + &lt;kbd&gt; + &lt;sub&gt; + &lt;sup&gt;</code>:</h3>
        </header>

        <p>When sharing code-snippets, make sure to use the <code>&lt;code&gt;</code> element. This can be done both <code>display: inline;</code>, as well as block-level:</p>
        <pre><code>* {
color: rebeccapurple;
background: aliceblue;
}</code></pre>
        <p>Variables should be surrounded by <code>&lt;var&gt;</code>, or <var>x</var> amount of people might be confused.</p>
        <p>Sample or quotes output are represented with <code>&lt;samp&gt;</code>: <samp>Your expression '1 + 1' equals 2</samp>.</p>
        <p>To represent user input, like the shortcut <kbd><kbd>Cmd</kbd> + <kbd>R</kbd></kbd> on macOS, use <code>&lt;kbd&gt;</code>.</p>
        <p>If you want to <sub>subscript</sub> or <sup>superscript</sup> text, use <code>&lt;sub&gt;</code> or <code>&lt;sup&gt;</code>.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;bdi&gt; + &lt;bdo&gt; + &lt;ruby&gt; + &lt;rb&gt; + &lt;rt&gt; + &lt;rtc&gt; + &lt;rp&gt;</code>:</h3>
        </header>

        <p>Consider using <code>&lt;bdi&gt;</code> when working with bidirectional content, like the names <bdi>Alexander</bdi> and <bdi>علي‎</bdi>.</p>
        <p>If you need to override the bidirectional algorithm for some content and its children, use <code>&lt;bdo&gt;</code>:</p>
        <p><bdo dir="rtl">Don't forget to specify the <code>dir</code> attribute!</bdo></p>
        <p><bdo dir="ltr">I said, don't forget to specify the <code>dir</code> attribute!</bdo></p>
        <p>Some use of <code>&lt;ruby&gt;</code> and its related elements:</p>
        <ruby>
          漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
          字 <rp>(</rp><rt>ji</rt><rp>)</rp>
        </ruby>
        <br>
        <ruby><rb>旧<rb>金<rb>山<rt>jiù<rt>jīn<rt>shān<rtc>San Francisco</ruby>
        <p>More information about the explanation and usage of these can be <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#the-ruby-element" target="_blank">read here on www.w3.org</a>.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;span&gt; + &lt;br&gt; + &lt;wbr&gt;</code>:</h3>
        </header>

        <p>A <code>&lt;span&gt;</code> can be used to mark up inline text for various uses, <span style="font-weight: bolder;">here to make the text bolder</span>.</p>
        <p>If you have really long text you might want to insert a<br>blank line with the <code>&lt;br&gt;</code> element. You can also insert word breaking opportunities using <code>&lt;wbr&gt;</code>, to help the browser break long words like Pneumonoultramicro<wbr>scopicsilico<wbr>volcanoconiosis.
        </p>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="edits">
      <header>
        <h2>Edits</h2>
        <p>Elements: <code>&lt;ins&gt;</code>, <code>&lt;del&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;ins&gt; + &lt;del&gt;</code>:</h3>
        </header>

        <p>If you make a <del>really huge</del> mistake, you can always go back and fix it later. <ins>And don't forget to learn from your mistake.</ins></p>
        <ins><p>Both <code>&lt;ins&gt;</code> and <code>&lt;del&gt;</code> can be block-level, like this.</p></ins>
        <del><p>Here's a block-level paragraph removal.</p></del>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="embedded-content">
      <header>
        <h2>Embedded content</h2>
        <p>Elements: <code>&lt;picture&gt;</code>, <code>&lt;source&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;object&gt;</code>, <code>&lt;param&gt;</code>, <code>&lt;video&gt;</code>, <code>&lt;audio&gt;</code>, <code>&lt;track&gt;</code>, <code>&lt;map&gt;</code>, <code>&lt;area&gt;</code>, <code>&lt;math&gt;</code>, <code>&lt;svg&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;img&gt; + &lt;svg&gt;</code>:</h3>
        </header>

        <img src="https://placekeanu.com/600/250/g" alt="Keanu Reeves looking fine">
        <svg height="250" width="510">
          <polygon points="220,10 300,210 200,245 123,234" style="fill:tomato;stroke:rebeccapurple;stroke-width:5" />
          This is a fallback message. If you see this, your browser does not support inline SVG.
        </svg>
      </article>

      <article>
        <header>
          <h3><code>&lt;picture&gt; + &lt;source&gt;</code>:</h3>
        </header>

        <p>A different image will be shown depending on viewport size.</p>
        <picture>
          <source srcset="https://placekeanu.com/800/400/y" media="(min-width: 1200px)">
          <img src="https://placekeanu.com/400/300" alt="Keanu Reeves looking fine">
        </picture>
      </article>

      <article>
        <header>
          <h3><code>&lt;iframe&gt;</code>:</h3>
        </header>

        <iframe src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=New%20york+(HTML5%20Elements%20Tester)&amp;ie=UTF8&amp;t=k&amp;z=14&amp;iwloc=B&amp;output=embed"></iframe>
      </article>

      <article>
        <header>
          <h3><code>&lt;embed&gt;</code>:</h3>
        </header>

        <embed src="http://techslides.com/demos/samples/sample.webm" type="video/webm">
      </article>

      <article>
        <header>
          <h3><code>&lt;object&gt; + &lt;param&gt;</code>:</h3>
        </header>

        <object data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf">
          <param name="parameter" value="example">
        </object>
      </article>

      <article>
        <header>
          <h3><code>&lt;video&gt; + &lt;audio&gt; + &lt;track&gt;</code>:</h3>
        </header>

        <audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">
          <p>This is a fallback text. If you see this, your browser does not support embedded audio.</p>
        </audio>
        <p>Audio is from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio">an example on MDN</a>.</p>
        <video controls width="400">
          <source src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.mp4" type="video/mp4">
          <track default kind="captions" srclang="en" src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt">
          <p>This is a fallback text. If you see this, your browser does not support embedded videos.</p>
        </video>
        <p>Video and subtitles are from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track">an example on MDN</a>.</p>
      </article>

      <article>
        <header>
          <h3><code>&lt;map&gt; + &lt;area&gt;</code>:</h3>
        </header>

        <p>Each side of the image below is linked to different anchors on this page. Give it a try!</p>
        <map name="image-map" id="image-map">
          <area shape="circle" coords="75,75,75" href="#image-map">
          <area shape="circle" coords="275,75,75" href="#body">
        </map>
        <img usemap="#image-map" src="https://placekeanu.com/350/150/y" alt="Keanu Reeves looking fine">
      </article>

      <article>
        <header>
          <h3><code>&lt;math&gt;</code>:</h3>
        </header>

        <p>The quadratic formula is:<br>
          <math>
            <mi>x</mi>
            <mo>=</mo>
            <mfrac>
              <mrow>
              <mo form="prefix">-</mo> <mi>b</mi>
              <mo>±</mo>
              <msqrt>
                <msup> <mi>b</mi> <mn>2</mn> </msup>
                <mo>-</mo>
                <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
              </msqrt>
              </mrow>
              <mrow>
              <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
              </mrow>
            </mfrac>
          </math>
        </p>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="tabular-data">
      <header>
        <h2>Tabular data</h2>
        <p>Elements: <code>&lt;table&gt;</code>, <code>&lt;caption&gt;</code>, <code>&lt;colgroup&gt;</code>, <code>&lt;col&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;thead&gt;</code>, <code>&lt;tfoot&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code>, <code>&lt;th&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;table&gt; + &lt;caption&gt; + &lt;colgroup&gt; + &lt;col&gt;+ &lt;tbody&gt; + &lt;thead&gt; + &lt;tfoot&gt; + &lt;tr&gt; + &lt;td&gt; + &lt;th&gt;</code>:</h3>
        </header>

        <table>
          <caption>This is the table caption</caption>
          <colgroup>
            <col>
            <col span="2">
            <col span="1">
          </colgroup>
          <thead>
            <tr>
              <th><code>&lt;thead&gt;</code></th>
              <th>2nd colgroup</th>
              <th>2nd colgroup</th>
              <th>3rd colgroup</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row"><code>&lt;tbody&gt;</code></th>
              <td colspan="2">This is a cell spanning two columns</td>
              <td>Last column</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th scope="row"><code>&lt;tfoot&gt;</code></th>
              <td>Cell 2</td>
              <td>Cell 3</td>
              <td>Cell 4</td>
            </tr>
          </tfoot>
        </table>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="forms">
      <header>
        <h2>Forms</h2>
        <p>Elements: <code>&lt;form&gt;</code>, <code>&lt;label&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;button&gt;</code>, <code>&lt;select&gt;</code>, <code>&lt;datalist&gt;</code>, <code>&lt;optgroup&gt;</code>, <code>&lt;option&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;output&gt;</code>, <code>&lt;progress&gt;</code>, <code>&lt;meter&gt;</code>, <code>&lt;fieldset&gt;</code>, <code>&lt;legend&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;form&gt; + &lt;label&gt; + &lt;input&gt; + &lt;button&gt; + &lt;select&gt; + &lt;datalist&gt; + &lt;optgroup&gt; + &lt;option&gt; + &lt;textarea&gt; + &lt;fieldset&gt; + &lt;legend&gt;</code>:</h3>
        </header>

        <form action="#forms">
          <fieldset>
            <legend>Welcome to the form</legend>
            <p>
              <label for="input-hidden">
                Hidden: <input type="hidden" id="input-hidden">
              </label>
            </p>
            <p>
              <label for="input-text">
                Text: <input type="text" id="input-text">
              </label>
            </p>
            <p>
              <label for="input-text-readonly">
                Text (readonly): <input type="text" id="input-text-readonly" value="You can't change this" readonly>
              </label>
            </p>
            <p>
              <label for="input-text-disabled">
                Text (disabled): <input type="text" id="input-text-disabled" value="This is not available" disabled>
              </label>
            </p>
            <p>
              <label for="input-search">
                Search: <input type="search" id="input-search">
              </label>
            </p>
            <p>
              <label for="input-tel">
                Telephone: <input type="tel" id="input-tel">
              </label>
            </p>
            <p>
              <label for="input-url">
                URL: <input type="url" id="input-url">
              </label>
            </p>
            <p>
              <label for="input-email">
                Email: <input type="email" id="input-email">
              </label>
            </p>
            <p>
              <label for="input-password">
                Password: <input type="password" id="input-password">
              </label>
            </p>
            <p>
              <label for="input-date">
                Date: <input type="date" id="input-date">
              </label>
            </p>
            <p>
              <label for="input-month">
                Month: <input type="month" id="input-month">
              </label>
            </p>
            <p>
              <label for="input-week">
                Week: <input type="week" id="input-week">
              </label>
            </p>
            <p>
              <label for="input-time">
                Time: <input type="time" id="input-time">
              </label>
            </p>
            <p>
              <label for="input-datetime-local">
                Datetime-local: <input type="datetime-local" id="input-datetime-local">
              </label>
            </p>
            <p>
              <label for="input-number">
                Number: <input type="number" id="input-number">
              </label>
            </p>
            <p>
              <label for="input-range">
                Range: <input type="range" id="input-range">
              </label>
            </p>
            <p>
              <label for="input-color">
                Color: <input type="color" id="input-color">
              </label>
            </p>
            <p>
              <label for="input-checkbox-1">
                Checkbox 1: <input type="checkbox" id="input-checkbox-1" name="checkbox">
              </label>
              <label for="input-checkbox-2">
                Checkbox 2: <input type="checkbox" id="input-checkbox-2" name="checkbox">
              </label>
              <label for="input-checkbox-3">
                Checkbox 3 (disabled): <input type="checkbox" id="input-checkbox-3" name="checkbox" disabled>
              </label>
            </p>
            <p>
              <label for="input-radio-1">
                Radio 1: <input type="radio" id="input-radio-1" name="radio">
              </label>
              <label for="input-radio-2">
                Radio 2: <input type="radio" id="input-radio-2" name="radio">
              </label>
              <label for="input-radio-3">
                Radio 3 (disabled): <input type="radio" id="input-radio-3" name="radio" disabled>
              </label>
            </p>
            <p>
              <label for="select">
                Select: <select name="select" id="select">
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
              </label>
            </p>
            <p>
              <label for="select-size">
                Select (size): <select name="select-size" id="select-size" size=5>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                  <option value="4">Option 4</option>
                  <option value="5">Option 5</option>
                  <option value="6">Option 6</option>
                  <option value="7">Option 7</option>
                  <option value="8">Option 8</option>
                </select>
              </label>
            </p>
            <p>
              <label for="select-multiple">
                Select (multiple): <select name="select-multiple" id="select-multiple" multiple>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
              </label>
            </p>
            <p>
              <label for="select-optgroup">
                Select with optgroup: <select name="select-optgroup" id="select-optgroup">
                  <optgroup label="Group 1">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                  </optgroup>
                  <optgroup label="Group 2">
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                    <option value="5">Option 5</option>
                  </optgroup>
                </select>
              </label>
            </p>
            <p>
              <label for="datalist">
                Datalist:
                <input name="datalist" list="datalist">
                <datalist id="datalist">
                  <option value="Option 1">
                  <option value="Option 2">
                  <option value="Option 3">
                  <option value="Option 4">
                </datalist>
              </label>
            </p>
            <p>
              <label for="textarea">
                Textarea: <textarea name="textarea" id="textarea"></textarea>
              </label>
            </p>
            <p>
              <label for="input-file">
                File (single): <input type="file" id="input-file">
              </label>
            </p>
            <p>
              <label for="input-file-multiple">
                File (multiple): <input type="file" id="input-file-multiple" multiple>
              </label>
            </p>
            <p>
              <label for="input-submit">
                Submit: <input type="submit" id="input-submit">
              </label>
            </p>
            <p>
              <label for="input-image">
                Image button: <input type="image" id="input-image" src="https://placekeanu.com/100/40">
              </label>
            </p>
            <p>
              <label for="input-reset">
                Reset: <input type="reset" id="input-reset">
              </label>
            </p>
            <p>
              <label for="input-button">
                Button: <input type="button" id="input-button" value="I'm an input with type=button">
              </label>
            </p>
            <p>
              <button type="button">I'm a <code>&lt;button&gt;</code></button>
            </p>
          </fieldset>
        </form>
      </article>

      <article>
        <header>
          <h3><code>&lt;output&gt;</code>:</h3>
        </header>

        <form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
          <fieldset>
            <legend>Testing the <code>&lt;output&gt;</code> element</legend>
            <input name=a type=number step=any> +
            <input name=b type=number step=any> =
            <output name=o for="a b"></output>
            <p>Code is taken from <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#example-5b22c23a" target="_blank">this example by W3</a>.</p>
          </fieldset>
        </form>
      </article>

      <article>
        <header>
          <h3><code>&lt;progress&gt; + &lt;meter&gt;</code>:</h3>
        </header>

        <form action="#forms">
          <fieldset>
            <legend>Testing <code>&lt;progress&gt;</code> and <code>&lt;meter&gt;</code></legend>
            <p>
              <label for="progress">
                Progress: <progress id="progress" max="100" value="64">64%</progress>
              </label>
            </p>
            <p>
              <label for="meter-2">
                Meter (ok): <meter id="meter-2" max="100" low="30" high="80" optimum="50" value="50">50/100</meter>
              </label>
            </p>
            <p>
              <label for="meter-1">
                Meter (warning): <meter id="meter-1" max="100" low="30" high="80" optimum="50" value="20">20/100</meter>
              </label>
            </p>
            <p>
              <label for="meter-3">
                Meter (critical): <meter id="meter-3" max="100" low="60" high="70" value="90">80/100</meter>
              </label>
            </p>
          </fieldset>
        </form>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="interactive-elements">
      <header>
        <h2>Interactive elements</h2>
        <p>Elements: <code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code>, <code>&lt;dialog&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;details&gt; + &lt;summary&gt;</code>:</h3>
        </header>

        <details>
          <summary>This can be expanded</summary>
          <p>And by doing so, more information is revealed.</p>
        </details>
      </article>

      <article>
        <header>
          <h3><code>&lt;dialog&gt;</code>:</h3>
        </header>

        <dialog>
          <p>This text is inside a <code>&lt;dialog&gt;</code> box! It should be hidden by default, and shown to the user when given an <code>open</code> attribute.</p>
        </dialog>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>

    <section id="scripting">
      <header>
        <h2>Scripting</h2>
        <p>Elements: <code>&lt;script&gt;</code>, <code>&lt;noscript&gt;</code>, <code>&lt;template&gt;</code>, <code>&lt;canvas&gt;</code></p>
      </header>

      <article>
        <header>
          <h3><code>&lt;script&gt; + &lt;noscript&gt;</code>:</h3>
        </header>

        <p>Dynamic scripts and data blocks are included with the <code>&lt;script&gt;</code> element.</p>
        <p>If scripting is disabled when loading the page, content inside <code>&lt;noscript&gt;</code> is used instead.</p>
        <noscript>
          <p>I see you disabled JavaScript!</p>
        </noscript>
      </article>

      <article>
        <header>
          <h3><code>&lt;template&gt;</code>:</h3>
        </header>

        <p>Below this paragraph, there's a <code>&lt;template&gt;</code> element containing a HTML declaration, that can be used by scripts.</p>
        <template>
          <p>Hi! I'm a paragraph inside the <code>&lt;template&gt;</code> element.</p>
        </template>
      </article>

      <article>
        <header>
          <h3><code>&lt;canvas&gt;</code>:</h3>
        </header>

        <p>A <code>&lt;script&gt;</code> is used to draw a rectangle in the <code>&lt;canvas&gt;</code> below.</p>
        <canvas id="canvas">
          Alternative text explaining what's on display in this &lt;canvas&gt;.
        </canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
          ctx.fillStyle = 'tomato';
          ctx.fillRect(10, 10, 100, 100);
        </script>
      </article>

      <footer>
        <a href="#body">Back to top 👆</a>
      </footer>
    </section>
  </main>

  <aside id="aside">
    <h2>About this project</h2>
    <p>A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks.</p>
    <p>This section is inside an <code>&lt;aside&gt;</code> element.</p>
  </aside>

  <footer>
    <p><a href="https://github.com/alexandersandberg/html5-elements-tester">HTML5 elements tester</a> by <a href="https://alexandersandberg.com">Alexander Sandberg</a> · <a href="#body">Back to top 👆</a></p>
  </footer>

Abra o arquivo app/views/pages/html_test_4.html.erb e cole o conteúdo copiado acima

Altere a Página `app/views/layouts/application.html.erb` para Incluir um Link para as Páginas `html_test_1, html_test_2, html_test_3 e html_test_4`

Exibir mais …

Altere o conteúdo dentro de <body> </body>para que inclua um link para as páginas de teste do HTML, conforme copiado abaixo

  <body>

    <div>
      <%= link_to "HTM de Teste 1", pages_html_test_1_path %> /
      <%= link_to "HTM de Teste 2", pages_html_test_2_path %> /
      <%= link_to "HTM de Teste 3", pages_html_test_3_path %> /
      <%= link_to "HTM de Teste 4", pages_html_test_4_path %>
    </div>

    <%= yield %>
  </body>

Inicie o servidor do Rails e veja o feioso HTML puro 😟

Exibir mais …

Inicie o servidor de desenvolvimento do Rails com bin/dev ou o servidor padrão com rails server e abra o navegador no endereço 127.0.0.1:3000

$ bin/dev
=> Booting Puma
=> Rails 8.0.0.1 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.5.0 ("Sky's Version")
* Ruby version: ruby 3.3.6 (2024-11-05 revision 75015d4c1f) +YJIT [x86_64-linux]
*  Min threads: 3
*  Max threads: 3
*  Environment: development
*          PID: 98083
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

Após abrir a página você verá no topo os quatro links que adicionamos para as páginas html_test_1, html_test_2, html_test_3 e html_test_4 que criamos anteriormente.
Tanto trabalho até aqui. Abra cada uma delas e você notará que o HTML ainda não foi estilizado com nenhum CSS, o que faremos logo a seguir

Forem: Dailson Igo Araujo Palheta

Ruby on Rails 8 - Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless

Inicie um novo aplicativo Rails

Abra o projeto com o VSCode ou seu editor preferido

Criando algumas páginas para visualizar a estilização dos elementos HTML

Adicione o CSS Zero ao seu projeto

Alterando o arquivo app/assets/stylesheets/base.css

Alterando o arquivo app/assets/stylesheets/button.css

Alterando o arquivo app/assets/stylesheets/input.css

Ajustes no arquivo app/views/layouts/application.html.erb

Agora sim, um HTML estilizando usando o CSS Zero como um framework classless 🤩

Modo dark

Passos seguintes

Referências

Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless

Inicie um novo aplicativo Rails

Abra o projeto com o VSCode ou seu editor preferido

Criando algumas páginas para visualizar a estilização dos elementos HTML

Altere o arquivo do Tailwind app/assets/stylesheets/application.tailwind.css

Insira o conteúdo do 1º arquivo Tailwind customizado em custom1.css

Insira o conteúdo do 2º arquivo Tailwind customizado em custom2.css

Insira o conteúdo do 3º arquivo Tailwind customizado em custom3.css

Remova as classes Tailwind do arquivo app/views/layouts/application.html.erb

Alguns passos adicionais para fazer o estilo dos arquivos Tailwind customizados funcionarem.

Agora sim, um HTML estilizando usando Tailwind como um framework classless 🤩

Modo dark

Repositório

Passos seguintes

Referências

Ruby on Rails 8 - Frontend Rápido com Frameworks CSS Classless ou Class-Light sem CDN

Inicie um novo aplicativo Rails

Abra o projeto com o VSCode ou seu editor preferido

Criando algumas páginas para visualizar a estilização dos elementos HTML

Copie seus arquivos CSS para seu projeto colando em app/assets/stylesheets/

Abra novamente a página app/views/layouts/application.html.erb para referenciar os estilos CSS sem classe copiados para o projeto

Agora sim, um HTML estilizando usando um framework css classless sem CDN 🤩

Modo dark

Repositório

Passos seguintes

Referências

Ruby on Rails 8 - Frontend Rápido com Frameworks CSS Classless ou Class-Light com CDN

Inicie um novo aplicativo Rails

Abra o projeto com o VSCode ou seu editor preferido

Criando algumas páginas para visualizar a estilização dos elementos HTML

Abra novamente a página app/views/layouts/application.html.erb para referenciar os estilos CSS sem classe via CDN

Agora sim, um HTML estilizando usando um framework css classless com CDN 🤩

Modo dark

Repositório

Passos seguintes

Referências

Ruby on Rails 8 - Frontend Rápido com Frameworks CSS Classless ou Class-Light

Veremos nesta série de artigos:

Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.

Passos Comuns

Gere as páginas de teste, com um controller pages e as actions html_test_1, html_test_2, html_test_3 e html_test_4

Abra o arquivo config/routes.rb pelo VSCode

Exibindo as rotas do Rails

Vamos criar quatro páginas com conteúdo HTML para testar os estilos CSS.

Insira o conteúdo da página html_test_1

Insira o conteúdo da página html_test_2

Insira o conteúdo da página html_test_3

Insira o conteúdo da página html_test_4

Altere a Página app/views/layouts/application.html.erb para Incluir um Link para as Páginas html_test_1, html_test_2, html_test_3 e html_test_4

Inicie o servidor do Rails e veja o feioso HTML puro 😟

Alterando o arquivo `app/assets/stylesheets/base.css`

Alterando o arquivo `app/assets/stylesheets/button.css`

Alterando o arquivo `app/assets/stylesheets/input.css`

Ajustes no arquivo `app/views/layouts/application.html.erb`

Altere o arquivo do Tailwind `app/assets/stylesheets/application.tailwind.css`

Insira o conteúdo do 1º arquivo Tailwind customizado em `custom1.css`

Insira o conteúdo do 2º arquivo Tailwind customizado em `custom2.css`

Insira o conteúdo do 3º arquivo Tailwind customizado em `custom3.css`

Remova as classes Tailwind do arquivo `app/views/layouts/application.html.erb`

Copie seus arquivos CSS para seu projeto colando em `app/assets/stylesheets/`

Abra novamente a página `app/views/layouts/application.html.erb` para referenciar os estilos CSS sem classe copiados para o projeto

Abra novamente a página `app/views/layouts/application.html.erb` para referenciar os estilos CSS sem classe via CDN

Conhecendo o layout padrão do Rails `app/views/layouts/application.html.erb`.

Gere as páginas de teste, com um `controller pages` e as `actions html_test_1, html_test_2, html_test_3 e html_test_4`

Insira o conteúdo da página `html_test_1`

Insira o conteúdo da página `html_test_2`

Insira o conteúdo da página `html_test_3`

Insira o conteúdo da página `html_test_4`

Altere a Página `app/views/layouts/application.html.erb` para Incluir um Link para as Páginas `html_test_1, html_test_2, html_test_3 e html_test_4`