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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay