Ruby on Rails Front-end Rápido com Frameworks CSS Classless or Class-Light

Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light - Sem CDN

Artikel ini sengaja hampir serupa dengan yang sebelumnya yang berkaitan dengan subjek yang sama, tetapi menggunakan CDN untuk rangka kerja CSS, namun, dalam artikel ini kami akan menggunakan fail CSS secara setempat, disalin ke folder projek.

Jika anda memulakan pembangunan web dan tumpuan anda bukan untuk mengkhususkan diri dalam bahagian hadapan, salah satu halangan yang paling menyakitkan ialah dapat dengan mudah menggayakan HTML hodoh anda.

Bagi mereka yang mempunyai kenalan pertama, ia adalah sesuatu yang membingungkan, mistik, ghaib yang cuba memahami HTML yang mempunyai urutan huruf dan nombor dengan kelas utiliti yang telah ditetapkan untuk menggunakan gaya pada HTML, contohnya:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Salin selepas log masuk

Rangka kerja CSS yang menggunakan kelas utiliti adalah sangat baik, serba boleh, responsif, elegan dan mempunyai banyak kualiti lain, tetapi Tailwind CSS bukanlah satu-satunya penyelesaian. Jika anda memerlukan sesuatu yang cepat dan mudah, menggunakan rangka kerja CSS tanpa kelas atau kelas ringan akan menjadi penyelesaian yang lebih baik.

Elemen HTML gaya Rangka Kerja CSS Tanpa Kelas secara langsung, tanpa kelas. Rangka kerja ringan kelas menggabungkan gaya automatik dengan beberapa kelas utiliti pilihan untuk penyesuaian, yang menambahkan fleksibiliti yang lebih besar kepada penggunaannya.

Menggunakan pendekatan tanpa kelas atau kelas ringan, anda boleh menyelesaikan penggayaan HTML dengan cepat dengan satu, dua atau tiga baris.

Kita akan lihat di bawah:

Penggunaan rangka kerja Ruby on Rails dalam versi 8, dengan Propshaft dan Importmap;
Mengenal fail dengan susun atur standard halaman HTML;
Membuat dan menambah kandungan pada 4 halaman HTML untuk menguji penggayaan dengan CSS;
Sebutan ringkas tentang laluan yang dibuat untuk halaman;
Tukar reka letak lalai untuk memasukkan pautan ke halaman yang dibuat;
Tambahkan 12 rangka kerja CSS dengan menyalin fail ke projek;
Tahu cara untuk mengenal pasti sama ada rangka kerja CSS mempunyai mod terang dan gelap yang dikonfigurasikan secara lalai;
Cadangan untuk langkah seterusnya;

Mulakan aplikasi Rails baharu

Masa sebelum arahan rel digunakan untuk memaparkan masa pelaksanaannya pada akhir pelaksanaan arahan. Dalam contoh di bawah, ia mengambil masa 47 saat.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Salin selepas log masuk

Rails 8, dalam falsafah No Buildnya, akan menggunakan Propshaft sebagai pustaka saluran paip aset secara lalai dan Importmap sebagai pustaka JavaScript. Importmap tidak melakukan sebarang jenis pemprosesan JavaScript.

Buka projek dengan VSCode atau editor pilihan anda

$ cd classless-css-local && code .

Salin selepas log masuk

Mengetahui aplikasi susun atur Rails lalai/views/layouts/application.html.erb.

Tunjukkan lagi…

Mengikut Konvensyen atas Konfigurasi (CoC), Rails menggunakan application.html.erb sebagai reka letak lalai untuk memaparkan semua halaman;
Fail asal dalam Rails 8 mesti mempunyai kandungan yang sama atau serupa seperti yang disalin di bawah:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Salin selepas log masuk

Bahagian atas dalam … ia mempunyai elemen struktur yang penting untuk halaman tersebut dipaparkan dan berfungsi dengan betul. Teg kepala digunakan untuk memasukkan metadata dan sumber penting yang membantu mengkonfigurasi gelagat halaman (dengan javascript), penampilannya (dengan CSS), hubungannya dengan sistem dan perkhidmatan lain dan tetapan keselamatan seperti perlindungan untuk CSRF dan CSP ;
Kandungan utama halaman akan dipaparkan di dalam , melalui teg ERB <%= hasil %>. Teg ini berfungsi sebagai titik integrasi untuk memasukkan kandungan pandangan yang dipaparkan secara dinamik oleh Rails;

Hasilkan halaman ujian, dengan halaman pengawal dan tindakan html_test_1, html_test_2, html_test_3 dan html_test_4

Tunjukkan lagi…

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Salin selepas log masuk

