Bootstrap avec sass – Premier site en local sur wordpress

Pour transférer un site fait avec Bootstrap sur l’éditeur et utiliser SASS

Télécharger Source files sur bootstrap ici
Prendre dedans le dossier scss et le placer dans notre dossier WWW et le renommer: bootstrap-sass.
Dans ce dossier renommer les fichiers, avec _ , ceux qui ne l’on pas(3 fichiers bootstrap…).
Dans WWW créer un autre dossier scss et y placer le fichier styles.css d’origine et renommer celui-ci en .scss.
Dans visualStudioCode , dans le fichier styles.scss placer au début: @import « ../bootstrap-sass/bootstrap »;.
Dans le fichier index.html retirer le lien:

Dans WWW créer un dossier .vscode
Dedans créer un fichier settings.json
L’ouvrir et aller dans Live Sass Compile Config
Editer en cliquant sur le crayon “LiveSassCompile.setting.formats“
Changer : null par :“/css” (cela indiquera le nouveau chemin).
Ouvrir styles.scss et lancer watch Sass (dans la bande bleu)
Pour travailler ouvrir le fichier html et lancer l’aperçu go live.

Nous pouvons, par la suite, incorporer les codes de bootstrap pour générer une mise en page.

Sans les class bootstrap dans le html nous pouvons placer la directive @extend dans le scss en visant les class du code html.

ex:

.section-page {

@extend .py-5;

}

.rangee {

@extend .row;

}

.call-to-click{

@extend .btn;

@extend .btn-primary;

@extend .btn-lg;

}

#section01, #section03 {

.entete-section {

@extend .col-12;

}

.contenu-section {

@extend .col-md-9;

@extend .offset-md-3;

}

Pour travailler:

Dans notre dossier bootstrap-sass ouvrir le fichier _variables.scss et nous pouvons dedans, cibler certaine variable à notre choix:

$primary: $blue !default;

$enable-shadows: false !default;

$enable-gradients: false !default;

$btn-border-radius: $border-radius !default;

$btn-border-radius-lg: $border-radius-lg !default;

$btn-border-radius-sm: $border-radius-sm !default;

Et dans notre fichier styles.scss les modifier(toujours au début):

$primary: rgb(80, 105, 179);

$enable-shadows: true;

$enable-gradients:true;

$btn-border-radius: .5rem;

$btn-border-radius-lg: .5rem;

$btn-border-radius-sm: .5rem;

Pour importer une police, placer la directive au tout début du fichier avant @import « ../bootstrap-sass/bootstrap »; les variables peuvent être avant ou après celle-ci: @import url(‘https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700’);

Possibilité d’inclure des icônes:

Télécharger le dossier sur https://useiconic.com/open
Prendre le dossier fonts qui se trouve dans le dossier font(parent) et le placer à la racine dans WWW
Prendre les fichiers du dossier css qui se trouve dans le dossier font(parent) et le placer dans un dossier que nous nommons open-iconic-master et que nous plaçons également à la racine dans WWW(dans ce dossier nous pouvons garder que le fichier: open-iconic-bootstrap.scss).
Inclure (dans le fichier styles.scss) la directive: @import « ../open-iconic-master/open-iconic-bootstrap.scss »; pour créer le chemin.
Dans le fichier html placer le code du symbole récupérer sur le site ex:

<span class= »oi oi-ellipses »></span>

Autre site d’icônes: https://fontawesome.com/

Télécharger le dossier For the web (version gratuite).
Dedans, copier le dossier scss et le placer dans notre dossier racine WWW et le renommer (ex: fontawesome-sass).
Dans notre dossier WWW placer également le dossier webfonts.
Dans notre dossier scss, placer les directives (ciblant les fichiers se trouvant dans fontawesome-sass):

@import « ../fontawesome-sass/fontawesome.scss »;

@import « ../fontawesome-sass/regular.scss »;

@import « ../fontawesome-sass/solid.scss »;

@import « ../fontawesome-sass/brands.scss »;

Choisir notre pictogramme sur le site, copier le code de celui-ci (ex: <i class= »fas fa-star »></i>). Ce code est fait pour le html, donc soit le glisser dans le code html, soit l’insérer dans le scss comme la ligne 56 du code css:

.icone-site{

@extend.fas, .fa-star;

@extend .px-3;

color: $white;

}

Pour aller plus loin (évaluation)

Une technique qui surcharge moins le code html:

Le scss

Nous devons commencer par ceci (ligne 73):

.lien-menu{

@extend.nav-link;

}

.article-menu{

@extend .nav-item;

}

.conteneur {

@extend .container;

}

.rangee {

@extend .row;

}

La barre de navigation.

Eviter les imbriqués dans la barre de navigation (l’exemple css si-dessous n’est pas excellent, de plus il y a beaucoup de chose superflu). Ici le minimum pour une bar de navigation.

.barre-navigation{

@extend .navbar-expand-lg, .bg-primary, .navbar-light, .navbar-dark, .sticky-top;

}

// pour faire disparaître toggle….

.texte-bouton{

@extend .sr-only;

}

.bloc-marque{

@extend .navbar-brand;

}