Frontend rapide Ruby on Rails utilisant Tailwind comme framework CSS sans classe-tutoriel CSS-php.cn

Ruby on Rails Frontend Rápido Usando Tailwind como um Frameworks CSS Classless

Cet article est très similaire aux articles précédents de cette série, mais cette fois nous utiliserons le framework Tailwind comme framework CSS sans classe.

Créer une nouvelle application Rails

rails serve Le time avant la commande permet d'afficher la durée totale d'exécution de la commande. L'exemple suivant a pris 47 secondes.

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Copier après la connexion

Rails 8 utilise Prop Shaft comme bibliothèque de pipeline de ressources et Importmap comme bibliothèque JavaScript par défaut, en fonction de sa philosophie « No Build ». Importmap n'effectue aucun traitement JavaScript.

Ouvrez le projet à l'aide de VSCode ou de votre éditeur préféré

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Copier après la connexion

Comprendre la disposition par défaut de Rails `app/views/layouts/application.html.erb`

Développer…

- Suivant le principe de la convention sur la configuration (CoC), Rails utilise `application.html.erb` comme mise en page par défaut pour afficher toutes les pages ; - Le contenu du fichier original dans Rails 8 doit être identique ou similaire à :

<code>$ cd classless-css-tailwind && code .</code>

Copier après la connexion

<head> contient des éléments structurels importants pour le rendu des pages et leur bon fonctionnement. <head> Utilisé pour contenir des métadonnées et des ressources importantes qui aident à configurer le comportement de la page (à l'aide de JavaScript), l'apparence (à l'aide de CSS), l'association avec d'autres systèmes et services et les paramètres de sécurité tels que la protection CSRF et CSP ; Le contenu principal de la page
via la balise ERB. Cette balise sert de point d'intégration pour contenir le contenu de la vue rendu dynamiquement par Rails <body> ;

Générer une page de test à l'aide du contrôleur

et des actions `pages`, `html_test_1`, `html_test_2` et `html_test_3html_test_4`

Agrandir…

```bash $ rails g pages du contrôleur html_test_1 html_test_2 html_test_3 html_test_4 créer app/controllers/pages_controller.rb route récupère "pages/html_test_1" récupérez "pages/html_test_2" récupérez "pages/html_test_3" récupérez "pages/html_test_4" invocateurb créer une application/des vues/des pages créer app/views/pages/html_test_1.html.erb créer app/views/pages/html_test_2.html.erb créer app/views/pages/html_test_3.html.erb créer app/views/pages/html_test_4.html.erb appeler l'assistant créer 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

Utilisez VSCode pour ouvrir le

fichier`config/routes.rb`

et l'action pages créée précédemment. De cette façon, lors de l'accès à votre site Web ou à votre système, la première page affichée sera la page html_test_1 du pages contrôleur. Sinon, la page par défaut de Rails sera affichée. html_test_1

<code class="language-html">
    <title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link></code>

Copier après la connexion

est passé lors de la création du contrôleur, vous pouvez ignorer l'ajout de routes pour l'action créée.La commande complète deviendra rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Afficher les itinéraires Rails

Développer…

À l'aide du terminal, vous pouvez spécifier un contrôleur (en utilisant `-c`) pour afficher l'itinéraire, par exemple le contrôleur `pages` :

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Copier après la connexion

Vous pouvez également utiliser la commande suivante pour afficher tous les itinéraires :

<code>$ cd classless-css-tailwind && code .</code>

Copier après la connexion

Vous pouvez également accéder à l'itinéraire via votre 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 en utilisant bin/dev ou le standard rails server à la racine du projet. Le serveur de développement « écoute » les modifications apportées aux fichiers JavaScript et aux fichiers CSS pour effectuer le traitement nécessaire pour les transmettre à l'utilisateur.
Pour que les modifications apportées à ces fichiers soient immédiatement exécutées et visualisées dans le navigateur, une gemme comme Rails Live Reload doit être installée.

Nous allons créer quatre pages avec du contenu HTML pour tester les styles CSS.

Ruby on Rails utilise par défaut l'architecture MVC (Model-View-Controller) pour lancer l'organisation du projet. La plupart du code est organisé dans les dossiers suivants :

Le code lié à la logique et aux données du domaine/métier doit être conservé dans le dossier app/models
Le code associé à l'affichage (HTML, JSON, XML, etc.) sera situé dans le dossier app/views
Le code lié au cycle de vie de la requête sera situé dans le dossier app/controllers

Insérer le contenu de la `html_test_1` page

Développez…

- Visitez le lien https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html et copiez tout le contenu à l'intérieur du `

` balise, comme indiqué ci-dessous

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Copier après la connexion

Insérer le contenu de la `html_test_2` page

Développez…

- Visitez le lien https://gist.github.com/tommaitland/5865229 et copiez tout le contenu à l'intérieur de la balise `

` comme indiqué ci-dessous

<code>$ cd classless-css-tailwind && code .</code>

Copier après la connexion

Un exemple de légende de formulaire Nom : E-mail : Bouton : case à cocher unique :

Groupe de cases à cocher : case à cocher 1 : case à cocher 2 : case à cocher 3 : case à cocher 4 :

couleur : Date : Date, heure (locale) : Fichier : Image : Mois : Numéro : Mot de passe : Radio unique :

Groupe de radios : Radio 1 : Radio 2 : Radio 3 : Radio 4 :

Portée : Réinitialiser : Heure : Recherche : Tél : Texte : URL : Semaine : Ceci est un bouton Sélectionnez 1 : TestTestSélectionnez 2 : TestTestSélectionnez plusieurs : TestTestSélectionnez des groupes : TestTestTestTestTestTest

Liste de données : - Ouvrez le fichier `app/views/pages/html_test_2.html.erb` et collez le contenu copié ci-dessus

Insérer le contenu de la

page`html_test_3`

Développez...

Visitez le lien https://github.com/cbracco/html5-test-page/blob/master/index.html et copiez tout le contenu après le `

`balise, où contient le texte `

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!

Frontend rapide Ruby on Rails utilisant Tailwind comme framework CSS sans classe

Créer une nouvelle application Rails

Ouvrez le projet à l'aide de VSCode ou de votre éditeur préféré

Comprendre la disposition par défaut de Rails app/views/layouts/application.html.erb

et des actions pages, html_test_1, html_test_2 et html_test_3html_test_4

fichierconfig/routes.rb

Afficher les itinéraires Rails

Nous allons créer quatre pages avec du contenu HTML pour tester les styles CSS.

Insérer le contenu de la html_test_1 page

Insérer le contenu de la html_test_2 page

pagehtml_test_3

Comprendre la disposition par défaut de Rails `app/views/layouts/application.html.erb`

et des actions `pages`, `html_test_1`, `html_test_2` et `html_test_3html_test_4`

fichier`config/routes.rb`

Insérer le contenu de la `html_test_1` page

Insérer le contenu de la `html_test_2` page

page`html_test_3`