社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 css教程 Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light - Sem CDN

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

DDD
DDD
Dec 24, 2024 pm 05:11 PM

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

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前 By DDD
如何修复KB5055523无法在Windows 11中安装？
3 周前 By DDD
Inzoi：如何申请学校和大学
4 周前 By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前 By DDD
在哪里可以找到Atomfall中的站点办公室钥匙
4 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7876
15
Java教程
1649
14
CakePHP 教程
1409
52
Laravel 教程
1301
25
PHP教程
1245
29
显示更多
Related knowledge
VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局！恭喜Vue团队完成了完成，我知道这是一项巨大的努力，而且很长时间。所有新文档也是如此。

您可以从浏览器获得有效的CSS属性值吗？ 您可以从浏览器获得有效的CSS属性值吗？ Apr 02, 2025 pm 06:17 PM

我有人写了这个非常合法的问题。 Lea只是在博客上介绍了如何从浏览器中获得有效的CSS属性。那样的是这样。

在CI/CD上有点 在CI/CD上有点 Apr 02, 2025 pm 06:21 PM

我说的“网站”比“移动应用程序”更合适，但我喜欢Max Lynch的框架：

带有粘性定位的堆叠卡和一点点的杂物 带有粘性定位的堆叠卡和一点点的杂物 Apr 03, 2025 am 10:30 AM

前几天，我发现了科里·金尼文（Corey Ginnivan）网站上的这一点，当您滚动时，彼此之间的卡片堆放集。

在WordPress块编辑器中使用Markdown和本地化 在WordPress块编辑器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我们需要直接在WordPress编辑器中向用户显示文档，那么最佳方法是什么？

比较浏览器的响应式设计 比较浏览器的响应式设计 Apr 02, 2025 pm 06:25 PM

这些桌面应用程序中有许多目标是同时在不同的维度上显示您的网站。因此，例如，您可以写作

如何将CSS网格用于粘头和页脚 如何将CSS网格用于粘头和页脚 Apr 02, 2025 pm 06:29 PM

CSS网格是一系列属性的集合，旨在使布局比以往任何时候都容易。像任何东西一样，那里有一点学习曲线，但是网格是

为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”？ 为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”？ Apr 05, 2025 pm 05:51 PM

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时，你可能会遇到一些令人困惑的现象，比如在开发者工具（d...

See all articles