Débuter un thème

La mise en page d'une page web dans Gatsby, se base sur le fonctionnement de ReactJS. Une page web se découpe en plusieurs zones que l'on va nommer "Component".

Notre exemple se base sur le front-end open source toolkit bootstrap rapide à mettre en place.

Pour ce faire nous allons nous rendre dans le projet et lancer la commande :

yarn add bootstrap @popperjs/core

Pour commencer nous allons créer une mise en page global de notre site et lui inclure notre NavBar component que nous avons préalablement fait.

1 - La mise en page

Création d'un composant layout pour englober le rendu de ma page

Dans src/components/Layout.js

/* src/components/Layout.js */

import 'bootstrap';
import React from "react";
import NavBar from './Navbar';

const Layout = ({children}) => {
  return (
    <div className="layout">
      <NavBar />
      <div className="content">
        { children }
      </div>
    </div>
  );
}
export default Layout;

Avec ce composant vous allez utiliser react pour assembler votre page. Dans cette exemple nous affichons notre navbar et le reste des éléments enfants du DOM dans un div. Je ne m'attarde pas sur React, mais vous comprendrez que le fait d'afficher une balise

<NavBar/>

va charger notre composant Navbar que nous avons déjà crée auparavant.

Une particularité de react est que vous serez obligé de charger vos composants entre balise HTML, dans mon cas dans un div. Seul le premier div est obligatoire, le second est un choix pour mieux m'y retrouver dans le DOM.

Vous êtes désormais capable d'inclure un footer ou une barre latérale et/ou de définir vos propres régions comme vous l'auriez fait dans Drupal, mais cette fois en créant vos propres composants React.

Importation de mon layout dans ma page index.

/* src/pages/index.js */
import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/Layout";

const IndexPage = ({ data }) => {
  return (
    <Layout>
      <main>
        <title>{data.nodePage.title}</title>
        <h1>
          {data.nodePage.title}
        </h1>
        <div>
          {data.nodePage.body.value}
        </div>
      </main>
    </Layout>
  );
};
export default IndexPage;

export const data = graphql`
  query {
    nodePage(path: {alias: {eq: "/home"}}, status: {eq: true}) {
      body {
        value
      }
      title
    }
  }
`;

Dans ce fichier j'importe mon composant Layout dans ma page index et les données concernant mon node.

2 - Les feuiles de styles.

Gatsby offre une multitude de possiblités pour styliser un site ou une app.

Sources : https://www.gatsbyjs.com/docs/how-to/styling/

Un thème Gatsby de base comme kickstarter

Gatsby offre beaucoup de façons de créer un thème. Notamment avec un kickstarter et les explications que vous retrouverez ici : https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/using-a-gatsby-theme/

Cette méthode est pratique pour aller vite et pour comprendre le fonctionnement des thèmes sous la forme de pacakges et de dépendance installable via npm ou yarn.

Dans mon cas, je vais me passer d'utiliser un thème existant, je vais me focaliser sur mes besoins, et peut-être que par la suite je créerais un package pour mon thème. En tout cas le principe de fragmenter les thèmes en package donne des possiblités immense dans la création de thème.

La méthode React : un style par composant

Source : https://www.gatsbyjs.com/docs/how-to/styling/css-modules/

Vous trouverez un exemple dans le lien ci-dessus de comment s'organise les styles par composant.

Cette méthode est recommandé dans l'usage de Gatsby.

Effectivement cette méthode va vous faire gagner en performances et en réutilisation des composants dans un autre thème.

Le point négatif par rapport à Sass sera que nous ne pourrons pas utiliser les variables sass d'une architechture smacss* sans avoir à ré-importer dans chaque module nos variables css.

*smacss : http://smacss.com/

Un exemple plus approfondi est disponible ici : https://www.gatsbyjs.com/docs/tutorial/part-2/

