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中文網其他相關文章！