DEV Community

Dailson Igo Araujo Palheta
Dailson Igo Araujo Palheta

Posted on

Ruby on Rails 8 - Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless

#ruby #rails #frontend #css

Este artigo é intencionalmente muito semelhante aos anteriores desta série, mas agora usaremos um excelente frameword css recém-criado, o CSS Zero, pronto para usar com "nobuild" ou para aplicações Ruby on Rail que precisam do "build" também.

Antes de iniciar, observe que o objetivo do framework CSS Zero não é ser um framework classless ou class-light. As mudanças sugeridas aqui são apenas para efeito de teste, com o objetivo de estilizar todos os elementos das páginas HTML deste tutorial sem ter que adicionar nenhuma classe.

Portanto, em alguns elementos HTML, provavelmente a formatação não ficará de acordo com o que o framework CSS Zero propõe de estilização, design, disposição e comportamento. Para verificar o funcionamento de acordo com o que o framework CSS Zero propõe, acesse o Lookbook do CSS Zero aqui, mas para vê-lo em funcionamento como um framework classless, siga os passos abaixo.

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

Adicione o CSS Zero ao seu projeto

Exibir mais …

Siga as orientações do CSS Zero para incluí-lo ao seu projeto, conforme copiados abaixo:

$ bundle add css-zero $ bin/rails generate css_zero:install
Enter fullscreen mode Exit fullscreen mode

Para verificar quais componentes estão disponíveis, execute o comando abaixo:

$ bin/rails generate css_zero:add --help
Enter fullscreen mode Exit fullscreen mode

Para adicionar todos os componentes, execute o comando a seguir:

bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share
Enter fullscreen mode Exit fullscreen mode

Observe que caso outros componentes sejam adicionados ou algum possa ter sido sido removido, o comando acima estará obsoleto.


Alterando o arquivo app/assets/stylesheets/base.css

Exibir mais …

Ao observar o uso para títulos HTML exemplificado no link Headings, vemos que muitos elementos estilizados precisão estar dentro de uma div com a class="prose".

<div class="prose"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div>
Enter fullscreen mode Exit fullscreen mode

Para que estes elementos HTML sejam estilizados sem o uso de nenhuma div class="prose" será necessário alterar a forma como estes elementos são estilizados. Abra o arquivo app/assets/stylesheets/prose.css e copie o conteúdo abaixo logo que se encontra após o :where(.prose) {.

 font-size: var(--text-fluid-base); max-inline-size: 65ch; /* Antialiased fonts */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--font-extrabold); hyphens: auto; letter-spacing: -0.02ch; line-height: 1.1; margin-block: 0.5em; overflow-wrap: break-word; text-wrap: balance; }
Enter fullscreen mode Exit fullscreen mode

Agora com o arquivo app/assets/stylesheets/base.css aberto, procure pela linha body { e cole o conteúdo copiado após o text-rendering: optimizeLegibility;. Ao colar o conteúdo, remova ou comente a linha max-inline-size: 65ch;. O conteúdo de body deve ficar igual ao exemplo abaixo:

body { background-color: var(--color-bg); color: var(--color-text); font-synthesis-weight: none; text-rendering: optimizeLegibility; /* Teste para Configuração Classless */ font-size: var(--text-fluid-base); /* max-inline-size: 65ch; */ /* Antialiased fonts */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--font-extrabold); hyphens: auto; letter-spacing: -0.02ch; line-height: 1.1; margin-block: 0.5em; overflow-wrap: break-word; text-wrap: balance; } }
Enter fullscreen mode Exit fullscreen mode

Abra novamente o arquivo app/assets/stylesheets/prose.css e copie o conteúdo que inclua as linhas a seguir:

De:

 h1 { font-size: 2.4em; }
Enter fullscreen mode Exit fullscreen mode

Até:

 mark { color: var(--color-text); background-color: var(--color-highlight); }
Enter fullscreen mode Exit fullscreen mode

O Conteúdo que deverá ser copiado está abaixo para facilitar o exercício:

/* Teste para Configuração Classless */ h1 { font-size: 2.4em; } h2 { font-size: 1.8em; } h3 { font-size: 1.5em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 0.8em; } :is(ul, ol, menu) { list-style: revert; padding-inline-start: revert; } :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) { margin-block: 0.65lh; overflow-wrap: break-word; text-wrap: pretty; } hr { border-color: var(--color-border-dark); border-style: var(--border-style, solid) none none; margin: 2lh auto; } :is(b, strong) { font-weight: var(--font-bold); } :is(pre, code) { background-color: var(--color-border-light); border: 1px solid var(--color-border); border-radius: var(--rounded); font-family: var(--font-monospace-code); font-size: 0.85em; } code { padding: 0.1em 0.3em; } pre { border-radius: 0.5em; overflow-x: auto; padding: 0.5lh 2ch; text-wrap: nowrap; } pre code { background-color: transparent; border: 0; font-size: 1em; padding: 0; } p { hyphens: auto; letter-spacing: -0.005ch; } blockquote { font-style: italic; margin: 0 3ch; } blockquote p { hyphens: none; } table { border: 1px solid var(--color-border-dark); border-collapse: collapse; margin: 1lh 0; } th { font-weight: var(--font-bold); } :is(th, td) { border: 1px solid var(--color-border-dark); padding: 0.2lh 1ch; text-align: start; } th { border-block-end-width: 3px; } del { background-color: rgb(from var(--color-negative) r g b / .1); color: var(--color-negative); } ins { background-color: rgb(from var(--color-positive) r g b / .1); color: var(--color-positive); } a { color: var(--color-link); text-decoration: underline; text-decoration-skip-ink: auto; } mark { color: var(--color-text); background-color: var(--color-highlight); }
Enter fullscreen mode Exit fullscreen mode

Após copiar o conteúdo acima, cole no final do arquivo app/assets/stylesheets/base.css


Alterando o arquivo app/assets/stylesheets/button.css

Exibir mais …

Altere a classe css .btn para que todos os elementos de botão do HTML usem este estilo automaticamente.

Altere de:

.btn {
Enter fullscreen mode Exit fullscreen mode

Para:

/* Teste para Configuração Classless */ .btn, input[type="button"], input[type="submit"], input[type="reset"], ::file-selector-button, button {
Enter fullscreen mode Exit fullscreen mode

Alterando o arquivo app/assets/stylesheets/input.css

Exibir mais …

Altere a classe css .input para que todos os elementos de input do HTML usem este estilo automaticamente.

Altere de:

.input {
Enter fullscreen mode Exit fullscreen mode

Para:

/* Teste para Configuração Classless */ .input, input[type="email"], input[type="password"], input[type="search"], input[type="text"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[type="tel"], select[multiple], textarea, select {
Enter fullscreen mode Exit fullscreen mode

Altere de :

.checkbox, .radio {
Enter fullscreen mode Exit fullscreen mode

Para :

/* Teste para Configuração Classless */ .checkbox, .radio, input[type="checkbox"], input[type="radio"] {
Enter fullscreen mode Exit fullscreen mode

Altere de:

.range {
Enter fullscreen mode Exit fullscreen mode

Para:

/* Teste para Configuração Classless */ .range, input[type="range"] {
Enter fullscreen mode Exit fullscreen mode

Altere de:

:is(.input, .checkbox, .radio, .range) {
Enter fullscreen mode Exit fullscreen mode

Para:

/* Teste para Configuração Classless */ :is(.input, .checkbox, .radio, .range, input[type="email"], input[type="password"], input[type="search"], input[type="text"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[type="tel"], select[multiple], textarea, select, input[type="checkbox"], input[type="radio"], input[type="range"] ) {
Enter fullscreen mode Exit fullscreen mode

Ajustes no arquivo app/views/layouts/application.html.erb

Exibir mais …

Dependendo de onde você colocou a referência para os arquivo de teste html no application.html.erb, a exibição dos links ficará em uma disposição diferente. Caso queira que a apresentação fique igual ao do tutorial, altere a parte do <header id="header"> para que fique igual ao exemplo abaixo:

 <body class="header-layout"> <header id="header"> <div class="container"> <h1 class="font-bold text-2xl">Classless Css Um</h1> </div> <div> <%= link_to "HTM de Teste 1", pages_html_test_1_path %> / <%= link_to "HTM de Teste 2", pages_html_test_2_path %> / <%= link_to "HTM de Teste 3", pages_html_test_3_path %> / <%= link_to "HTM de Teste 4", pages_html_test_4_path %> </div> </header>
Enter fullscreen mode Exit fullscreen mode

Agora sim, um HTML estilizando usando o CSS Zero como um framework classless 🤩

Após configurar o CSS Zero com as customizações acima e iniciar o servior do Rails você verá seu HTML estilizado.

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.

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;
[x] Replicar a capacidade de um framework classless CSS usando Tailwind;
[-] 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;

Referências

Top comments (0)