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

建立新的 Rails 應用程式

• time 指令在 rails serve 指令執行完畢後顯示執行時間。下例顯示執行時間為 47 秒。

<code class="language-bash">$ rails -v
Rails 8.0.0

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

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

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

<code class="language-bash">$ cd classless-css-cdn && code .</code>

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

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

再開啟 app/views/layouts/application.html.erb 文件，透過 CDN 引用無類 CSS 樣式

展開更多…

- 在以下內容之後

<code class="language-html">


</code>

• 以及 </head> 之前，貼上以下內容。您無需使用所有這些樣式，它們是為了讓您可以測試多種選項而添加的。

<code class="language-html">

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

    <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> %>



     %></code>

• 大多數樣式都被註解掉了，除了 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中文網其他相關文章！