Seperti semasa penciptaan pengawal dan tindakan di atas, laluan juga telah ditambah, membolehkan anda mengakses sebarang tindakan yang dibuat daripada pautan
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

Buka fail config/routes.rb dalam VSCode

Sertakan baris di bawah pada penghujung fail untuk mengarahkan punca halaman ke halaman pengawal yang dibuat sebelum ini dan html_test_1 tindakan. Oleh itu, halaman pertama yang akan dipaparkan semasa mengakses tapak web atau sistem anda ialah halaman html_test_1, daripada halaman pengawal. Jika tidak, ia akan memaparkan halaman rel lalai.

$ cd classless-css-local && code .

Salin selepas log masuk

Anda boleh mengabaikan menambah laluan pada tindakan yang dibuat jika anda telah melepasi parameter --skip-routes semasa mencipta pengawal. Perintah penuh akan menjadi rails g controller page html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Memaparkan laluan Rel

Tunjukkan lagi…

Menggunakan terminal anda boleh memaparkan laluan dengan menentukan pengawal (dengan -c), contohnya dari halaman pengawal

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Salin selepas log masuk

Atau anda boleh memaparkan semua laluan dengan

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Salin selepas log masuk

Ia juga mungkin untuk mengakses laluan melalui penyemak imbas menggunakan alamat http://127.0.0.1:3000/rails/info/routes. Jangan lupa untuk memulakan pelayan pembangunan dengan bin/dev atau pelayan rel standard dengan pelayan rel daripada direktori akar projek anda. Pelayan pembangunan sedang "mendengar" untuk perubahan dalam fail javascript dan fail css untuk menjalankan pemprosesan yang diperlukan untuk menjadikannya tersedia kepada pengguna.
Untuk perubahan pada fail ini dibuat dan dilihat serta-merta dalam penyemak imbas, adalah perlu untuk memasang permata seperti Rails Livre Reload.

Mari buat empat halaman dengan kandungan HTML untuk menguji gaya CSS.

Ruby on Rails menggunakan seni bina MVC (Model-View-Controller) secara lalai untuk mula mengatur projek anda. Kebanyakan kod anda disusun dalam folder berikut:

Apabila kod itu berkaitan dengan logik domain/perniagaan dan data, simpan ia dalam folder apl/model;
Kod yang berkaitan dengan paparan (HTML, JSON, XML, dll...) akan berada dalam apl/paparan;
Kod yang berkaitan dengan kitaran hayat permintaan, akan berada dalam apl/pengawal;

Masukkan kandungan halaman html_test_1

Tunjukkan lagi…

Akses pautan https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html dan salin semua kandungan teg utama, seperti yang ditunjukkan di bawah

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Salin selepas log masuk

Mulakan pelayan Rails dan lihat HTML biasa yang hodoh?

Tunjukkan lagi…

Mulakan pelayan pembangunan Rails dengan bin/dev atau pelayan standard dengan pelayan rails dan buka penyemak imbas pada 127.0.0.1:3000

$ cd classless-css-local && code .

Salin selepas log masuk

Selepas membuka halaman, anda akan melihat di bahagian atas empat pautan yang kami tambahkan pada halaman html_test_1, html_test_2, html_test_3 dan html_test_4 yang kami buat sebelum ini.
Begitu banyak kerja setakat ini. Buka setiap satu dan anda akan perasan bahawa HTML belum lagi digayakan dengan mana-mana CSS, yang akan kami lakukan seterusnya

Salin fail CSS anda ke projek anda dan tampal ke dalam app/assets/stylesheets/

Tunjukkan lagi…

Berunding dengan dokumentasi Rails pada fail CSS, kami dapat melihat bahawa kami perlu mengikuti beberapa langkah untuk menggayakan aplikasi web kami dengan menyalin fail CSS:

Salin fail ke apl/aset/lembaran gaya/ folder atau ke subfolder di dalamnya, contohnya, apl/aset/lembaran gaya/tanpa kelas
Rujuk fail ini dengan menetapkan reka letak Rails lalai dalam fail application.html.css dengan teg yang betul, contohnya:
- Jika fail css anda terdapat dalam app/assets/stylesheets/mystylesheet.css, anda mesti menambah teg <%= stylesheet_link_tag "mystylesheet" %> tanpa sambungan .css;
- Jika fail css anda terdapat dalam app/assets/stylesheets/classless/mystylesheet.css, anda mesti menambah teg <%= stylesheet_link_tag "classless/mystylesheet" %> tanpa sambungan .css;

Mari kita cipta subfolder tanpa kelas di dalam apl/aset/lembaran gaya untuk menyalin fail css yang dimuat turun daripada pautan di bawah:

