Installation et personnalisation d'un thème Bootstrap - Partie 2

Logo Bootstrap
Cet article constitue la suite du premier article sur l'utilisation conjointe de Bootstrap et Drupal. Ce second article part du principe que votre sous thhème et toute la configuration adjacente (compilateur less, etc...) est fonctionnelle. Il traitera de la personnalisation de votre nouveau thème bootstrap. Chaque page internet ayant ses besoins propres, cet article ne couvrira évidemment pas tous les besoins, mais proposent un ensemble de petites astuces pour travailler votre thème.

Profiter de Less pour un code CSS bien organisé

Less offre deux évolutions majeures par rapport à CSS, l'imbrication des éléments, et la définition de variable. Il permet également d'inclure des fichiers less entre eux. Voyons comment ces éléments peuvent permettre une organisation propre de vos feuilles de styles.

L'inclusion de fichiers

Grace à la commande @import, on peut importer d'autres fichier less dans un fichier less. C'est d'ailleurs par défault ce qui ets utilisé dans votre fichier style.less. Je vous recommande de ne pas hésiter à créer des fichiers supplémentaires pour les diverses parties de votre site web (header, footer, type de page spécifique....) et à les intégrer au fichier style.less. Quand on revient sur un site web des mois plus tard, on appréciera de ne pas défiler dans un fichier css de 2000 lignes pour trouver les propriétés voulues.

// Bootstrap library.
@import 'bootstrap.less';

// Base-theme overrides.
@import 'overrides.less';

// Theme specific.
@import 'header.less';
@import 'content.less';
@import 'footer.less';

//content type specific
@import 'homepage.less'; // Une page que j'ai créé spécifiquement pour gérer ma page d'accueil

Imbriquer ses balises

Less permet d'imbriquer des éléments au seins des propriétés d'un élément parent.

Voici un exemple en css :

#div1 {
  width:220px
}

#div1 .contenu
{
  padding:10px;
  font-size:2em;
}

Voila le même exemple en less :

#div1 {
  width:220px
  
  .contenu{
    padding:10px;
    font-size:2em;
  }
}

Afin d'éviter les conflits en css, et pour optimiser la clarté, je propose de profiter largement de cette imbrication et des nombreuses classes que drupal offrent sur les éléments html d'une page.

Par exemple :

/* Page Portfolio */
body.page-portfolio{
	div.view-portfolio{
	  	div.views-row div.portfolio-tn{
	    	margin:20px;
			div.views-field-field-image-principale{
		 		border-radius:20px;
		 		overflow:auto;
		 		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
		  		img{
		    		margin:0px;
		    		width:100%;
		    		height:100%;
		    	}
			}
		}
		div.views-field-title{
		  	text-align:center;
		  	a{ 
		    	color:#000; 
		    	font-family:'Roboto condensed';
		  	}
		}
	}
}

/* page prestations */

body.page-node-7 {
	div.image-gauche img{
	  width:100%;
	}

} 

En imbricant des l'éléments body toutes les spécificités d'une page, je m'assure de ne pas créer de conflits avec des éléments ayant les mêmes classes sur une autre page, sauf si bien sur je souhaite affecter tous les éléments de mon site.

Les variables

Vous faîtes sans cessse des copier coller de code hexadécimaux de couleurs lorsque vous intégrez ? simplifiez vous la tache avec less et ses variables.

Définition d'une variable :

@couleur-hexagon: rgb(255, 136, 0);

Utilisation d'une variable :

.hexagon-orange {   background: @couleur-hexagon;}

Rappels sur Bootstrap

Je ne reviendrais pas en large sur le fonctionnement de bootstrap, d'autre sites s'y consacrent bien mieux :

Je propose juste un rapide résumé.

Le but du jeu

12 Colones. 4 Modes d'affichages. L'intégrateur themeur qui travaille sous Boostrap ne doit jamais perdre ces chiffres de têtes. Selon le nombre de pixels de largeur disponible sur le navigateur de votre visiteur, vous serez forcément dans un des 4 modes d'affichage, et vous aurez toujours 12 colonnes dans votre page. Ce qui change d'un mode d'affichage à l'autre, c'est que vous ne définissez pas le même nombre de colonne pour un élément, selon le mode.

Par exemple, sur ma page d'accueil, en écran large, vous verrez ces deux blocs ainsi :

bloc en version wide

Ils occupent 4 colonnes de larges. Tandis qu'en smartphone ( moins de 767 px de larges) vous verrez ceci :

Ils sont cette fois défini pour utiliser les 12 colonnes qui leurs sont disponibles.

