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

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read 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