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

Créer une nouvelle application Rails

La commande
• 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>

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>

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>

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

• 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

;

参考资料

• https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
• https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
• https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
• https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
• https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
• https://www.php.cn/link/c48eb27d5b0a288f5bbf1545c218e001

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!