如果您剛開始 Web 開發，並且您的重點不是專注於前端，那麼最痛苦的障礙之一就是能夠輕鬆地設計醜陋的 HTML 樣式。
對於第一次接觸的人來說，嘗試理解具有一系列字母和數字的HTML 並使用預定義的實用程式類別將樣式應用於HTML 似乎是神秘且令人困惑的，例如：
<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>
一些步驟對於該系列中的所有文章都是通用的，這裡是為了簡化。別擔心，我們會在接下來的文章中明確說明何時應遵循以下步驟。
顯示更多...
$ 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
在 VSCode 中開啟 config/routes.rb 文件
root "pages#html_test_1"
使用終端，您可以透過指定控制器（使用 -c）來顯示路由，例如從控制器頁面 或您可以使用顯示更多...
<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>
顯示所有路線
$ 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
Ruby on Rails 預設使用 MVC（模型-視圖-控制器）架構來開始組織您的專案。您的大部分程式碼都組織在以下資料夾中：
顯示更多...
root "pages#html_test_1"
顯示更多...
$ 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
以上是Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light的詳細內容。更多資訊請關注PHP中文網其他相關文章！
