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

创建新的 Rails 应用

• time 命令在 rails serve 命令执行完毕后显示执行时间。下例显示执行时间为 47 秒。

$ rails -v
Rails 8.0.0

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

Rails 8 基于其“无需构建”理念，默认使用 Propshaft 作为资源管道库，使用 Importmap 作为 JavaScript 库。Importmap 不会对 JavaScript 进行任何处理。

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

$ cd classless-css-cdn && code .

创建一些页面来查看 HTML 元素的样式

页面位于系列文章第一篇中的“常见步骤”部分。

再次打开 app/views/layouts/application.html.erb 文件，通过 CDN 引用无类 CSS 样式

展开更多…

- 在以下内容之后

• 以及 </head> 之前，粘贴以下内容。您无需使用所有这些样式，它们是为了让您可以测试多种选项而添加的。

     <!-- 不同浏览器之间可能存在不同的边距或字体 -->

    <link href="https://cdn.jsdelivr.net/npm/normalize.css" rel="stylesheet"></link><link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link> %>
      %>



     %>



     %>



     %>



     %>



     %>



     %>



     %>




    <link href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" rel="stylesheet"></link><link href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" rel="stylesheet"></link> %>



     %>

• 大多数样式都被注释掉了，除了 Normalize CSS 和 Pico CSS。
• 保存文件并刷新页面或重启服务器。
• 要测试不同于 Pico CSS 的样式，请注释掉设置样式 CDN 的行（即 <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link>），并取消注释其他样式的行，例如 Simple CSS 的行。
• 在 VSCode 中注释和取消注释一行，可以使用快捷键 Ctrl K C。

使用基于 CDN 的无类 CSS 框架进行 HTML 样式设置 ?

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

暗黑模式

某些样式具有暗黑模式 (dark mode) 选项。要确认，请在您的计算机的色彩个性化设置中更改主题。在 Windows 中搜索“启用应用的暗黑模式”，并在暗黑模式和亮模式之间切换。更改操作系统设置后，HTML 页面应该会自动更改，表明它支持亮模式和暗黑模式。

后续步骤

[-] 根据您的喜好整理样式； [-] 使用项目中的 CSS 文件进行样式设置，无需使用 CDN； [-] 使用 Rails Live Reload 在浏览器中动态更新项目中的更改； [-] 如果您想花更多时间在前端，请查看您喜欢的样式的自定义选项； [-] 使用 Tailwind 复制无类 CSS 框架的功能；

参考资料

• https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
• https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
• https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
• https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
• https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
• https://www.php.cn/link/c48eb27d5b0a288f5bbf1545c218e001

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