Ruby on Rails 快速前端使用零 CSS 作為無類別 CSS 框架-css教學-PHP中文網

建立新的 Rails 應用程式

使用 VSCode 或您喜歡的編輯器開啟專案

建立一些頁面來查看 HTML 元素的樣式

將 CSS Zero 加入您的專案

第 1 部分 - 修改 app/assets/stylesheets/base.css 檔案

第 2 部分 - 修改 app/assets/stylesheets/button.css 文件

第 3 部分 - 修改 app/assets/stylesheets/input.css 檔案

調整 app/views/layouts/application.html.erb 文件

現在，使用 CSS Zero 作為無類別框架來設定 HTML 樣式 ?

暗黑模式

後續步驟

參考文獻

首頁

web前端

css教學

Ruby on Rails 快速前端使用零 CSS 作為無類別 CSS 框架

Patricia Arquette

Jan 22, 2025 am 04:18 AM

Ruby on Rails Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless

本文與本系列之前的文章非常相似，但這次我們將使用一個新創建的優秀 CSS 框架 CSS Zero，它可以用於 "無需構建" 的項目或需要 "構建" 的 Ruby on Rails 應用。

要注意的是，CSS Zero 框架的目標並非成為一個完全無類別或輕量級無類別框架。本文中建議的修改僅用於測試，旨在無需添加任何類別的情況下為本教程的 HTML 頁面中的所有元素設定樣式。

因此，某些 HTML 元素的格式可能與 CSS Zero 框架建議的樣式、設計、版面配置和行為不符。若要查看 CSS Zero 框架的預期效果，請造訪 CSS Zero 的 Lookbook：[此處新增 Lookbook 連結]。若要查看其作為無類別框架的運作效果，請依照下列步驟操作。

建立新的 Rails 應用程式

rails new 指令之前的 time 用來顯示指令執行的總時間。以下範例耗時 47 秒。

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

登入後複製

Rails 8 基於其「無需建置」的理念，預設使用 Propshaft 作為資源管道庫，使用 Importmap 作為 JavaScript 程式庫。 Importmap 不執行任何 JavaScript 處理。

使用 VSCode 或您喜歡的編輯器開啟專案

<code>$ cd classless-css-zero && code .</code>

登入後複製

建立一些頁面來查看 HTML 元素的樣式

頁面位於本系列第一篇文章中的「常見步驟」部分。

將 CSS Zero 加入您的專案

展開…

請按照以下步驟將 CSS Zero 加入您的專案：

<code>$ bundle add css-zero
$ bin/rails generate css_zero:install</code>

登入後複製

要查看可用的元件，請執行以下命令：

<code>$ bin/rails generate css_zero:add --help</code>

登入後複製

要新增所有元件，請執行以下命令：

<code>bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share</code>

登入後複製

請注意，如果新增了其他元件或刪除了某些元件，上述指令將會失效。

第 1 部分 - 修改 `app/assets/stylesheets/base.css` 檔案

展開…

在 Headings 連結中，我們可以看到許多樣式化的元素需要包含在一個有 `<div>` 的元素中。

<code><div>
  ...
</div></code>

登入後複製

為了在不使用 <div> 的情況下對這些 HTML 元素進行樣式設置，我們將進行如下修改。

<code>body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;

  /* 无类配置测试 */
  font-size: var(--text-fluid-base);
  /* max-inline-size: 65ch; */

  /* 抗锯齿字体 */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-extrabold);
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.5em;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}</code>

登入後複製

開啟 app/assets/stylesheets/base.css 文件，找到 body { 行，並將複製的內容貼到 text-rendering: optimizeLegibility; 後面。貼上後，刪除或註解掉 max-inline-size: 65ch; 行。 body 的內容應與上面的範例相同。

接下來，開啟 app/assets/stylesheets/prose.css 文件，複製包含以下內容的部分：

<code>/* 无类配置测试 */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.8em;
  }

  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }

  :is(b, strong) {
    font-weight: var(--font-bold);
  }

  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded);
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }

  code {
    padding: 0.1em 0.3em;
  }

  pre {
    border-radius: 0.5em;
    overflow-x: auto;
    padding: 0.5lh 2ch;
    text-wrap: nowrap;
  }

  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }

  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }

  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }

  blockquote p {
    hyphens: none;
  }

  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }

  th {
    font-weight: var(--font-bold);
  }

  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }

  th {
    border-block-end-width: 3px;
  }

  del {
    background-color: rgb(from var(--color-negative) r g b / .1);
    color: var(--color-negative);
  }

  ins {
    background-color: rgb(from var(--color-positive) r g b / .1);
    color: var(--color-positive);
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }</code>

登入後複製

將上述內容貼到 app/assets/stylesheets/base.css 檔案的結尾。

第 2 部分 - 修改 `app/assets/stylesheets/button.css` 文件

展開…

修改 `.btn` CSS 類，使所有 HTML 按鈕元素自動使用此樣式。

將：

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

登入後複製

改為：

<code>$ cd classless-css-zero && code .</code>

登入後複製

第 3 部分 - 修改 `app/assets/stylesheets/input.css` 檔案

展開…

修改 `.input` CSS 類，使所有 HTML 輸入元素自動使用此樣式。類似地，修改 `.checkbox`, `.radio`, `.range` 選擇器使其套用於所有對應的HTML標籤。具體修改方法與第二部分類似，請參考第二部分的修改方式進行。

調整 `app/views/layouts/application.html.erb` 文件

展開…

根據您在 `application.html.erb` 中放置測試 HTML 檔案引用的位置，連結的顯示方式會有所不同。如果您希望演示效果與教學課程相同，請修改相應部分。

現在，使用 CSS Zero 作為無類別框架來設定 HTML 樣式 ?

配置 CSS Zero 並進行上述自訂後，啟動 Rails 伺服器，您將看到已設定樣式的 HTML。

暗黑模式

某些樣式具有暗黑模式選項。若要確認這一點，請在電腦的色彩個人化設定中變更主題。在 Windows 中搜尋“啟用應用程式的暗黑模式”，並在暗黑模式和亮模式之間切換。更改作業系統設定後，HTML 頁面應自動更改，表示它支援亮模式和暗模式。

後續步驟

[x] 依照您的喜好組織樣式； [x] 使用專案中的 CSS 檔案進行樣式設置，不使用 CDN； [x] 使用 Tailwind 複製無類 CSS 框架的功能； [-] 使用 Rails Live Reload 在瀏覽器中動態更新項目中的變更； [-] 如果您想在前端上花費更多時間，請檢查您喜歡的樣式的自訂選項；