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

首頁

web前端

css教學

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

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 框架的功能；