Ruby on Rails - Frontend rapide avec frameworks CSS Classless ou Classlight-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Ruby on Rails - Frontend rapide avec frameworks CSS Classless ou Classlight

Dec 16, 2024 pm 07:07 PM

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

Démarrer une nouvelle application Rails

Le temps avant la commande rails est utilisé pour afficher son temps d'exécution à la fin de l'exécution de la commande. Dans l'exemple ci-dessous, cela a pris 47 secondes.

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copier après la connexion

Ouvrez le projet avec VSCode ou votre éditeur préféré

$ cd classless-css &amp;&amp; code .

Copier après la connexion

Connaître la mise en page principale standard Rails app/views/layouts/application.html.erb.

Afficher plus…

Par convention sur la configuration (CoC), Rails utilise application.html.erb comme mise en page principale pour afficher toutes les pages ;
Le fichier original dans Rails 8.0.0 doit avoir un contenu identique ou similaire à celui copié ci-dessous :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;%= content_for(:title) || "Classless Css" %&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="mobile-web-app-capable" content="yes"&gt;
    &lt;%= csrf_meta_tags %&gt;
    &lt;%= csp_meta_tag %&gt;

    &lt;%= yield :head %&gt;

    &lt;%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %&gt;
    &lt;%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %&gt;

    &lt;link rel="icon" href="/icon.png" type="image/png"&gt;
    &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
    &lt;link rel="apple-touch-icon" href="/icon.png"&gt;

    &lt;%# Includes all stylesheet files in app/assets/stylesheets %&gt;
    &lt;%= stylesheet_link_tag :app, "data-turbo-track": "reload" %&gt;
    &lt;%= javascript_importmap_tags %&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;%= yield %&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

La partie supérieure de la <tête> … </tête> 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 <body> </body>, via la balise ERB <%= rendement %> . Cette balise sert de point d'intégration pour inclure le contenu d'une vue rendue dynamiquement par Rails ;

Générer des pages de test, avec des pages de contrôleur 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

Copier après la connexion

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.

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copier après la connexion

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 ferroviaires

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

$ cd classless-css &amp;&amp; code .

Copier après la connexion

Ou vous pouvez afficher tous les itinéraires avec

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;%= content_for(:title) || "Classless Css" %&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="mobile-web-app-capable" content="yes"&gt;
    &lt;%= csrf_meta_tags %&gt;
    &lt;%= csp_meta_tag %&gt;

    &lt;%= yield :head %&gt;

    &lt;%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %&gt;
    &lt;%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %&gt;

    &lt;link rel="icon" href="/icon.png" type="image/png"&gt;
    &lt;link rel="icon" href="/icon.svg" type="image/svg+xml"&gt;
    &lt;link rel="apple-touch-icon" href="/icon.png"&gt;

    &lt;%# Includes all stylesheet files in app/assets/stylesheets %&gt;
    &lt;%= stylesheet_link_tag :app, "data-turbo-track": "reload" %&gt;
    &lt;%= javascript_importmap_tags %&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;%= yield %&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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 telle que Rails Livre Reload.

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

Insérez le contenu de la page pour l'action 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 ci-dessous

$ 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

Copier après la connexion

Démarrez le serveur Rails et voyez du HTML pur et laid ?

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

root "pages#html_test_1"

Copier après la connexion

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.

Ouvrez à nouveau la page app/views/layouts/application.html.erb pour inclure les styles CSS sans classe via CDN

Afficher plus…

Après le contenu ci-dessous

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copier après la connexion

Et avant </head>, collez le contenu suivant. Vous n'avez pas besoin de tous ces styles, ils ont été insérés pour que vous puissiez tester différentes options.

$ cd classless-css &amp;&amp; code .

Copier après la connexion

La plupart des styles sont commentés, à l'exception de Normalize CSS et Pico CSS
Enregistrez le fichier et actualisez la page ou redémarrez le serveur

Maintenant oui, HTML avec style ?

Après avoir enregistré les feuilles de style ci-dessus et

Mode sombre

Certains styles ont l'option du mode sombre. Pour confirmer, changez le thème de votre ordinateur dans les options de personnalisation

Prochaines étapes

Organisez les styles selon vos préférences ;
Si vous souhaitez passer un peu plus de temps sur le frontend, consultez les options de personnalisation de votre style préféré ;
Mettre à jour dynamiquement les modifications apportées au projet dans le navigateur à l'aide de Rails Live Reload ;
Utiliser le style des fichiers CSS du projet, sans utiliser CDN ;
Répliquer la capacité du framework CSS sans classe avec Tailwind ;

Références

Test

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!

Déclaration de ce site Web

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