Este artigo é intencionalmente muito semelhante ao anterior que trata do mesmo assunto, mas usou CDN para os frameworks CSS, entretanto, neste artigo passaremos a usar os arquivos CSS localmente, copiados para a pasta do projeto.
Inicie um novo aplicativo Rails
- O
time
antes do comandorails
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-local
...
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-local && 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.
Copie seus arquivos CSS para seu projeto colando em app/assets/stylesheets/
Exibir mais …
Consultando a documentação do Rails sobre os arquivos CSS, podemos constatar que precisamos seguir poucos passos para estilizar nossa aplicação web copiando os arquivos CSS:
- Copie o arquivo para a pasta
app/assets/stylesheets/
, ou para uma subpasta dentro dela, por exemplo,app/assets/stylesheets/classless
- Fazer referência a este arquivo configurando o layout padrão do Rails no arquivo
application.html.css
com a tag correta, por exemplo:- Se seu arquivo css ficou em
app/assets/stylesheets/meuestilo.css
, você deve adicionar ao seuapplication.html.css
a tag<%= stylesheet_link_tag "meuestilo" %>
sem a extenção .css; - Se seu arquivo css ficou em
app/assets/stylesheets/classless/meuestilo.css
, você deve adicionar ao seuapplication.html.css
a tag<%= stylesheet_link_tag "classless/meuestilo" %>
sem a extenção .css;
- Se seu arquivo css ficou em
Vamos criar uma subpasta classless
dentro de app/assets/stylesheets
para copiar os arquivos css baixados nos links abaixo:
- Normalize CSS: https://necolas.github.io/normalize.css/latest/normalize.css
- Pico CSS: https://github.com/picocss/pico/blob/main/css/pico.css
- MVP CSS: https://andybrewer.github.io/mvp/mvp.css
- Chota CSS: https://github.com/jenil/chota/blob/main/dist/chota.css
- Simple CSS: https://github.com/kevquirk/simple.css/blob/main/simple.css
- Classless CSS: https://classless.de/classless.css
- Concrete CSS: https://github.com/louismerlin/concrete.css/blob/main/concrete.css
- Almond CSS: https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
- Picnic CSS: https://github.com/franciscop/picnic/blob/master/picnic.css
- YACCK CSS: https://github.com/sphars/yacck/blob/master/yacck.css
- Sakura CSS: https://github.com/oxalorg/sakura/blob/master/css/sakura.css
Bamboo CSS: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
O Bamboo CSS só possui o arquivo minificado. Você pode formatá-los para que seja mais fácil de entendê-lo usando serviços como o CSS Beautifier & Minifie. Cole o código a esquerda e pegue o arquivo formatado a direita. Renomeie o arquivo para
bamboo.css
.Convertendo o Vanilla SCSS em Vanilla CSS:
# Acessa a pasta que criamos para os arquivos CSS
$ cd app/assets/stylesheets/classless/
# Clonar o repositório
$ git clone https://github.com/canonical/vanilla-framework.git
$ cd vanilla-framework
# Instalar dependências
$ yarn install
# Compilar SCSS para CSS
$ yarn build
- Copie o arquivo dentro da pasta
app/assets/stylesheets/classless/vanilla-framework/build/css/build.css
e para deixar o código mais legível use o serviço do site CSS Beautifier & Minifie. Cole o código a esquerda e pegue o arquivo formatado a direita. Renomeie o arquivo paravanilla.css
e recorte para a pastaapp/assets/stylesheets/classless
- Exclua a pasta
app/assets/stylesheets/classless/vanilla-framework/
Abra novamente a página app/views/layouts/application.html.erb
para referenciar os estilos CSS sem classe copiados para o projeto
Exibir mais …
- Comente a linha
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
inserindo um#
após o<%
para que o Rails não carregue todos os estilos de uma só vez. Para descomentar, remova o#
. Caso use os atalhos do VSCodeCtrl + K + C
para comentar, a linha não ficará corretamente comentada. ALTERE DE:
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
PARA
<%#= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
- Após o conteúdo abaixo, já com a linha comentada
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%#= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
- 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 %>
<%= stylesheet_link_tag "classless/normalize" %>
<%# ---[ Pico CSS: https://picocss.com/ ]--- %>
<%= stylesheet_link_tag "classless/pico" %>
<%# ---[ 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"> %>
<%#= stylesheet_link_tag "classless/mvp" %>
<%# ---[ Chota CSS: https://jenil.github.io/chota/ ]--- %>
<%#= stylesheet_link_tag "classless/chota" %>
<%# ---[ Simple CSS: https://simplecss.org/ ]--- %>
<%#= stylesheet_link_tag "classless/simple" %>
<%# ---[ Classless CSS: https://classless.de/ ]--- %>
<%#= stylesheet_link_tag "classless/classless" %>
<%# ---[ Concrete CSS: https://concrete.style/ ]--- %>
<%#= stylesheet_link_tag "classless/concrete" %>
<%# ---[ Almond CSS: https://alvaromontoro.github.io/almond.css/demo/ ]--- %>
<%#= stylesheet_link_tag "classless/almond" %>
<%# ---[ Vanilla CSS: https://vanillaframework.io/ ]--- %>
<%#= stylesheet_link_tag "classless/vanilla" %>
<%# ---[ Picnic CSS: https://picnicss.com/ ]--- %>
<%#= stylesheet_link_tag "classless/picnic" %>
<%# ---[ YACCK - Yet Another Classless CSS Kit: https://sphars.github.io/yacck/ ]--- %>
<%#= stylesheet_link_tag "classless/yacck" %>
<%# ---[ Sakura CSS: https://oxal.org/projects/sakura/ ]--- %>
<%#= stylesheet_link_tag "classless/sakura" %>
<%# ---[ Bamboo CSS: https://rilwis.github.io/bamboo/demo/ ]--- %>
<%#= stylesheet_link_tag "classless/bamboo" %>
- A maioria dos estilos está comentada, exceto o
Normalize CSS
e oPico 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 estilo local, no caso a linha
<%= stylesheet_link_tag "classless/pico" %>
e descomente a linha de outro estilo, por exemplo, a linha doSimple CSS
. - Não esqueça que para comentar tags ERB você precisa inserir um
#
após o<%
. Para descomentar, remova o#
. Caso use os atalhos do VSCodeCtrl + K + C
para comentar, a linha não ficará corretamente comentada.
Agora sim, um HTML estilizando usando um framework css classless sem 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
[x] Organizar os estilos de acordo com sua preferência;
[x] 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
- https://guides.rubyonrails.org/layouts_and_rendering.html
- https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
- https://prismic.io/blog/best-css-frameworks
- https://saeedesmaili.com/notes/classless-css-libraries/
- https://dev.to/logrocket/comparing-classless-css-frameworks-3267
- https://github.com/dbohdan/classless-css
- https://github.com/troxler/awesome-css-frameworks
Top comments (0)