Ruby on Rails Front-end Rapide avec Frameworks CSS Classless ou Class-Light en utilisant CDN

Si vous commencez à développer pour le Web et que votre objectif n'est pas de vous spécialiser dans le front-end, l'un des obstacles les plus douloureux est de pouvoir facilement styliser votre HTML moche.

Pour ceux qui ont le premier contact, c'est quelque chose d'énigmatique, de mystique, de surnaturel d'essayer de comprendre le HTML qui a une séquence de lettres et de chiffres avec des classes utilitaires prédéfinies pour appliquer des styles au HTML, par exemple :

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

Les frameworks CSS qui utilisent des classes utilitaires sont excellents, polyvalents, réactifs, élégants et possèdent de nombreuses autres qualités, mais Tailwind CSS n'est pas la seule solution. Si vous avez besoin de quelque chose de rapide et de plus simple, utiliser un framework CSS sans classe ou léger en classe sera une meilleure solution.

Les frameworks CSS sans classes stylisent les éléments HTML directement, sans classes. Les frameworks Class-light combinent des styles automatiques avec certaines classes utilitaires facultatives pour la personnalisation, ce qui ajoute une plus grande polyvalence à leur utilisation.

En utilisant une approche sans classe ou légère, vous pouvez rapidement résoudre le style HTML avec une, deux ou trois lignes.

Nous verrons ci-dessous :

• Utilisation du framework Ruby on Rails en version 8, avec Prop Shaft et Importmap ;
• Apprendre à connaître le fichier avec la mise en page standard des pages HTML ;
• Création et ajout de contenu à 4 pages HTML pour tester le style avec CSS ;
• Une brève mention des itinéraires créés pour les pages;
• Modifiez la mise en page par défaut pour inclure le lien vers les pages créées ;
• Ajoutez 12 frameworks CSS via CDN à la mise en page par défaut ;
• Savoir identifier si les frameworks CSS ont les modes clair et sombre configurés par défaut ;
• Suggestions pour les prochaines étapes ;

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-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Rails 8, dans sa philosophie No Build, utilisera par défaut Prop Shaft comme bibliothèque de pipeline d'actifs et Importmap comme bibliothèque JavaScript. Nous vous demandons d'ignorer la bibliothèque de test avec --skip-test.
Si nécessaire, vous pouvez traiter votre JavaScript à l'aide d'esbuild en passant le paramètre --javascript esbuild. Importmap n'effectue aucune construction ni aucun type de traitement sur JavaScript.

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

$ cd classless-css-cdn && code .

 

Connaître la mise en page Rails par défaut app/views/layouts/application.html.erb.

Afficher plus…

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

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

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

 

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 -v
Rails 8.0.0

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

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

$ cd classless-css-cdn && code .

• 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

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

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

• 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 des fichiers 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

$ rails -v
Rails 8.0.0

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

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

$ cd classless-css-cdn && code .

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

Rouvrez 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

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

• Et avant , 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.

$ rails -v
Rails 8.0.0

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

• 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
• Pour tester un style autre que Pico CSS, commentez la ligne qui configure le CDN du style, en l'occurrence la ligne et décommentez la ligne d'un autre style, par exemple, la ligne Simple CSS.
• Pour commenter et décommenter une ligne avec VSCode, utilisez la combinaison de touches Ctrl K C.

Maintenant oui, du HTML élégant ?

Après avoir enregistré les feuilles de style ci-dessus et démarré le serveur Rails, vous verrez votre HTML stylisé avec les frameworks CSS choisis.

Mode sombre

Certains styles ont l'option du mode sombre. Pour confirmer, changez le thème de votre ordinateur dans les options de personnalisation des couleurs. Recherchez dans Windows Activer le mode sombre pour les applications et basculez entre le mode sombre ou clair et la page HTML change automatiquement après le changement de système d'exploitation al.

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 à l'aide de Tailwind ;

Références

• https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
• https://prismic.io/blog/best-css-frameworks
• https://saeedesmaili.com/notes/classless-css-libraries/
• https://dev.to/logrocket/comparing-classless-css-frameworks-3267
• https://github.com/dbohdan/classless-css
• https://github.com/troxler/awesome-css-frameworks

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!