Normalkan CSS: https://necolas.github.io/normalize.css/latest/normalize.css
Pico CSS: https://github.com/picocss/pico/blob/main/css/pico.css
CSS MVP: https://andybrewer.github.io/mvp/mvp.css
Chota CSS: https://github.com/jenil/chota/blob/main/dist/chota.css
CSS ringkas: https://github.com/kevquirk/simple.css/blob/main/simple.css
CSS Tanpa Kelas: https://classless.de/classless.css
CSS Konkrit: https://github.com/louismerlin/concrete.css/blob/main/concrete.css
Almond CSS: https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
CSS Berkelah: https://github.com/franciscop/picnic/blob/master/picnic.css
YACCK CSS: https://github.com/sphars/yacck/blob/master/yacck.css
CSS Sakura: https://github.com/oxalorg/sakura/blob/master/css/sakura.css
CSS Buluh: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
Bamboo CSS hanya mempunyai fail yang dikecilkan. Anda boleh memformatkannya untuk menjadikannya lebih mudah difahami menggunakan perkhidmatan seperti CSS Beautifier & Minifie. Tampalkan kod di sebelah kiri dan dapatkan fail yang diformat di sebelah kanan. Namakan semula fail kepada bamboo.css.
Menukar Vanila SCSS kepada Vanila CSS:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Salin selepas log masuk

Salin fail ke dalam folder app/assets/stylesheets/classless/vanilla-framework/build/css/build.css dan untuk menjadikan kod lebih mudah dibaca, gunakan perkhidmatan tapak web CSS Beautifier & Minifie. Tampalkan kod di sebelah kiri dan dapatkan fail yang diformat di sebelah kanan. Namakan semula fail kepada vanilla.css dan potong ke folder app/assets/stylesheets/classless
Padamkan apl/aset/lembaran gaya/tanpa kelas/rangka kerja vanila/ folder

Buka semula halaman app/views/layouts/application.html.erb untuk menambah gaya CSS tanpa kelas yang disalin pada projek

Tunjukkan lagi…

Ulas baris <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> memasukkan # selepas <% supaya Rails tidak memuatkan semua gaya sekali gus. Untuk membatalkan ulasan, alih keluar #. Jika anda menggunakan pintasan VSCode Ctrl K C untuk mengulas, baris itu tidak akan diulas dengan betul. PERUBAHAN DARIPADA:

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Salin selepas log masuk

UNTUK

$ cd classless-css-local && code .

Salin selepas log masuk

Selepas kandungan di bawah, dengan baris ulasan

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Salin selepas log masuk

Dan sebelum
, tampalkan kandungan berikut. Anda tidak memerlukan semua gaya ini, ia telah dimasukkan supaya anda boleh menguji pelbagai pilihan.

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

Salin selepas log masuk

Kebanyakan gaya diulas, kecuali Normalize CSS dan Pico CSS
Simpan fail dan muat semula halaman atau mulakan semula pelayan
Untuk menguji gaya selain Pico CSS, ulas baris yang menetapkan gaya setempat, dalam kes ini baris <%= stylesheet_link_tag "classless/pico" %> dan nyahtanda baris daripada gaya lain, contohnya, baris CSS Mudah.
Jangan lupa bahawa untuk mengulas pada tag ERB anda perlu memasukkan # selepas <%. Untuk membatalkan ulasan, alih keluar #. Jika anda menggunakan pintasan VSCode Ctrl K C untuk mengulas, baris itu tidak akan diulas dengan betul.

Sekarang ya, HTML yang bergaya?

Selepas menyimpan helaian gaya di atas dan memulakan pelayan Rails, anda akan melihat HTML anda digayakan dengan rangka kerja css yang dipilih.

Mod gelap

Sesetengah gaya mempunyai pilihan untuk mod gelap. Untuk mengesahkan, tukar tema komputer anda dalam pilihan penyesuaian warna. Cari Windows untuk Hidupkan mod gelap untuk apl dan togol antara mod gelap atau terang. Halaman HTML harus berubah secara automatik selepas menukar sistem pengendalian, menunjukkan bahawa ia menyokong mod terang dan gelap.

Langkah seterusnya

[x] Susun gaya mengikut pilihan anda;
[x] Gunakan penggayaan daripada fail CSS projek, tanpa menggunakan CDN;
[-] Kemas kini secara dinamik perubahan yang dibuat pada projek dalam penyemak imbas menggunakan Rails Live Reload;
[-] Jika anda ingin meluangkan sedikit masa lagi di bahagian hadapan, lihat pilihan penyesuaian untuk gaya kegemaran anda;
[-] Tiru keupayaan rangka kerja CSS tanpa kelas menggunakan Tailwind;

Rujukan

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 Front-end Rápido com Frameworks CSS Classless or Class-Light - Sem CDN. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!