DEV Community

Dailson Igo Araujo Palheta
Dailson Igo Araujo Palheta

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode

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-local && code .
Enter fullscreen mode Exit fullscreen mode

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:

# 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
Enter fullscreen mode Exit fullscreen mode
  • 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" %>
Enter fullscreen mode Exit fullscreen mode

PARA

    <%#= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
Enter fullscreen mode Exit fullscreen mode
  • 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 %>
Enter fullscreen mode Exit fullscreen mode
  • 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" %>
Enter fullscreen mode Exit fullscreen mode
  • 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

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.

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay