Ruby on Rails Fast Frontend utilisant Zero CSS comme framework CSS sans classe

Cet article est très similaire aux articles précédents de cette série, mais cette fois, nous utiliserons un excellent framework CSS nouvellement créé, CSS Zero, qui peut être utilisé pour les projets « sans build » ou les applications Ruby on Rails qui nécessitent une « build » .

Il convient de noter que le framework CSS Zero n'a pas pour objectif d'être un framework sans classe complètement ou léger. Les modifications suggérées dans cet article sont uniquement à des fins de test et sont conçues pour styliser tous les éléments de la page HTML de ce didacticiel sans ajouter de classes.

Par conséquent, le formatage de certains éléments HTML peut ne pas correspondre au style, à la conception, à la mise en page et au comportement recommandés par le framework CSS Zero. Pour voir à quoi s'attendre du framework CSS Zero, visitez le lookbook CSS Zero : [Ajouter un lien vers le lookbook ici]. Pour le voir en action en tant que framework sans classe, suivez les étapes ci-dessous.

Créer une nouvelle application Rails

• rails new 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-zero
...
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 n'effectue aucun traitement JavaScript.

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

<code>$ cd classless-css-zero && 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 cette série.

Ajoutez CSS Zero à votre projet

Développez…

Suivez ces étapes pour ajouter CSS Zero à votre projet :

<code>$ bundle add css-zero
$ bin/rails generate css_zero:install</code>

Pour voir les composants disponibles, exécutez la commande suivante :

<code>$ bin/rails generate css_zero:add --help</code>

Pour ajouter tous les composants, exécutez la commande suivante :

<code>bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share</code>

Veuillez noter que la commande ci-dessus ne fonctionnera pas si d'autres composants sont ajoutés ou si certains composants sont supprimés.

Partie 1 - Modifier le app/assets/stylesheets/base.css fichier

Développer…

Dans le lien Titres, nous pouvons voir que de nombreux éléments de style doivent être inclus dans un élément avec `<div>`.

<code><div>
  ...
</div></code>

Afin de styliser ces éléments HTML sans utiliser <div> nous apporterons les modifications suivantes.

<code>body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;

  /* 无类配置测试 */
  font-size: var(--text-fluid-base);
  /* max-inline-size: 65ch; */

  /* 抗锯齿字体 */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-extrabold);
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.5em;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}</code>

Ouvrez le fichier app/assets/stylesheets/base.css, recherchez la ligne body { et collez le contenu copié après text-rendering: optimizeLegibility;. Après avoir collé, supprimez ou commentez les lignes max-inline-size: 65ch;. Le contenu de body doit être le même que celui de l'exemple ci-dessus.

Ensuite, ouvrez le fichier app/assets/stylesheets/prose.css et copiez la section contenant :

<code>/* 无类配置测试 */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.8em;
  }

  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }

  :is(b, strong) {
    font-weight: var(--font-bold);
  }

  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded);
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }

  code {
    padding: 0.1em 0.3em;
  }

  pre {
    border-radius: 0.5em;
    overflow-x: auto;
    padding: 0.5lh 2ch;
    text-wrap: nowrap;
  }

  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }

  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }

  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }

  blockquote p {
    hyphens: none;
  }

  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }

  th {
    font-weight: var(--font-bold);
  }

  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }

  th {
    border-block-end-width: 3px;
  }

  del {
    background-color: rgb(from var(--color-negative) r g b / .1);
    color: var(--color-negative);
  }

  ins {
    background-color: rgb(from var(--color-positive) r g b / .1);
    color: var(--color-positive);
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }</code>

Collez ce qui précède à la app/assets/stylesheets/base.css fin du fichier .

Partie 2 - Modifier le app/assets/stylesheets/button.css fichier

Développez…

Modifiez la classe CSS `.btn` pour que tous les éléments du bouton HTML utilisent automatiquement ce style.

va :

<code>$ rails -v
Rails 8.0.0

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

remplacé par :

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

Partie 3 - Modifier le app/assets/stylesheets/input.css Fichier

Développez…

Modifiez la classe CSS `.input` afin que tous les éléments d'entrée HTML utilisent automatiquement ce style. De même, modifiez les sélecteurs `.checkbox`, `.radio`, `.range` afin qu'ils s'appliquent à toutes les balises HTML correspondantes. La méthode de modification spécifique est similaire à la deuxième partie, veuillez vous référer à la méthode de modification dans la deuxième partie.

Ajuster app/views/layouts/application.html.erb fichier

Développez…

Le lien apparaîtra différemment selon l'endroit où dans `application.html.erb` vous placez la référence au fichier HTML de test. Si vous souhaitez que la démo ressemble au tutoriel, veuillez modifier la section correspondante.

Maintenant, utiliser CSS Zero comme framework sans classe pour styliser le HTML ?

Après avoir configuré CSS Zero et effectué les personnalisations ci-dessus, démarrez le serveur Rails et vous verrez le HTML stylisé.

Mode sombre

Certains styles ont des options de mode sombre. Pour le 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

[x] Organisez les styles selon vos préférences ; [x] Utilisez des fichiers CSS dans le projet pour le style au lieu du CDN ; [x] Utilisez Tailwind pour répliquer les fonctionnalités des frameworks CSS sans classe ; [-] 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

 ;

Références

• https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f
• https://guides.rubyonrails.org/layouts_and_rendering.html
• 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