Heim >Web-Frontend >CSS-Tutorial >Ruby on Rails Frontend schnell mit Frameworks CSS Classless oder Class-Light
Ruby on Rails Frontend schnell mit Frameworks CSS Classless oder Class-Light
- DDDOriginal
- 2025-01-23 02:09:12249Durchsuche
Wenn Sie mit der Webentwicklung beginnen und sich nicht auf das Frontend spezialisieren möchten, besteht eine der Hürden, die am schmerzhaftesten sein kann, darin, Ihr hässliches HTML einfach formatieren zu können.
Für diejenigen, die den ersten Kontakt haben, erscheint es rätselhaft und verwirrend, zu versuchen, HTML zu verstehen, das eine Folge von Buchstaben und Zahlen mit vordefinierten Hilfsklassen zum Anwenden von Stilen auf HTML enthält, zum Beispiel:
<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>
- Der obere Teil im … Sie verfügen über die wichtigen Strukturelemente für die korrekte Darstellung und Funktion der Seite. Das Head-Tag wird verwendet, um wichtige Metadaten und Ressourcen einzuschließen, die dabei helfen, das Verhalten der Seite (mit Javascript), ihr Erscheinungsbild (mit CSS), ihre Beziehung zu anderen Systemen und Diensten sowie Sicherheitseinstellungen wie den Schutz für CSRF und CSP zu konfigurieren ;
- Der Hauptinhalt der Seiten wird innerhalb von gerendert. , über das ERB-Tag <%= yield %>. Dieses Tag dient als Integrationspunkt, um den Inhalt einer von Rails dynamisch gerenderten Ansicht einzuschließen.
Gemeinsame Schritte
Einige Schritte gelten für alle Artikel der Serie und dienen der Vereinfachung. Keine Sorge, wir werden in den nächsten Artikeln klarstellen, wann die folgenden Schritte befolgt werden sollten.
Testseiten generieren, mit einem Controller-Seiten und den Aktionen html_test_1, html_test_2, html_test_3 und html_test_4
Mehr anzeigen…
$ 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
Öffnen Sie die Datei config/routes.rb in VSCode
root "pages#html_test_1"
Anzeige von Rails-Routen
Mit dem Terminal können Sie die Routen durch Angabe eines Controllers (mit -c) anzeigen, beispielsweise von Controller-Seiten Oder Sie können sich mitMehr anzeigen…
<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>
alle Routen anzeigen lassen
$ 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
Lassen Sie uns vier Seiten mit HTML-Inhalten erstellen, um die CSS-Stile zu testen.
Ruby on Rails verwendet standardmäßig die MVC-Architektur (Model-View-Controller), um mit der Organisation Ihres Projekts zu beginnen. Ein Großteil Ihres Codes ist in den folgenden Ordnern organisiert:
- Wenn sich der Code auf Domänen-/Geschäftslogik und Daten bezieht, bewahren Sie ihn im Ordner „app/models“ auf;
- Der mit der Ansicht verknüpfte Code (HTML, JSON, XML usw.) befindet sich in app/views;
- Code, der sich auf den Anforderungslebenszyklus bezieht, befindet sich in App/Controllern;
Fügen Sie den Inhalt der Seite html_test_1 ein
Mehr anzeigen…
root "pages#html_test_1"
Starten Sie den Rails-Server und sehen Sie das hässliche einfache HTML?
Mehr anzeigen…
$ 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
Das obige ist der detaillierte Inhalt vonRuby on Rails Frontend schnell mit Frameworks CSS Classless oder Class-Light. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!