Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light

如果您刚开始 Web 开发，并且您的重点不是专注于前端，那么最痛苦的障碍之一就是能够轻松地设计丑陋的 HTML 样式。

对于那些第一次接触的人来说，尝试理解具有一系列字母和数字的 HTML 并使用预定义的实用程序类将样式应用于 HTML 似乎是神秘和令人困惑的，例如：

<div>



<p><small>Copiado do site https://picocss.com</small></p>

<p>Os frameworks CSS que utilizam classes utilitárias são excelentes, versáteis, responsivos, elegantes e possuem muitas outras qualidades, mas o Tailwind CSS não é a única solução. <strong>Se você precisa de algo rápido e mais simples, usar um framework CSS classless ou class-light será uma solução melhor.</strong></p>

<p>Frameworks CSS classless estilizam elementos HTML diretamente, sem classes. Frameworks class-light combinam estilos automáticos com algumas classes utilitárias opcionais para personalização, o que adicionar maior versatilidade com seu uso.</p>

<p>Usando uma abordagem classless ou class-light você pode resolver a estilização do HTML de forma rápida com uma, duas ou três linhas.</p>

<h2>
  
  
  Veremos nesta série de artigos:
</h2>

<ul>
<li>A utilização do framework Ruby on Rails na versão 8, com Propshaft e Importmap;</li>
<li>Conheceremos brevemente o arquivo com o layout padrão das páginas HTML;</li>
<li>Criaremos 4 páginas HTML com vários elementos para testar a estilização com CSS;</li>
<li>Faremos um breve resumo sobre as rotas criadas para as páginas;</li>
<li>Vamos alterar o layout padrão para incluir o link para as páginas HTML criadas;</li>
<li>Saberemos como identificar se o frameworks CSS possui o modo light e dark configurados automaticamente por padrão;</li>
<li>Na parte 2, criaremos um projeto com 12 frameworks CSS via CDN ao layout padrão;</li>
<li>Na parte 3, criaremos um projeto com 12 frameworks CSS copiando os arquivos para o projeto;</li>
<li>Veremos também sugestões e novos desafios;</li>
</ul>

<h2>
  
  
  Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.
</h2>

<p><details>
  <summary>Exibir mais …</summary>
  <ul>
<li>Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout padrão para renderizar todas as páginas;</li>
<li>O Arquivo original no Rails 8 deve ter um conteúdo igual ou parecido com o copiado abaixo:
</li>
</ul>
<pre class="brush:php;toolbar:false">

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

• 内的顶部部分… 头>它们具有页面渲染和正常运行的重要结构元素。 head 标签用于包含重要的元数据和资源，帮助配置页面的行为（使用 javascript）、外观（使用 CSS）、与其他系统和服务的关系以及安全设置，例如 CSRF 和 CSP 的保护；
• 页面的主要内容将渲染在内，通过ERB标签。该标签充当集成点，包含由 Rails 动态呈现的视图内容；

常见步骤

一些步骤对于该系列中的所有文章都是通用的，此处是为了简化。别担心，我们会在接下来的文章中明确说明何时应遵循以下步骤。

 

生成测试页面，包含控制器页面和操作 html_test_1、html_test_2、html_test_3 和 html_test_4

显示更多...

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

• 与创建控制器和上述操作期间一样，还添加了路由，允许您访问从链接创建的任何操作
  • 本地主机：3000/pages/html_test_1
  • 本地主机：3000/pages/html_test_2
  • 本地主机：3000/pages/html_test_3
  • 本地主机：3000/pages/html_test_4

 

在 VSCode 中打开 config/routes.rb 文件

• 在文件末尾添加以下行，将页面根目录定向到之前创建的控制器页面和操作 html_test_1。因此，访问您的网站或系统时显示的第一个页面将是来自控制器页面的 html_test_1 页面。否则它将显示默认的 Rails 页面。

root "pages#html_test_1"

• 如果您在创建控制器时传递了 --skip-routes 参数，您可能会忽略将路由添加到创建的操作。完整的命令将成为 Rails g 控制器页面 html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

 

显示铁路路线

显示更多...

使用终端，您可以通过指定控制器（使用 -c）来显示路由，例如从控制器页面

