


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…
<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"
>
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
Buka fail config/routes.rb dalam VSCode
$ cd classless-css-cdn && code .
Memaparkan laluan Rel
Menggunakan terminal anda boleh memaparkan laluan dengan menentukan pengawal (dengan -c), contohnya dari halaman pengawal Atau anda boleh memaparkan semua laluan denganTunjukkan lagi…
<!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>
<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"
>
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…
$ 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…
$ cd classless-css-cdn && code .
Buka semula halaman app/views/layouts/application.html.erb untuk memasukkan gaya CSS tanpa kelas melalui CDN
Tunjukkan lagi…
<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"
>
$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas











Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda

Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula

Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s

Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas
