Ruby on Rails Frontend Rápido com Rangka Kerja CSS Tanpa Kelas atau Ringan Kelas-tutorial css-php.cn

Ruby on Rails Frontend Rápido com Frameworks CSS Classless ou Class-Light

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

Bagi mereka yang mempunyai kenalan pertama, nampaknya membingungkan dan mengelirukan untuk cuba memahami HTML yang mempunyai jujukan huruf dan nombor dengan kelas utiliti yang dipratentukan untuk menggunakan gaya pada HTML, contohnya:

<div>



<p><small>Copiado do site https://picocss.com</small></p>

<p>Os frameworks CSS que utilizam classes utilitárias são excelentes, versáteis, responsivos, elegantes e possuem muitas outras qualidades, mas o Tailwind CSS não é a única solução. <strong>Se você precisa de algo rápido e mais simples, usar um framework CSS classless ou class-light será uma solução melhor.</strong></p>

<p>Frameworks CSS classless estilizam elementos HTML diretamente, sem classes. Frameworks class-light combinam estilos automáticos com algumas classes utilitárias opcionais para personalização, o que adicionar maior versatilidade com seu uso.</p>

<p>Usando uma abordagem classless ou class-light você pode resolver a estilização do HTML de forma rápida com uma, duas ou três linhas.</p>

<h2>
  
  
  Veremos nesta série de artigos:
</h2>

<ul>
<li>A utilização do framework Ruby on Rails na versão 8, com Propshaft e Importmap;</li>
<li>Conheceremos brevemente o arquivo com o layout padrão das páginas HTML;</li>
<li>Criaremos 4 páginas HTML com vários elementos para testar a estilização com CSS;</li>
<li>Faremos um breve resumo sobre as rotas criadas para as páginas;</li>
<li>Vamos alterar o layout padrão para incluir o link para as páginas HTML criadas;</li>
<li>Saberemos como identificar se o frameworks CSS possui o modo light e dark configurados automaticamente por padrão;</li>
<li>Na parte 2, criaremos um projeto com 12 frameworks CSS via CDN ao layout padrão;</li>
<li>Na parte 3, criaremos um projeto com 12 frameworks CSS copiando os arquivos para o projeto;</li>
<li>Veremos também sugestões e novos desafios;</li>
</ul>

<h2>
  
  
  Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.
</h2>

<p><details>
  <summary>Exibir mais …</summary>
  <ul>
<li>Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout padrão para renderizar todas as páginas;</li>
<li>O Arquivo original no Rails 8 deve ter um conteúdo igual ou parecido com o copiado abaixo:
</li>
</ul>
<pre class="brush:php;toolbar:false"><!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

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;

Langkah Biasa

Sesetengah langkah adalah perkara biasa untuk semua artikel dalam siri ini dan ada di sini untuk memudahkan. Jangan risau, kami akan menerangkan dengan jelas dalam artikel seterusnya apabila langkah berikut harus diikuti.

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

Tunjukkan lagi…

$ 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

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.

root "pages#html_test_1"

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

<div>



<p><small>Copiado do site https://picocss.com</small></p>

<p>Os frameworks CSS que utilizam classes utilitárias são excelentes, versáteis, responsivos, elegantes e possuem muitas outras qualidades, mas o Tailwind CSS não é a única solução. <strong>Se você precisa de algo rápido e mais simples, usar um framework CSS classless ou class-light será uma solução melhor.</strong></p>

<p>Frameworks CSS classless estilizam elementos HTML diretamente, sem classes. Frameworks class-light combinam estilos automáticos com algumas classes utilitárias opcionais para personalização, o que adicionar maior versatilidade com seu uso.</p>

<p>Usando uma abordagem classless ou class-light você pode resolver a estilização do HTML de forma rápida com uma, duas ou três linhas.</p>

<h2>
  
  
  Veremos nesta série de artigos:
</h2>

<ul>
<li>A utilização do framework Ruby on Rails na versão 8, com Propshaft e Importmap;</li>
<li>Conheceremos brevemente o arquivo com o layout padrão das páginas HTML;</li>
<li>Criaremos 4 páginas HTML com vários elementos para testar a estilização com CSS;</li>
<li>Faremos um breve resumo sobre as rotas criadas para as páginas;</li>
<li>Vamos alterar o layout padrão para incluir o link para as páginas HTML criadas;</li>
<li>Saberemos como identificar se o frameworks CSS possui o modo light e dark configurados automaticamente por padrão;</li>
<li>Na parte 2, criaremos um projeto com 12 frameworks CSS via CDN ao layout padrão;</li>
<li>Na parte 3, criaremos um projeto com 12 frameworks CSS copiando os arquivos para o projeto;</li>
<li>Veremos também sugestões e novos desafios;</li>
</ul>

<h2>
  
  
  Conhecendo o layout padrão do Rails app/views/layouts/application.html.erb.
</h2>

<p><details>
  <summary>Exibir mais …</summary>
  <ul>
<li>Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout padrão para renderizar todas as páginas;</li>
<li>O Arquivo original no Rails 8 deve ter um conteúdo igual ou parecido com o copiado abaixo:
</li>
</ul>
<pre class="brush:php;toolbar:false"><!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

$ 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

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

root "pages#html_test_1"

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

$ rails routes -c pages
           Prefix Verb URI Pattern                  Controller#Action
pages_html_test_1 GET  /pages/html_test_1(.:format) pages#html_test_1
pages_html_test_2 GET  /pages/html_test_2(.:format) pages#html_test_2
pages_html_test_3 GET  /pages/html_test_3(.:format) pages#html_test_3
pages_html_test_4 GET  /pages/html_test_4(.:format) pages#html_test_4

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

Atas ialah kandungan terperinci Ruby on Rails Frontend Rápido com Rangka Kerja CSS Tanpa Kelas atau Ringan Kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!