1893 avis : 5/5 ⭐️⭐️⭐️⭐️⭐️

Wordpress développement

Developpeur wordpress

Front-end rails : Utiliser le SCSS / CSS

Front-end rails : Setup

Avant de commencer, j’ai utilisé le template rails new suivant :

rails new appname --webpack=stimulus -d postgresql

Tutoriel complet en vidéo :

Configurer son application rails avant de commencer

Avant de commencer à se lancer dans le front-end de notre application, nous allons vérifier que notre environnement de travail (notre dossier d’application) est correctement configuré.

Premier point de contrôle :

Vérifier que la gem sassc est bien active dans le gemfile. Pour se faire nous allons soit ajouter cette ligne dans le fichier gemfile, soit la décommenter :

# Use Sass to process CSS
gem "sassc-rails"
gemfile sassc ruby front scss

Ne pas oublier de lancer un petit bundle des familles sans quoi, vous ne pourrez pas faire de style sur votre application, car vous n’aurez pas installer les dépendances de la librairie (gem) sassc.

bundle install

Nous pouvons désormais utiliser le SCSS sur notre application rails !

Deuxième point de contrôle :

Nous allons maintenant vérifier que nous avons bien un fichier application.scss et non application.css dans notre dossier stylesheet. Si ça n’est pas le cas, aucune panique il vous suffira de renomer le fichier application.css par application.scss (oui on ne modifie que l’extension du fichier).

fichier application.scss rails

Jamais deux sans trois, le dernier point de contrôle :

Nous allons maintenant vérifier le fichier manifest.js. Il doit contenir la source du fichier application style de notre application avec notre nouvelle extension qui est le scss et non le css.

manifest.js scss rails config

En ligne deux, nous voyons que nous avons bien la ligne suivante :

//= link_directory ../stylesheets .css

Commencer le front-end de notre application

Pour commencer nous allons attaquer le front de notre home page. On va alors aller sur notre fichier home.html.erb.

Structure css d’une landing page

Une home page est souvent composée de plusieurs éléments statiques. En premier lieu, nous avons une navbar de navigation

navbar scss

Nous avons ensuite, un bandeau héro (une banner autrement dit) :

banner style scss

En second temps, nous allons afficher les produits de notre application (appartements dans notre exemple)

Créer une navbar

Pour créer notre navbar sur notre application, nous allons devoir créer deux fichier. Un fichier qui sera une partial (ajouter un _ avant le nom du fichier.) dans nos vues, puis nous allons créer un fichier de style scss (partial également).

partial rails scss

Je créé un nouveau dossier qui s’appelera shared dans le dossier views. Puis je créé un nouveau fichier dans le dossier shared que nous venons à l’instant de créer :

fichier partial html.erb

Nous allons ensuite éditer notre fichier html.erb, afin de générer le html de notre composant (navbar).

<div class="navbar navbar-expand-sm navbar-light navbar-lewagon">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="INDIQUER VOTRE URL D'IMAGE LOGO" />
</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Accueil</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Autre lien utile</a>
          </li>
          <li class="nav-item dropdown">
            <img class="avatar dropdown-toggle" id="navbarDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" src="https://kitt.lewagon.com/placeholder/users/ssaunier" />
            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" data-turbo-method="delete" href="#">Log out</a>
            </div>
          </li>
          <!--li class="nav-item"-->
          <!--/li-->
      </ul>
    </div>
  </div>
</div>
home.html.erb

Appeler notre fichier sur notre application

Pour rappel, nous avons créer un fichier partial. Sans son appel sur une view spécifique, il ne sera jamais lu en front sur un navigateur client. Sachant que nous souhaitons avoir notre navbar sur l’ensemble de toutes nos pages, nous allons alors l’appeler dans le fichier application.html.erb. Pour l’appeler nous ajoutons ce code :

<%= render '/shared/navbar' %>
appeler une partial rails

Le html de notre navbar est maintenu lu sur toutes nos pages ! 💪

Ajouter le style d’affichage

Continuons sur notre lancée, nous devons maintenant ajouter le fichier style correspondant à notre navbar. Pour cela, nous allons faire exactement la même chose.

