Ruby on Rails 프론트엔드 빠른 속도 프레임워크 CSS Classless 또는 Class-Light

웹 개발을 시작하고 프론트엔드 전문 분야가 아닌 경우, 가장 고통스러울 수 있는 장벽 중 하나는 보기 흉한 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">

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

    

    
    

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

    
    
    
  

  
    
  

• … 페이지가 올바르게 렌더링되고 작동하는 데 중요한 구조적 요소가 있습니다. 헤드 태그는 페이지 동작(자바스크립트 사용), 모양(CSS 사용), 다른 시스템 및 서비스와의 관계, CSRF 및 CSP 보호와 같은 보안 설정을 구성하는 데 도움이 되는 중요한 메타데이터 및 리소스를 포함하는 데 사용됩니다.
• 페이지의 주요 콘텐츠는 , ERB 태그 를 통해. 이 태그는 Rails가 동적으로 렌더링한 뷰의 콘텐츠를 포함하는 통합 지점 역할을 합니다.

일반적인 단계

일부 단계는 시리즈의 모든 기사에 공통적으로 적용되며 단순화하기 위해 여기에 있습니다. 걱정하지 마십시오. 다음 단계를 따라야 하는 시기는 다음 문서에서 명확히 설명하겠습니다.

 

컨트롤러 페이지와 html_test_1, html_test_2, html_test_3 및 html_test_4 작업을 사용하여 테스트 페이지를 생성합니다.

더보기…

$ 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

• 위의 컨트롤러 및 작업을 생성하는 동안 경로도 추가되어 링크에서 생성된 모든 작업에 액세스할 수 있습니다.
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4

 

VSCode에서 config/routes.rb 파일을 엽니다.

• 페이지 루트를 이전에 생성된 컨트롤러 페이지와 html_test_1 작업으로 연결하려면 파일 끝에 아래 줄을 포함하세요. 따라서 웹 사이트나 시스템에 액세스할 때 표시되는 첫 번째 페이지는 컨트롤러 페이지의 html_test_1 페이지가 됩니다. 그렇지 않으면 기본 레일 페이지가 표시됩니다.

root "pages#html_test_1"

• 컨트롤러를 생성할 때 --skip-routes 매개변수를 전달한 경우 생성된 작업에 경로 추가를 무시했을 수 있습니다. 전체 명령은 Rails g Controller Pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes가 됩니다.

 

Rails 경로 표시

더보기…

터미널을 사용하면 예를 들어 컨트롤러 페이지에서 컨트롤러를 지정하여(-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">

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

    

    
    

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

    
    
    
  

  
    
  

또는 다음을 사용하여 모든 경로를 표시할 수도 있습니다

$ 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

• 주소 http://127.0.0.1:3000/rails/info/routes를 사용하여 브라우저를 통해 경로에 액세스할 수도 있습니다. bin/dev를 사용하여 개발 서버를 시작하거나 프로젝트 루트 디렉터리에서 레일 서버를 사용하여 표준 레일 서버를 시작하는 것을 잊지 마십시오. 개발 서버는 사용자가 사용할 수 있도록 필요한 처리를 수행하기 위해 자바스크립트 파일 및 CSS 파일의 변경 사항을 "수신"합니다.
• 이러한 파일을 변경하고 브라우저에서 즉시 보려면 Rails Livre Reload와 같은 gem을 설치해야 합니다.

CSS 스타일을 테스트하기 위해 HTML 콘텐츠가 포함된 4개의 페이지를 만들어 보겠습니다.

Ruby on Rails는 기본적으로 MVC(Model-View-Controller) 아키텍처를 사용하여 프로젝트 구성을 시작합니다. 대부분의 코드는 다음 폴더에 구성되어 있습니다.

• 코드가 도메인/비즈니스 로직 및 데이터와 관련된 경우 app/models 폴더에 보관하세요.
• 뷰와 관련된 코드(HTML, JSON, XML 등...)는 앱/뷰에 있습니다.
• 요청 수명 주기와 관련된 코드는 앱/컨트롤러에 있습니다.

 

html_test_1 페이지의 내용을 삽입하세요.

더보기…

• https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html 링크에 접속하여 아래와 같이 메인 태그의 내용을 모두 복사하세요.

root "pages#html_test_1"

Rails 서버를 시작하고 보기 흉한 일반 HTML을 보시겠습니까?

더보기…

• bin/dev로 Rails 개발 서버를 시작하거나 Rails 서버로 표준 서버를 시작하고 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

• 페이지를 열면 상단에 이전에 생성한 html_test_1, html_test_2, html_test_3 및 html_test_4 페이지에 추가한 4개의 링크가 표시됩니다.
• 지금까지 작업이 너무 많았습니다. 각각을 열면 HTML이 아직 CSS로 스타일이 지정되지 않았음을 알 수 있습니다. 다음 작업을 수행하겠습니다.