Ruby on Rails Frontend Rapide avec Frameworks CSS Classless ou Class-Light avec CDN-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2025-01-23 02:17:08

original

286 Les gens l'ont consulté

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

Créer une nouvelle application Rails

time affiche le temps d'exécution après l'exécution de la commande rails serve. L'exemple suivant montre un temps d'exécution de 47 secondes.

<code class="language-bash">$ rails -v
Rails 8.0.0

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

Copier après la connexion

Rails 8, basé sur sa philosophie « aucune construction requise », utilise Prop Shaft comme bibliothèque de pipeline de ressources et Importmap comme bibliothèque JavaScript par défaut. Importmap ne fait rien avec JavaScript.

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

<code class="language-bash">$ cd classless-css-cdn && code .</code>

Copier après la connexion

Créez quelques pages pour afficher les styles des éléments HTML

La page se trouve dans la section « Étapes communes » du premier article de la série.

Ouvrez à nouveau le fichier `app/views/layouts/application.html.erb` et référencez le style CSS sans classe via CDN

Agrandir davantage…

- après

<code class="language-html">


</code>

Copier après la connexion

et </head>, collez ce qui suit. Vous n'avez pas besoin d'utiliser tous ces styles ; ils sont ajoutés afin que vous puissiez tester diverses options.

<code class="language-html">

     <!-- 不同浏览器之间可能存在不同的边距或字体 -->

    <link href="https://cdn.jsdelivr.net/npm/normalize.css" rel="stylesheet"></link><link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link> %>
      %>



     %>



     %>



     %>



     %>



     %>



     %>



     %>




    <link href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" rel="stylesheet"></link><link href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" rel="stylesheet"></link> %>



     %></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.
Pour tester un style différent de Pico CSS, commentez la ligne qui définit le style CDN (c'est-à-dire <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link>) et décommentez la ligne pour d'autres styles, comme la ligne pour Simple CSS.
Pour commenter et décommenter une ligne dans VSCode, vous pouvez utiliser la touche de raccourci Ctrl K C.

Style HTML utilisant un framework CSS sans classe basé sur CDN ?

Une fois que vous avez enregistré la feuille de style ci-dessus et démarré votre serveur Rails, vous verrez du HTML stylé à l'aide du framework CSS sans classe de votre choix.

Mode sombre

Certains styles ont des options de mode sombre. Pour confirmer, modifiez le thème dans les paramètres de personnalisation des couleurs de votre ordinateur. Recherchez dans Windows « activer le mode sombre pour les applications » et basculez entre le mode sombre et le mode clair. Après avoir modifié les paramètres du système d'exploitation, la page HTML devrait automatiquement changer pour indiquer qu'elle prend en charge le mode clair et le mode sombre.

Prochaines étapes

[-] Organisez les styles selon vos préférences ; [-] Utilisez les fichiers CSS dans le projet pour le style sans utiliser de CDN ; [-] Utilisez Rails Live Reload pour mettre à jour dynamiquement les modifications de votre projet dans le navigateur ; [-] Si vous souhaitez passer plus de temps sur le front-end, consultez les options de personnalisation de vos styles préférés ; [-] Utilisez Tailwind pour répliquer les fonctionnalités des frameworks CSS sans classe

;