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

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

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

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 melalui CDN pada reka letak lalai;
• 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-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Rails 8, dalam falsafah No Buildnya, akan menggunakan Propshaft secara lalai sebagai pustaka saluran paip aset dan Importmap sebagai pustaka JavaScript Kami meminta anda melangkau perpustakaan ujian dengan --skip-test.
Jika perlu, anda boleh memproses JavaScript anda menggunakan esbuild dengan menghantar parameter --javascript esbuild. Importmap tidak melakukan sebarang binaan atau sebarang jenis pemprosesan pada JavaScript.

Buka projek dengan VSCode atau editor pilihan anda

$ cd classless-css-cdn && code .

 

Mengetahui apl 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"
>

• 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-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

• 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-cdn && code .

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

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

• 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, simpannya 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-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

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-cdn && code .

• 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

Buka semula halaman app/views/layouts/application.html.erb untuk memasukkan gaya CSS tanpa kelas melalui CDN

Tunjukkan lagi…

• Selepas kandungan 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"
>

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

$ rails -v
Rails 8.0.0

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

• 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 mengkonfigurasi CDN gaya, dalam kes ini baris dan nyahtanda baris daripada gaya lain, contohnya, baris CSS Mudah.
• Untuk mengulas dan menyahkomen baris dengan VSCode, gunakan kombinasi kekunci Ctrl K C.

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 dalam Windows untuk Dayakan mod gelap untuk apl dan tukar antara mod gelap atau terang dan halaman HTML berubah secara automatik selepas perubahan dalam sistem pengendalian al.

Langkah seterusnya

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

Rujukan

• 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 Usando CDN. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!