Voici le résumé des 4 modes disponibles :

  Très petit appareil (<768px) Petit appareil ( ≥768px) Ecran Moyen (≥992px)  Ecran Large (≥1200px)
Taille du conteneur None (auto) 750px 970px 1170px
Prefix de class .col-xs- .col-sm- .col-md-

.col-lg-

Il vous faut donc penser votre design dans ces 4 modes !

Vos armes : les classes

Pour définir la largeur de vos éléments, vous ne touchez plus aux propriétés css, vous ajoutez simplement des classes à vos éléments html (div, table...).

  • Définir la largeur d'un élément : Vous ajoutez à votre élément le prefix de classe suivant du nombre de colonnes voulus. Par exemple pour définir 4 colonnes de large en mode 'wide' et 12 en mode 'smartphone', on ajoute les classes 'col-lg-4' et 'col-xs-12'.
    Sachez que les éléments des modes d'affichages petits sont hérités par les modes supérieurs si ils ne sont pas définis sur ces derniers. Si on attribue 6 colonnes en mode medium, et que l'on ne définit rien en mode 'large', le mode large occupera également 6 colonnes.
  • Définir un retrait à gauche : Vous ajoutez à votre élément le préfixe de classe, suivi de -offset-, suivi du nombre de collone de retrait. Par exemple pour définir un retraigt d'une colonne à gauche sur un élément en mode 'wide' on ajoute la classe 'col-lg-offset-2'.
  • Cacher un élément : Pour certaines raisons, on peut décider qu'un élément n'est pas indispensable dans les petis modes d'affichage et souhaiter le cacher, on ajoutera pour cela la classe 'hidden-' suivie du préfixe. Par exemple pour cacher en mode smartphone 'xs-hidden'.
  • La classe 'row' :  Un élément avec cette classe pourra comprendre plusieurs éléments de largeur différentes en son sein, on a l assurance que dans tous les modes d'affichages, les éléments situés dans le code hors de cette balise, et après cette balise seront bien en dessous dans le flux d'affichage. (Si c'est pas clair, lisez la doc à ce sujet ce n'ets pas un tutorial bootstrap!)

Ne plus réfléchir en pixels...

Pour vous assurer la réussite de votre design avec bootstrap, en particulier pour les largeurs, il faudra cesser de réfléchir en pixels, mais en nombre de colonnes de largeurs. Réservez le width: AAApx; que lorsqu'il ets vraiment nécessaire.

Le fichier page.tpl.php

Ce fichier est dans le répertoire templates de votre sous thème récemment créé. C'est ici que vous allez pouvoir modifier le squelette de base de votre site et le design de base fourni par bootstrap. Vous pourrez déplacer le menu, les régions du header, du footer... C'est du theming classique, sauf que l'on travaillera en plus avec les classes de bootstrap décrites précedemment.

Modification sur un block

Si l'on prend par exemple ma barre de recherche, j'ai souhaité qu'elle 12 colonnes en mode smartphone et 4 dans les autres modes.

Mode Smartphone :

barre de recherche en mode smartphone

Mode Normal :

Le module Block Class  offre cette possibilité en permettant d'ajouter des classes supplémentaires à vos block. Rendez vous dans: 'strcture > blocks' et séléctionner le block voulu, et cliquer sur 'configure block'.
Grace au module, on a un élément css class, nous permettant de parvenir à nos fins :

On peut également décider de cacher certains éléments comme je l'ai fait dans mon footer :

Verison écran large:

footer version wide

Version smartphone :

Avec Display Suite

Le module display suite peut également s'adapter grace au module Display Suite Bootstrap Layouts. Ce module offre de nombreuses possibilités d'affichage en intégrant des classes bootstrap qui s'adapteront.

https://www.drupal.org/files/project-images/17-layouts.png

Si l'on ne trouve pas son bonheur, on pourra évidemment faire un theming spécifique avec un fichier template.

Views et BootStrap

Lors d'un affichage d'une collection d'élément via views, il peut être intéressant d'afficher tous les éléments à la suite sur smartphone, tandis que d'en prévoir plusieurs de largeurs sur grand écran. Observons par exemple mon portfolio :

Mode Ecran Large :

 

Mode Smartphone :

Pour cela, on peut très simplement dans views ajouter des classes :

Lorsqu'on édite une view, dans format -> format > settings, on peut ajouter une classe à chaque élément de la view :

On pourra également appliquer des classes à chaque Field, en cliquant dessus, puis en éditant les options de style comme sur l'image :

Enfin pour des opérations plus complexes, on themera carrément la view tel que décrit dans mon astuce "Themer une view"

Conclusion

Vous voila armé pour faire vos premiers pas avec Bootstrap... Que les classes soient avec vous !