• 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/

• 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.