1- Créer une partial scss, puis l’appeler dans notre fichier maitre de style de l’application global.

Rendez-vous dans le dossier stylesheet, puis nous créons un fichier partial : _navbar.scss

stylesheet scss

Dans ce fichier collez le code suivant :

.navbar-lewagon {
  justify-content: space-between;
  background: white;
}

.navbar-lewagon .navbar-collapse {
  flex-grow: 0;
}

.navbar-lewagon .navbar-brand img {
  width: 40px;
}

Dernière étape pour que notre style soit lu par notre application rails ! Bien penser à ajouter notre partial dans le fichier : index.scss :

index.scss import

Pour cela ajouter la ligne :

@import 'navbar';

Ajouter d’autres composants

Pour ajouter d’autres composants comme une banner, bouton, je vous donne rendez-vous sur l’UIKITT pour les élèves du wagon. Sinon bootstrap est votre meilleur ami.

Rendre notre page dynamique avec Stimulus

Ajouter un effet de style sur notre page d’accueil, nous allons faire un peu de javascript avec le framework Stimulus. Nous allons installer la librairie js typed.js puis coder le controller pour afficher son comportement dynamique.

Pour installer la librairie typed, voici la commande à taper dans le terminale :

yarn add typed.js

Créer un controller Stimulus

Pour créer notre controller Stimulus, il vous suffit simplement de lancer la commande :

rails g stimulus typed #typed sera le nom de notre controller
controller stimulus rails framework
voici le fichier généré par rails

Pour aller plus vite, je vous invite à copier / coller ce code en remplaçant uniquement l’array de string par vos phrases à afficher :

import { Controller } from "@hotwired/stimulus"

import Typed from 'typed.js'

// Connects to data-controller="typed"

export default class extends Controller {

connect() {

new Typed(this.element, {

strings: ["Le site n°1 de location", "de maison de vacances", "en France"],

typeSpeed: 50,

loop: true

})

}

}
javascript stimulus typed librairie code

Afficher notre comportement dynamique

Pour le moment, si nous nous amusons à rafraîchir notre localhost, nous ne voyons toujours pas notre animation typed. C’est normale ;). Jettons un oeil sur la ligne deux créé automatiquement lors de la génération de notre controller Stimulus :

data-controller stimulus

Nous devons alors ajouter cet attribut à la balise de notre choix dans notre fichier view afin de pouvoir l’afficher sur le front de notre application. Dans mon cas, nous sommes sur le fichier _banner.html.erb :

Compiler le javascript

Bravo ! 🎊 Si vous en êtes à ce stade c’est que vous avez quasiment terminé ! Pour afficher vos modifiers sur votre serveur local, nous devons compiler le javascript et relancer notre serveur rails (puma) via deux commandes. Ouvrir deux onglets différent sur votre terminale :

rails s

Ainsi que (la compilation webpack pour la javascript) :

yarn build --watch
terminale de commande vscode
compilation serveur local

Et voici le résultat final !

Articles dans la thématique Wordpress :
Configuration Cloudflare pour WordPress : Guide Pratique

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Augmentez la performance et sécurisez votre site WordPress grâce à Cloudflare. Ce guide détaillé couvre les réglages essentiels, des DNS à la configuration avancée..

Lire l'article
mise à jour wordpress 6.3, wordpress 6.3, wordpress version
WordPress 6.3 Beta 3 – Tout savoir sur la mise à jour

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. WordPress, la plateforme de gestion de contenu (CMS) la plus populaire au monde, continue d’évoluer et de s’adapter aux besoins changeants des développeurs et.

Lire l'article
Créer un site vitrine
🚧 Créer son site vitrine WordPress (Guide complet 2023) 💥

Le contenu ruby on rails est dédié à la communauté du Wagon (élèves et professeurs). Pour vous inscrire au bootcamp pour devenir web développeur c'est ici. Qu’est ce qu’un site vitrine ? Un site vitrine comme son nom l’indique représente l’image de votre société / entreprise en ligne. C’est exactement.

Lire l'article