Programming

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

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 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 . 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 Para verificar quais componentes estão disponíveis, execute o comando abaixo: $ bin/rails generate css_zero:add --help 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 Observe que caso outros componentes sejam adicionados ou algum possa ter sido sido removido, o comando acima estará obsoleto. Parte 1 - 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". Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 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; } 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; font-size: varbody { 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; } } 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; } Até: mark { color: var(--color-text); background-color: var(--color-highlight); } O Conteúdo que deverá ser c

Jan 21, 2025 - 20:31
 0
Ruby on Rails 8 - Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless

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

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 .

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

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

$ bin/rails generate css_zero:add --help

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

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

Parte 1 - 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".

 class="prose">
  
Heading 1

  
Heading 2

  
Heading 3

  
Heading 4

  
Heading 5

  
Heading 6

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;
  }

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;

  font-size: varbody {
  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;
  }
}

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;
  }

Até:

   mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }

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);
  }

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

Parte 2 - 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 {

Para:

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

Parte 3 - 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 {

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 {

Altere de :

.checkbox, .radio {

Para :

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

Altere de:

.range {

Para:

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

Altere de:

:is(.input, .checkbox, .radio, .range) {

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"]
) {

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