Nous allons utiliser cette méthode pour styliser notre Navbar, car notre navbar est réutilisé dans plusieurs pages, donc autant que le css soit réutilisé.

Comme vu précédement, lors de mon installation de Gatsby j'ai choisi le styling en mode sass, ce qui a pour conséquence que Gatsby m'a installé automatiquement le module gatsby-plugin-sass.

Dans un premier temps je vais créer un début d'arborescence de travail pour les styles en me référent aux recommendations : https://sass-guidelin.es/fr/#le-pattern-7-1 en suivant le pattern 7-1 et non pas exactement ce que SMACSS préconise.

Dans le dossier src/styles/abstacts je vais créer un fichier _variables.scss. L'underscore comme préfixe me permet de voir rapidement que ce fichier est prévu pour être importé dans une autre fichier (principe d'inclusion).

Le dossier "abstracts" peut parfois s'appeller "helper", "utils" dans certains projets. Il peut aussi se situer dans le répertoire /base ou peut tout simplement être inexistant dans le cas ou le développeur souhaite importer ses variables directement dans son fichier main.scss (ou app.scss ou index.scss), auquel cas le fichier _variables.scss sera placé directement dans le dossier src/styles.

Dans mon cas je vais me retrouver avec un fichier :

/* src/styles/abstracts/_variables.scss */
$primary : green;

Puis si je veux utiliser ma variable $primary dans plusieurs composants, je n'aurais plus qu'à l'importer.

Dans le dossier components je vais créer un nouveau fichier navbar.module.scss

/* src/components/navbar.module.scss */
@import '../styles/abstracts/_variables.scss';

.container {
  margin   : 3rem auto;
  max-width: 600px;
  border   : 1px solid $primary;
}

Vous vous retrouvez ainsi avec un menu avec une bordure de couleur "green".

La méthode Sass

Cette méthode permet de créer des feuilles de styles plus globale au site.

Préparer un dossier de style dans le dossier src/styles comme vous le feriez pour un thème drupal.

Dans mon cas, la feuille de style principale qui sera importée s'appelle main.scss

Je recommande vivement de cadrer l'architechture et la ré-utilisation des classes en conciliant la méthode Smacss et la méthode BEM. Je ne m'attarderais pas sur des explications de ces méthodes, car je n'ai rien n'a ajouté de plus que ce qui est déjà présent sur cette page : https://www.1min30.com/developpement-web/le-css-avec-le-bem-et-smacss-1287459399

Dans mon cas je m'inspire de la méthode smaccss pour l'architecture de mon projet, mais je vais plutôt suivre les recommandations de sass : https://sass-guidelin.es/#architecture en suivant le 7-1 pattern :

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss    

Je vais donc créer un fichier un fichier src/styles/vendors/_bootstrap.scss qui va charger le scss de la librairie bootstrap que j'ai déjà installé dans les précédents chapitres.

/* src/styles/vendors/_bootstrap.scss */
@import "~bootstrap/scss/bootstrap";

Et je crée mon fichier src/styles/main.scss qui va charger mes variables et styles bootstrap.

/* src/styles/main.scss */
@import 'abstracts/variables';
@import 'vendors/bootstrap';

Ainsi je vais enfin pouvoir styliser mon composant Layout que j'utilise sur toutes mes pages avec mon style global :

/* src/components/Layout.js */
import React from "react";
import NavBar from './Navbar';
import Footer from './Footer';
import '../styles/main.scss';

const Layout = ({ children }) => {
  return (
    <div className="layout">
      <NavBar />
      {children}
      <Footer />
    </div>
  );
};
export default Layout;

Vous avez désormais toutes les cartes en main pour créer votre thème global et la possibilité de styliser vos composants via la méthode React. Vous avez la possiblité de surcharger le thème bootstrap et re-définir des variables selon vos choix. Pour savoir comment personnaliser bootstrap, je vous invite à lire cette page : https://getbootstrap.com/docs/5.1/customize/overview/