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 com CDN

#ruby #rails #frontend #css

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
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-cdn && 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.

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 %>
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 %> <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"> %>
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 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

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

[-] 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

Top comments (0)