Préparation
- Taper : 'mkdir nomDuDossierPrincipal' pour créer un dossier.
- Cloner le dépot.
- Créer un Dossier qui servira pour séparer l'installation de Wordpress.
On y mets ce qui nous sert pour créer notre site.
- Créer un fichier 'homepage.html'
- ! Se rendre dans ce dossier pour installer Parcel. Parcel fonctionne pour le dossier dans lequel il a été installé.
- Taper: parcel 'homepage.html' pour lancer le localhost. Si le port est différent de '1234', fermer les autres instances en cours et retaper la commande
Parcel installe les dossiers parcel.cache et dist.
- Créer un dossier 'sass' et y mettre un fichier 'main.scss'
- Dans 'homepage.html' importer le script dans le head : 'sass/main.scss'
Parcel créé des fichiers : package.json (à garder) yarn.lock(gestionnaire de dépendances (à garder quand il est présent))
- Créer un fichier '.gitignore' et y mettre :
node_modules
.parcel-cache
dist
SASS
Le main.scss va servir à importer les différents fichiers.
- Créer un dossier 'components' dans le dossier 'sass'
Dans ce dossier, on ajoute les composants. (partie dans le code html à l'intérieur d'un élément (layout). Exemple : 'top-bar' dans le header. L'idée est de pouvoir se reservir du code)
le nom d'un composant commence toujours par un underscore '_nomducomposant.scss'. Le underscore signifie que ce fichier est destiné à être importé.
On y mets par exemple les boutons, un carousel, dropdown, etc.
- Ajouter le code suivant pour importer le composant dans le fichier 'main.scss' :
// Ne pas mettre l'extension du fichier '.scss' ni l'underscore devant le nom du composant. Comme suite :
@import './components/nomDuComposant';
- Créer un dossier 'layout' qui va contenir les styles des éléments (exemple : navigation, header, footer, sidebar, forms, etc..).
- Créer un fichier '_global.scss' qui contiendra le style general (ex:body)
- Importer le fichier comme tout autres layout dans 'main.css'
- Créer un fichier 'main.js' dans le dossier principal
- Ajouter le code suivant pour charger 'reset-css' :
// import cherche par défaut dans les node_modules
// ici on cherche dans node_modules/reset-css/[le fichier par défaut dans la dépendance]
// Remarque: il n'y a pas @ devant import.
import 'reset-css';
- Ajouter l'import du fichier dans les balises head (homepage.html) :
// A ajouter dans des balises 'script'
src="./main.js" type="module"
- Executer la commande suivante dans le terminal :
npm install --save reset-css
- Supprimer l'import du script dans le head (homepage.html, on en a pllus besoin): 'sass/main.scss'
- Dans le fichier 'main.js' on ajoute le code suivant :
import '.sass/mains.scss'
fontawesome
- Ajouter à 'main.js' le code suivant :
import '@fortawesome/fonawesome-free/css/all.css';
- Dans le terminal, taper :
npm install @fortawesome/fonawesome-free
Ajouter des polices
- Télécharger le fichier .zip correspondant à la police. (dossier zip)
- Créer un dossier 'fonts' dans le dossier principal.
- Y mettre la font dézipée manuellement ou en ligne de commande :
mv ~/Téléchargements/nomDudossierDesPolices.zip ./nomDuDossierPrincipal/fonts
Cette commande déplace le fichier zip.
- Se rendre avec le terminal dans le dossier 'fonts' et taper
unzip nomDudossierDesPolices.zip
... pour décompresser le fichier. Déplacer les polices utiles à la racine du dossier 'fonts' et supprimer le contenu et les polices inutiles.
- Créer un dossier nommé 'abstract' dans le dossier 'sass'.
- Créer un fichier nommé '_fonts.scss' dans le dossier 'abstract'.
- Dans ce fichier, ajouter le code suivant pour appeler la font :
@font-face{
font-family: "nomDeLaFont";
src: url("/fonts/laFontChoisie.woff2") format("woff2");
}
Mixins
https://sass-lang.com/documentation/at-rules/mixin
Définition : Une mixin permet de réutiliser n'importe où dans notre sass une règle, en faisant varier certaines valeurs ou le contenu par défaut des règles.
- Si le dossier 'abstract' dans le dossier 'sass' n'existe pas, créer ce dossier et ce fichier
- Créer un fichier nommé '_mixins.scss' dans le dossier 'abstract'
- exemple de code (on doit donner un nom à la mixin, ici medium):
@mixin medium {
@media screen and(min-width:600px){
@content;
}
Remarque : @content va reprendre le contenu des accolades qu'on pose avec le @include
@include sert à apeller la mixin dans le code. Exemple dans le code du fichier '_top-bar.scss' on pourrait appeler la mixin de cette facon :
@include medium {
background-color:#f0f;
}
si probleme avec node_modules, supprimer le dossier et faire :
npm install
Le fichier 'global.scss' contient les variables.
une variable s'écrit comme ca :
$gutter: 1rem;
$black:#000;
ne s'intègre que dans le scsss.