Session comparaison Bootstrap 3 & 4 avec Drupal utilisation de theme standard pour ajouter bootstrap4 avec et changer les twig.

1. Theming avec
Bootstrap

2. Je me présente .. @fethikrout
Fethi Krout
Développeur Front-end senior
En poste chez
fethi.krout@gmail.com
@kroutfethi
https://www.drupal.org/u/fethi.krout

3. Table de Contenu
1 - C‘est quoi Bootstrap
2 - Bootstrap 4 quoi de neuf
3 - Theming Drupal + Bootstrap
4 - Methode Emerya

4. Introduction : C’est quoi Bootstrap...
● Date clé développé par twitter en 2011
● Bootstrap CSS html + javascript
● Mobile first - Responsive
● Système de grille
● Style pour les boutons, formulaires, navigation
● Minimise le temps de développement

5. Nouveautés Bootstrap 4
Bootstrap 3 Bootstrap 4
FICHIER CSS LESS SCSS (sass)
UNIT CSS PX REM
GRID 4 system grid (xs, sm, md, lg) 5 system grid (xs, sm, md, lg, xl).
Bootstrap 4 le point de
rupture le plus bas a éte retiré
. Par conséquent, col- *
couvre tous les périphériques
BLOC grid taille fixe en % et px FLEXBOX (les class floatés
sont ignorés )
Panels Panels Card

6. Flexbox démonstration

7. Questions ?

8. installation theme Bootstrap...
https://www.drupal.org/project/bootstrap
https://www.drupal.org/project/radix
- Installation du thème choisi
- Duplication du sous thème
- Modification des fichiers de base.
Nous avons choisi Radix :
- Le plus léger
- Pas de configuration inutile
- Watch gulp pour la compilation automatique des
css
- Moins d’erreurs sur les fonctionnalités
- Gestion native des Menus
Il y a plusieurs starterkits Bootstrap pour Drupal .

9. Thème + sous thème

10. drupalcamp.libraries.yml
base:
version: VERSION
css:
theme:
assets/css/bootstrap.min.css: {}
assets/css/animate.css: {} https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css: {}
js:
assets/js/popper.min.js: {}
assets/js/bootstrap.min.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/drupal
Comment passer de Bootstrap 3 à Bootstrap 4.

11. Méthode de travail
Méthode développée par Emerya :
Modules bootstrap_cform (MODULE CUSTOM)
https://www.drupal.org/project/field_group
https://www.drupal.org/project/views_fieldsets
https://www.drupal.org/project/display_fields

12. MERCI
Questions ?