Rumah >hujung hadapan web >tutorial css >Ruby on Rails Front-end Rápido com Frameworks CSS Classless or 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" >
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.
$ rails -v Rails 8.0.0 $ time rails new classless-css-local ... real 0m47.500s user 0m33.052s sys 0m4.249s
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.
$ cd classless-css-local && code .
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"
>
Tunjukkan lagi…
$ rails -v
Rails 8.0.0
$ time rails new classless-css-local
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
Buka fail config/routes.rb dalam VSCode
$ cd classless-css-local && code .
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"
>
Ruby on Rails menggunakan seni bina MVC (Model-View-Controller) secara lalai untuk mula mengatur projek anda. Kebanyakan kod anda disusun dalam folder berikut:
Tunjukkan lagi…
$ rails -v
Rails 8.0.0
$ time rails new classless-css-local
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
Tunjukkan lagi…
$ cd classless-css-local && code .
Mari kita cipta subfolder tanpa kelas di dalam apl/aset/lembaran gaya untuk menyalin fail css yang dimuat turun daripada pautan di bawah: 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: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:
<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"
>
UNTUKTunjukkan lagi…
$ rails -v
Rails 8.0.0
$ time rails new classless-css-local
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
$ cd classless-css-local && code .
<!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>
$ 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
Selepas menyimpan helaian gaya di atas dan memulakan pelayan Rails, anda akan melihat HTML anda digayakan dengan rangka kerja css yang dipilih.
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.
[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;
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!