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

profile
_SurveyJS
 Promoted

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

profile
Sentry
 Promoted

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Read next

rolandlluka profile image

Fixing CircleCI Nightmares: Solving Missing JavaScript Runtime & Chrome GPG Key Errors in Rails CI/CD 🚀🚀

Roland L -

leapcell profile image

A Brief History of Frontend Engineering

Leapcell -

austinwdigital profile image

Simplifying Testing in React: React Testing Library and Jest

Austin W -

rfornal profile image

[SCARY] Visual Regression Testing

bob.ts -