Ruby on Rails Frontend Rápido com Frameworks CSS Classless or Class-Light com CDN

Buat apl Rails baharu

Perintah
• time memaparkan masa pelaksanaan selepas perintah rails serve dilaksanakan. Contoh berikut menunjukkan masa pelaksanaan selama 47 saat.

<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, berdasarkan falsafah "tiada binaan diperlukan", menggunakan Propshaft sebagai pustaka saluran paip sumber dan Importmap sebagai pustaka JavaScript secara lalai. Importmap tidak melakukan apa-apa dengan JavaScript.

Buka projek menggunakan VSCode atau editor kegemaran anda

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

Buat beberapa halaman untuk melihat gaya elemen HTML

Halaman ini terletak di bahagian "Langkah Biasa" artikel pertama dalam siri ini.

Buka fail app/views/layouts/application.html.erb sekali lagi dan rujuk gaya CSS tanpa kelas melalui CDN

Kembangkan lagi…

- selepas

<code class="language-html">


</code>

Sebelum
• dan </head>, tampal yang berikut. Anda tidak perlu menggunakan semua gaya ini ditambah supaya anda boleh menguji pelbagai pilihan.

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

• Kebanyakan gaya diulas, kecuali Normalize CSS dan Pico CSS.
• Simpan fail dan muat semula halaman atau mulakan semula pelayan.
• Untuk menguji gaya yang berbeza daripada Pico CSS, ulas baris yang menetapkan gaya CDN (iaitu <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link>), dan nyahtanda baris untuk gaya lain, seperti baris untuk CSS Mudah.
• Untuk mengulas dan menyahkomen baris dalam VSCode, anda boleh menggunakan kekunci pintasan Ctrl K C.

Penggayaan HTML menggunakan rangka kerja CSS tanpa kelas berasaskan CDN?

Sebaik sahaja anda menyimpan helaian gaya di atas dan memulakan pelayan Rails anda, anda akan melihat gaya HTML menggunakan rangka kerja CSS tanpa kelas pilihan anda.

Mod Gelap

Sesetengah gaya mempunyai pilihan mod gelap. Untuk mengesahkan, tukar tema dalam tetapan pemperibadian warna komputer anda. Cari Windows untuk "dayakan mod gelap untuk apl" dan togol antara mod gelap dan mod terang. Selepas menukar tetapan sistem pengendalian, halaman HTML harus berubah secara automatik untuk menunjukkan bahawa ia menyokong mod terang dan mod gelap.

Langkah Seterusnya

[-] Susun gaya mengikut keutamaan anda; [-] Gunakan fail CSS dalam projek untuk penggayaan tanpa menggunakan CDN; [-] Gunakan Rails Live Reload untuk mengemas kini perubahan secara dinamik dalam projek anda dalam penyemak imbas; [-] Jika anda ingin meluangkan lebih banyak masa di bahagian hadapan, lihat pilihan penyesuaian untuk gaya kegemaran anda; [-] Gunakan Tailwind untuk meniru kefungsian rangka kerja CSS tanpa kelas;

参考资料

• 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

Atas ialah kandungan terperinci Ruby on Rails Frontend Rápido com Frameworks CSS Classless or Class-Light com CDN. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!