Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light Usando CDN-css教程-PHP中文网

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

如果您开始进行网络开发并且您的重点不是专注于前端，那么最痛苦的障碍之一就是能够轻松地设计您的样式丑陋的 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 样式；
简要提及为页面创建的路线；
更改默认布局以包含指向所创建页面的链接；
通过 CDN 添加 12 个 CSS 框架到默认布局；
了解如何识别CSS框架是否默认配置了浅色和深色模式；
后续步骤的建议；

启动一个新的 Rails 应用程序

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

$ rails -v
Rails 8.0.0

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

登录后复制

Rails 8 在其 No Build 理念下，默认情况下将使用 Propshaft 作为资产管道库，并使用 Importmap 作为 JavaScript 库。我们要求您使用 --skip-test 跳过测试库。
如有必要，您可以通过传递 --javascript esbuild 参数，使用 esbuild 处理 JavaScript。 Importmap 不会对 JavaScript 执行任何构建或任何类型的处理。

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

$ cd classless-css-cdn && 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-cdn --skip-test
...
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-cdn && 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-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制

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

显示更多...

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

$ cd classless-css-cdn && code .

登录后复制

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

重新打开 app/views/layouts/application.html.erb 页面以通过 CDN 包含无类 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"
>

登录后复制

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

$ rails -v
Rails 8.0.0

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

登录后复制

大多数样式都被注释掉，除了 Normalize CSS 和 Pico CSS
保存文件并刷新页面或重启服务器
要测试 Pico CSS 以外的样式，请注释掉配置样式 CDN 的行，在本例中为行并取消注释其他样式的行，例如 Simple CSS 行。
要使用 VSCode 注释和取消注释一行，请使用 Ctrl K C 组合键。

现在是的，时尚的 HTML？

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

深色模式

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

后续步骤

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

参考

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 Usando CDN的详细内容。更多信息请关注PHP中文网其他相关文章！