Rumah >hujung hadapan web >tutorial css >Ruby on Rails Fast Frontend Menggunakan Zero CSS sebagai Rangka Kerja CSS Tanpa Kelas
Artikel ini hampir sama dengan artikel sebelumnya dalam siri ini, tetapi kali ini kami akan menggunakan rangka kerja CSS cemerlang CSS Zero yang baru dicipta, yang boleh digunakan untuk projek "tiada binaan" atau aplikasi Ruby on Rails yang memerlukan "bina" .
Perlu diambil perhatian bahawa rangka kerja CSS Zero tidak bertujuan untuk menjadi rangka kerja tanpa kelas atau ringan sepenuhnya. Pengubahsuaian yang dicadangkan dalam artikel ini adalah untuk tujuan ujian sahaja dan direka bentuk untuk menggayakan semua elemen dalam halaman HTML tutorial ini tanpa menambah sebarang kelas.
Akibatnya, pemformatan beberapa elemen HTML mungkin tidak sepadan dengan gaya, reka bentuk, reka letak dan gelagat yang disyorkan oleh rangka kerja CSS Zero. Untuk melihat perkara yang diharapkan daripada rangka kerja CSS Zero, lawati buku tinjauan CSS Zero: [Tambah pautan buku tinjauan di sini]. Untuk melihatnya dalam tindakan sebagai rangka kerja tanpa kelas, ikut langkah di bawah.
rails new
time
sebelum arahan digunakan untuk memaparkan jumlah masa pelaksanaan arahan. Contoh berikut mengambil masa 47 saat. <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, berdasarkan falsafah "tiada binaan diperlukan", menggunakan Propshaft sebagai pustaka saluran paip sumber dan Importmap sebagai pustaka JavaScript secara lalai. Importmap tidak melakukan sebarang pemprosesan JavaScript.
<code>$ cd classless-css-zero && code .</code>
Halaman ini terletak di bahagian "Langkah Biasa" artikel pertama dalam siri ini.
<code>$ bundle add css-zero $ bin/rails generate css_zero:install</code>
Untuk melihat komponen yang tersedia, jalankan arahan berikut:
<code>$ bin/rails generate css_zero:add --help</code>
Untuk menambah semua komponen, jalankan arahan berikut:
<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>
Sila ambil perhatian bahawa arahan di atas tidak akan berfungsi jika komponen lain ditambah atau beberapa komponen dialih keluar.
app/assets/stylesheets/base.css
fail<code><div> ... </div></code>
Untuk menggayakan elemen HTML ini tanpa menggunakan <div>
kami akan membuat pengubahsuaian berikut.
<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>
Buka fail app/assets/stylesheets/base.css
, cari baris body {
dan tampal kandungan yang disalin selepas text-rendering: optimizeLegibility;
. Selepas menampal, padamkan atau ulas baris max-inline-size: 65ch;
. Kandungan body
hendaklah sama seperti contoh di atas.
Seterusnya, buka fail app/assets/stylesheets/prose.css
dan salin bahagian yang mengandungi:
<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>
Tampal di atas ke dalam app/assets/stylesheets/base.css
hujung fail .
app/assets/stylesheets/button.css
failakan:
<code>$ rails -v Rails 8.0.0 $ time rails new classless-css-zero ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
ditukar kepada:
<code>$ cd classless-css-zero && code .</code>
app/assets/stylesheets/input.css
Failapp/views/layouts/application.html.erb
failSelepas mengkonfigurasi CSS Zero dan membuat penyesuaian di atas, mulakan pelayan Rails dan anda akan melihat HTML yang digayakan.
Sesetengah gaya mempunyai pilihan mod gelap. Untuk mengesahkan ini, 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.
[x] Susun gaya mengikut pilihan anda; [x] Gunakan fail CSS dalam projek untuk penggayaan dan bukannya CDN; [x] Gunakan Tailwind untuk meniru kefungsian rangka kerja CSS tanpa kelas; [-] 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;
RujukanAtas ialah kandungan terperinci Ruby on Rails Fast Frontend Menggunakan Zero CSS sebagai Rangka Kerja CSS Tanpa Kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!