<div>



<p><small>Copiado do site https://picocss.com</small></p>

<p>Os frameworks CSS que utilizam classes utilitárias são excelentes, versáteis, responsivos, elegantes e possuem muitas outras qualidades, mas o Tailwind CSS não é a única solução. <strong>Se você precisa de algo rápido e mais simples, usar um framework CSS classless ou class-light será uma solução melhor.</strong></p>

<p>Frameworks CSS classless estilizam elementos HTML diretamente, sem classes. Frameworks class-light combinam estilos automáticos com algumas classes utilitárias opcionais para personalização, o que adicionar maior versatilidade com seu uso.</p>

<p>Usando uma abordagem classless ou class-light você pode resolver a estilização do HTML de forma rápida com uma, duas ou três linhas.</p>

<h2>
  
  
  Veremos nesta série de artigos:
</h2>

<ul>
<li>A utilização do framework Ruby on Rails na versão 8, com Propshaft e Importmap;</li>
<li>Conheceremos brevemente o arquivo com o layout padrão das páginas HTML;</li>
<li>Criaremos 4 páginas HTML com vários elementos para testar a estilização com CSS;</li>
<li>Faremos um breve resumo sobre as rotas criadas para as páginas;</li>
<li>Vamos alterar o layout padrão para incluir o link para as páginas HTML criadas;</li>
<li>Saberemos como identificar se o frameworks CSS possui o modo light e dark configurados automaticamente por padrão;</li>
<li>Na parte 2, criaremos um projeto com 12 frameworks CSS via CDN ao layout padrão;</li>
<li>Na parte 3, criaremos um projeto com 12 frameworks CSS copiando os arquivos para o projeto;</li>
<li>Veremos também sugestões e novos desafios;</li>
</ul>

<h2>
  
  
  Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.
</h2>

<p><details>
  <summary>Exibir mais …</summary>
  <ul>
<li>Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout padrão para renderizar todas as páginas;</li>
<li>O Arquivo original no Rails 8 deve ter um conteúdo igual ou parecido com o copiado abaixo:
</li>
</ul>
<pre class="brush:php;toolbar:false">

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

或者您可以使用
显示所有路线

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

• 也可以使用地址http://127.0.0.1:3000/rails/info/routes通过浏览器访问路线。不要忘记使用 bin/dev 启动开发服务器，或者使用项目根目录中的rails server 启动标准rails 服务器。开发服务器“监听” javascript 文件和 css 文件的更改，以执行必要的处理，使它们可供用户使用。
• 要在浏览器中立即对这些文件进行更改和查看，需要安装像 Rails Livre Reload 这样的 gem。

让我们创建四个包含 HTML 内容的页面来测试 CSS 样式。

Ruby on Rails 默认使用 MVC（模型-视图-控制器）架构来开始组织您的项目。您的大部分代码都组织在以下文件夹中：

• 当代码与领域/业务逻辑和数据相关时，将其保存在app/models文件夹中；
• 与视图相关的代码（HTML、JSON、XML等...）将位于app/views中；
• 与请求生命周期相关的代码，将在app/controllers中；

 

插入html_test_1页面的内容

显示更多...

• 访问链接https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html，复制main标签的全部内容，如下图

root "pages#html_test_1"

启动 Rails 服务器并看到丑陋的纯 HTML？

显示更多...

• 使用bin/dev启动Rails开发服务器或使用rails server启动标准服务器，并打开浏览器127.0.0.1:3000

$ rails routes -c pages
           Prefix Verb URI Pattern                  Controller#Action
pages_html_test_1 GET  /pages/html_test_1(.:format) pages#html_test_1
pages_html_test_2 GET  /pages/html_test_2(.:format) pages#html_test_2
pages_html_test_3 GET  /pages/html_test_3(.:format) pages#html_test_3
pages_html_test_4 GET  /pages/html_test_4(.:format) pages#html_test_4

• 打开页面后，您将在顶部看到我们添加到之前创建的 html_test_1、html_test_2、html_test_3 和 html_test_4 页面的四个链接。
• 到目前为止还有很多工作。打开每个文件，您会注意到 HTML 尚未使用任何 CSS 进行样式化，我们接下来将进行此操作