Ruby on Rails 프론트엔드 빠른 속도 프레임워크 CSS Classless 또는 Class-Light
- DDD원래의
- 2025-01-23 02:09:12249검색
웹 개발을 시작하고 프론트엔드 전문 분야가 아닌 경우, 가장 고통스러울 수 있는 장벽 중 하나는 보기 흉한 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>
- … 페이지가 올바르게 렌더링되고 작동하는 데 중요한 구조적 요소가 있습니다. 헤드 태그는 페이지 동작(자바스크립트 사용), 모양(CSS 사용), 다른 시스템 및 서비스와의 관계, CSRF 및 CSP 보호와 같은 보안 설정을 구성하는 데 도움이 되는 중요한 메타데이터 및 리소스를 포함하는 데 사용됩니다.
- 페이지의 주요 콘텐츠는
위 내용은 Ruby on Rails 프론트엔드 빠른 속도 프레임워크 CSS Classless 또는 Class-Light의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Tailwind로 CSS 아트 사용해 보기다음 기사：Tailwind로 CSS 아트 사용해 보기