Rumah >hujung hadapan web >tutorial css >Ruby on Rails Fast Frontend Menggunakan Zero CSS sebagai Rangka Kerja CSS Tanpa Kelas

Ruby on Rails Fast Frontend Menggunakan Zero CSS sebagai Rangka Kerja CSS Tanpa Kelas

Patricia Arquette
Patricia Arquetteasal
2025-01-22 04:18:14689semak imbas

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

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.

Buat apl Rails baharu

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

Buka projek menggunakan VSCode atau editor kegemaran anda

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

Buat beberapa halaman untuk melihat gaya elemen HTML

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

Tambahkan CSS Zero pada projek anda

Kembangkan…Ikuti langkah ini untuk menambah CSS Zero pada projek anda:
<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.

Bahagian 1 - Ubah suai app/assets/stylesheets/base.css fail

Kembangkan…Dalam pautan Tajuk, kita dapat melihat bahawa banyak elemen penggayaan perlu disertakan dalam elemen dengan `<div>`.
<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 .

Bahagian 2 - Ubah suai app/assets/stylesheets/button.css fail

Kembangkan…Ubah suai kelas CSS `.btn` supaya semua elemen butang HTML menggunakan gaya ini secara automatik.

akan:

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

Bahagian 3 - Ubah suai app/assets/stylesheets/input.css Fail

Kembangkan…Ubah suai kelas CSS `.input` supaya semua elemen input HTML menggunakan gaya ini secara automatik. Begitu juga, ubah suai pemilih `.checkbox`, `.radio`, `.range` supaya ia digunakan pada semua teg HTML yang sepadan. Kaedah pengubahsuaian khusus adalah serupa dengan bahagian kedua, sila rujuk kaedah pengubahsuaian di bahagian kedua.

Laraskan app/views/layouts/application.html.erb fail

Kembangkan…Pautan akan muncul secara berbeza bergantung pada tempat dalam `application.html.erb` anda meletakkan rujukan kepada fail HTML ujian. Jika anda mahu demo kelihatan sama seperti tutorial, sila ubah suai bahagian yang sepadan.

Sekarang, gunakan CSS Zero sebagai rangka kerja tanpa kelas untuk menggayakan HTML?

Selepas mengkonfigurasi CSS Zero dan membuat penyesuaian di atas, mulakan pelayan Rails dan anda akan melihat HTML yang digayakan.

Mod Gelap

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.

Langkah Seterusnya

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

Rujukan

    https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f
  • https://guides.rubyonrails.org/layouts_and_rendering.html
  • 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

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Memperkenalkan Pemilih CSSArtikel seterusnya:Memperkenalkan Pemilih CSS

Artikel berkaitan

Lihat lagi