Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 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">
</summary>

使用实用类的 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">
</summary>

• 内的顶部部分… 头>它们具有页面渲染和正常运行的重要结构元素。 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）来显示路由，例如从控制器页面

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

    
    
    
  

  
    
  

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

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

• 也可以使用地址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">
</summary>

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

$ 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中文网其他相关文章！