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

Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light - Sem CDN

Cet article est volontairement très similaire au précédent qui traite du même sujet, mais utilisait du CDN pour les frameworks CSS, cependant, dans cet article nous utiliserons des fichiers CSS localement, copiés dans le dossier du projet.

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

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

Copier après la connexion

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 en copiant les fichiers dans le projet ;
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-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Copier après la connexion

Rails 8, dans le cadre de sa philosophie No Build, utilisera Prop Shaft comme bibliothèque de pipeline d'actifs par défaut et Importmap comme bibliothèque JavaScript. Importmap n'effectue aucun type de traitement JavaScript.

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

$ cd classless-css-local && code .

Copier après la connexion

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

Copier après la connexion

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

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.

$ cd classless-css-local && code .

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

Copier après la connexion

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

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

Copier après la connexion

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-local && code .

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.

Copiez vos fichiers CSS dans votre projet et collez-les dans app/assets/stylesheets/

Afficher plus…

En consultant la documentation Rails sur les fichiers CSS, nous pouvons voir qu'il faut suivre quelques étapes pour styliser notre application web en copiant les fichiers CSS :

Copiez le fichier dans le dossier app/assets/stylesheets/ ou dans un sous-dossier de celui-ci, par exemple, app/assets/stylesheets/classless
Référencez ce fichier en définissant la disposition Rails par défaut dans le fichier application.html.css avec la balise correcte, par exemple :
- Si votre fichier CSS se trouvait dans app/assets/stylesheets/mystylesheet.css, vous devez ajouter la balise <%= stylesheet_link_tag "mystylesheet" %> sans l'extension .css;
- Si votre fichier CSS se trouvait dans app/assets/stylesheets/classless/mystylesheet.css, vous devez ajouter la balise <%= stylesheet_link_tag "classless/mystylesheet" %> sans l'extension .css;

Créons un sous-dossier sans classe dans app/assets/stylesheets pour copier les fichiers CSS téléchargés à partir des liens ci-dessous :

Normaliser CSS : https://necolas.github.io/normalize.css/latest/normalize.css
Pico CSS : https://github.com/picocss/pico/blob/main/css/pico.css
MVP CSS : https://andybrewer.github.io/mvp/mvp.css
Chota CSS : https://github.com/jenil/chota/blob/main/dist/chota.css
CSS simple : https://github.com/kevquirk/simple.css/blob/main/simple.css
CSS sans classe : https://classless.de/classless.css
CSS concret : https://github.com/louismerlin/concrete.css/blob/main/concrete.css
CSS amande : https://github.com/alvaromontoro/almond.css/blob/master/dist/almond.css
CSS pique-nique : https://github.com/franciscop/picnic/blob/master/picnic.css
YACCK CSS : https://github.com/sphars/yacck/blob/master/yacck.css
Sakura CSS : https://github.com/oxalorg/sakura/blob/master/css/sakura.css
CSS en bambou : https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
Bamboo CSS n'a que le fichier minifié. Vous pouvez les formater pour les rendre plus faciles à comprendre à l'aide de services comme CSS Beautifier & Minifie. Collez le code à gauche et récupérez le fichier formaté à droite. Renommez le fichier en bambou.css.
Conversion de Vanilla SCSS en Vanilla CSS :

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

Copier après la connexion

Copiez le fichier dans le dossier app/assets/stylesheets/classless/vanilla-framework/build/css/build.css et pour rendre le code plus lisible, utilisez le service de site Web CSS Beautifier & Minifie. Collez le code à gauche et récupérez le fichier formaté à droite. Renommez le fichier en vanilla.css et coupez-le dans le dossier app/assets/stylesheets/classless
Supprimez le dossier app/assets/stylesheets/classless/vanilla-framework/

Rouvrez la page app/views/layouts/application.html.erb pour ajouter les styles CSS sans classe copiés dans le projet

Afficher plus…

Commentez la ligne <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> en insérant un # après le <% afin que Rails ne charge pas tous les styles en même temps. Pour décommenter, supprimez le #. Si vous utilisez les raccourcis VSCode Ctrl K C pour commenter, la ligne ne sera pas correctement commentée. CHANGEMENT DE :

$ rails -v
Rails 8.0.0

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

Copier après la connexion

POUR

$ cd classless-css-local && code .

Copier après la connexion

Après le contenu ci-dessous, avec la ligne commentée

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

Copier après la connexion

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

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 définit le style local, dans ce cas la ligne <%= stylesheet_link_tag "classless/pico" %> et décommentez la ligne d'un autre style, par exemple, la ligne Simple CSS.
N'oubliez pas que pour commenter les balises ERB vous devez insérer un # après le <%. Pour décommenter, supprimez le #. Si vous utilisez les raccourcis VSCode Ctrl K C pour commenter, la ligne ne sera pas correctement commentée.

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. La page HTML devrait changer automatiquement après le changement de système d'exploitation, indiquant qu'elle prend en charge les modes clair et sombre.

Prochaines étapes

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