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

Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light - Sem CDN

本文有意与上一篇处理相同主题的文章非常相似，但使用 CDN 作为 CSS 框架，但是，在本文中我们将在本地使用 CSS 文件，并将其复制到项目文件夹中。

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

对于那些第一次接触的人来说，尝试理解 HTML 是一件神秘、神秘、超自然的事情，HTML 具有一系列字母和数字以及预定义的实用程序类，可将样式应用于 HTML，例如：

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

登录后复制

使用实用程序类的 CSS 框架非常出色、通用、响应灵敏、优雅并具有许多其他品质，但 Tailwind CSS 并不是唯一的解决方案。 如果您需要快速、简单的东西，使用无类或轻类 CSS 框架将是更好的解决方案。

无类 CSS 框架直接设置 HTML 元素的样式，无需类。轻量级框架将自动样式与一些可选的实用程序类相结合以进行定制，这增加了它们的使用的多功能性。

使用无类或轻类方法，您可以用一行、两行或三行快速解决 HTML 样式问题。

我们将在下面看到：

使用版本 8 中的 Ruby on Rails 框架，以及 Propshaft 和 Importmap；
认识具有HTML页面标准布局的文件；
创建内容并将其添加到 4 个 HTML 页面以测试 CSS 样式；
简要提及为页面创建的路线；
更改默认布局以包含指向所创建页面的链接；
通过复制文件到项目添加12个CSS框架；
了解如何识别CSS框架是否默认配置了浅色和深色模式；
后续步骤的建议；

启动一个新的 Rails 应用程序

rails命令之前的时间用于在命令执行结束时显示其执行时间。在下面的示例中，花费了 47 秒。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制

Rails 8 在其 No Build 理念中，默认情况下将使用 Propshaft 作为资产管道库，并使用 Importmap 作为 JavaScript 库。 Importmap 不执行任何类型的 JavaScript 处理。

使用 VSCode 或您喜欢的编辑器打开项目

$ cd classless-css-local && code .

登录后复制

了解默认的 Rails 布局 app/views/layouts/application.html.erb。

显示更多...

根据约定优于配置（CoC），Rails 使用 application.html.erb 作为默认布局来渲染所有页面；
Rails 8 中的原始文件必须与下面复制的文件具有相同或相似的内容：

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

登录后复制

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

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

显示更多...

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制

与创建控制器和上述操作过程中一样，还添加了路由，允许您访问从链接创建的任何操作
- 本地主机：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 页面。

$ cd classless-css-local && code .

登录后复制

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

显示铁路路线

显示更多...

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

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></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">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <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">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

登录后复制

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

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

登录后复制

也可以使用地址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标签的全部内容，如下图

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制

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

显示更多...

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

$ cd classless-css-local && code .

登录后复制

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

将 CSS 文件复制到项目并粘贴到 app/assets/stylesheets/

显示更多...

查阅有关 CSS 文件的 Rails 文档，我们可以看到我们需要按照以下几个步骤通过复制 CSS 文件来设置 Web 应用程序的样式：

将文件复制到 app/assets/stylesheets/ 文件夹或其中的子文件夹，例如 app/assets/stylesheets/classless
通过在 application.html.css 文件中使用正确的标签设置默认 Rails 布局来引用此文件，例如：
- 如果您的 css 文件位于 app/assets/stylesheets/mystylesheet.css 中，则必须添加标签 ;没有扩展名 .css;
- 如果您的 css 文件位于 app/assets/stylesheets/classless/mystylesheet.css，则必须添加标签没有扩展名 .css;

让我们在 app/assets/stylesheets 中创建一个无类子文件夹来复制从以下链接下载的 css 文件：

标准化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
简单 CSS： https://github.com/kevquirk/simple.css/blob/main/simple.css
无类 CSS： https://classless.de/classless.css
具体 CSS： https://github.com/louismerlin/concrete.css/blob/main/concrete.css
杏仁CSS： https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
野餐 CSS： https://github.com/franciscop/picnic/blob/master/picnic.css
YACCK CSS： https://github.com/sphars/yacck/blob/master/yacck.css
樱花CSS： https://github.com/oxalorg/sakura/blob/master/css/sakura.css
竹 CSS： https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
Bamboo CSS 只有缩小的文件。您可以使用 CSS Beautifier 和 Minifie 等服务对其进行格式化，使其更易于理解。粘贴左边的代码，右边得到格式化的文件。将文件重命名为bamboo.css。
将 Vanilla SCSS 转换为 Vanilla CSS：

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

登录后复制

将文件复制到 app/assets/stylesheets/classless/vanilla-framework/build/css/build.css 文件夹中，为了使代码更具可读性，请使用 CSS Beautifier & Minifie 网站服务。粘贴左边的代码，右边得到格式化的文件。将文件重命名为 vanilla.css 并将其剪切到 app/assets/stylesheets/classless 文件夹
删除 app/assets/stylesheets/classless/vanilla-framework/ 文件夹

重新打开 app/views/layouts/application.html.erb 页面以添加复制到项目中的无类 CSS 样式

显示更多...

注释掉行在

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制

为了

$ cd classless-css-local && code .

登录后复制

在下面的内容之后，加上注释行

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></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">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <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">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

登录后复制

在之前粘贴以下内容。您不需要所有这些样式，它们已被插入，以便您可以测试各种选项。

$ 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

登录后复制

大多数样式都被注释掉，除了 Normalize CSS 和 Pico CSS
保存文件并刷新页面或重启服务器
要测试 Pico CSS 以外的样式，请注释掉设置本地样式的行，在本例中为行并取消注释其他样式的行，例如 Simple CSS 行。
不要忘记要评论 ERB 标签，您需要在

现在是的，时尚的 HTML？

保存上面的样式表并启动 Rails 服务器后，您将看到使用所选 css 框架设置 HTML 样式。

深色模式

某些样式可以选择深色模式。要进行确认，请在颜色自定义选项中更改计算机的主题。在 Windows 中搜索打开应用程序的深色模式，并在深色或浅色模式之间切换。更换操作系统后HTML页面应该会自动改变，表明支持浅色和深色模式。

后续步骤

[x]根据自己的喜好排列样式；
[x] 使用项目 CSS 文件中的样式，而不使用 CDN；
[-] 使用 Rails Live Reload 动态更新浏览器中对项目所做的更改；
[-] 如果您想在前端多花一点时间，请查看您最喜欢的样式的自定义选项；
[-] 使用 Tailwind 复制无类 CSS 框架的功能；

参考

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

以上是Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light - Sem CDN的详细内容。更多信息请关注PHP中文网其他相关文章！