Maison >interface Web >tutoriel CSS >Ruby on Rails Frontend Rapide avec Frameworks CSS Classless ou Class-Light

Ruby on Rails Frontend Rapide avec Frameworks CSS Classless ou Class-Light

DDDoriginal: 2025-01-23 02:09:12286parcourir

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

Si vous débutez dans le développement Web et que votre objectif n'est pas de vous spécialiser dans le frontend, l'un des obstacles qui peuvent être les plus douloureux est de pouvoir styliser facilement votre laid HTML.

Pour ceux qui ont un premier contact, il semble énigmatique et déroutant d'essayer de comprendre le HTML qui comporte une séquence de lettres et de chiffres avec des classes utilitaires prédéfinies pour appliquer des styles au HTML, par exemple :

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

La partie supérieure de la … ils possèdent les éléments structurels importants pour que la page soit rendue et fonctionne correctement. La balise head est utilisée pour inclure des métadonnées et des ressources importantes qui aident à configurer le comportement de la page (avec javascript), son apparence (avec CSS), sa relation avec d'autres systèmes et services et les paramètres de sécurité tels que la protection contre CSRF et CSP ;
Le contenu principal des pages sera rendu dans , via la balise ERB <%= rendement %>. Cette balise sert de point d'intégration pour inclure le contenu d'une vue rendue dynamiquement par Rails ;

Étapes courantes

Certaines étapes sont communes à tous les articles de la série et sont là pour simplifier. Ne vous inquiétez pas, nous préciserons dans les prochains articles quand les étapes suivantes doivent être suivies.

Générer des pages de test, avec un contrôleur de pages et les actions html_test_1, html_test_2, html_test_3 et html_test_4

Afficher plus…

$ 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

Comme lors de la création du contrôleur et des actions ci-dessus, les itinéraires ont également été ajoutés, permettant d'accéder à n'importe quelle action créée à partir des liens
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

Ouvrez le fichier config/routes.rb dans VSCode

Incluez la ligne ci-dessous à la fin du fichier pour diriger la racine de la page vers les pages du contrôleur précédemment créées et l'action html_test_1. Ainsi, la première page à afficher lors de l'accès à votre site Web ou système sera la page html_test_1, issue des pages du contrôleur. Sinon, il afficherait la page des rails par défaut.

root "pages#html_test_1"

Vous auriez pu ignorer l'ajout des routes aux actions créées si vous aviez passé le paramètre --skip-routes lors de la création du contrôleur. La commande complète deviendrait les pages du contrôleur Rails G html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Affichage des itinéraires Rails

Afficher plus…

A l'aide du terminal vous pouvez afficher les routes en spécifiant un contrôleur (avec -c), par exemple depuis les pages du contrôleur

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

Ou vous pouvez afficher tous les itinéraires avec

$ 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

Il est également possible d'accéder aux itinéraires via le navigateur en utilisant l'adresse http://127.0.0.1:3000/rails/info/routes. N'oubliez pas de démarrer le serveur de développement avec bin/dev ou le serveur rails standard avec le serveur rails depuis le répertoire racine de votre projet. Le serveur de développement « écoute » les modifications des fichiers javascript et css pour effectuer les traitements nécessaires pour les mettre à disposition des utilisateurs.
Pour que les modifications de ces fichiers soient apportées et visualisées instantanément dans le navigateur, il est nécessaire d'installer une gemme comme Rails Livre Reload.

Créons quatre pages avec du contenu HTML pour tester les styles CSS.

Ruby on Rails utilise l'architecture MVC (Model-View-Controller) par défaut pour commencer à organiser votre projet. Une grande partie de votre code est organisée dans les dossiers suivants :

Lorsque le code est lié à la logique et aux données du domaine/métier, conservez-le dans le dossier app/models ;
Le code lié à la vue (HTML, JSON, XML, etc...) sera dans app/views ;
Le code lié au cycle de vie de la requête sera dans app/controllers ;

Insérer le contenu de la page html_test_1

Afficher plus…

Accédez au lien https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html et copiez tout le contenu de la balise principale, comme indiqué ci-dessous

root "pages#html_test_1"

Démarrez le serveur Rails et voyez le vilain HTML simple ?

Afficher plus…

Démarrez le serveur de développement Rails avec bin/dev ou le serveur standard avec le serveur Rails et ouvrez le navigateur à 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

Après avoir ouvert la page, vous verrez en haut les quatre liens que nous avons ajoutés aux pages html_test_1, html_test_2, html_test_3 et html_test_4 que nous avons créées précédemment.
Tant de travail jusqu'à présent. Ouvrez chacun d'eux et vous remarquerez que le HTML n'a pas encore été stylisé avec du CSS, ce que nous ferons ensuite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript ruby mvc ruby on rails json css html csrf nio xml class dom github vscode http https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Essayer l'art CSS avec TailwindArticle suivant：Essayer l'art CSS avec Tailwind

Articles Liés

Voir plus