Je m'intéresse à l'intégration du Bootstrap Twitter dans Contao 3.x pour faciliter la gestion du responsive design d'une part et la gestion d'un design avec une grille de 12.
Je précise que je n'ai encore jamais utilisé ni le Bootstrap Twitter (ni aucun autre bootstrap d'ailleurs) ni le système de grille...
Donc, ce matin, je me suis dit qu'il serait intéressant de regarder, puisque beaucoup de monde en parle, comment utiliser le Bootstrap Twitter dans Contao.
Alors, d'abord, comme un bon gros noob, je suis allé dégrossir le truc sur le Site du Zéro histoire d'avoir une idée plus concrète de ce dont on parle.
Bien, maintenant j'ai commencé à voir ce que ça donnait dans Contao.
"Stade 1"
Pour commencer, dans "Modèles", j'ai créé un répertoire "Bootstrap" et j'ai créé un nouveau modèle basé sur fe_page.html5 que j'ai nommé fe_page_bootstrap_twitter.html5. On verra ensuite que c'est nécessaire. J'aurai aussi pu écraser le fe_page originel sans le renommer mais bon...
J'ai aussi créé un répertoire "bootstrap_twitter" dans l'explorateur de fichier et j'y ai posé le dossier "bootstrap" et ses sous dossiers et fichiers . Ce sont les fichiers officiels qu'il faut télécharger ici.
J'ai aussi créé un répertoire "css" dans "bootstrap_twitter" pour y mettre mes propres fichiers css.
Ensuite j'ai créé un thème et une présentation de page avec :
- Entête
- Pied de page
- Colonne gauche
- Colonne droite
Je n'ai indiqué aucune dimension pour ces éléments puisque d'une part je ne souhaite pas utiliser le framework css de Contao pour ne pas interférer avec le bootstrap Twitter et parce que d'autre part je préfère gérer mon fichier css en direct. Je n'ai donc coché aucune des feuilles de styles du framework CSS de Contao.
J'ai changé le "Modèle de page" et j'ai indiqué celui qu'on va personnaliser ensuite en mettant fe_page_bootstrap_twitter à la place de fe_page
J'ai évidement choisi le format HTML 5 et j'ai coché "Include JQuery" ainci que les scripts j_accordion, j_mediaelement, j_slider et j_tablesort.
Dans la partie "Balises supplémentaires", j'ai ajouté les balises comme indiqué par le Site du Zéro. Chez moi ça donne ça :
Code : Tout sélectionner
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le fav and touch icons - Bon ça c'est pour le fun pour le moment -->
<link rel="shortcut icon" href="./favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="./apple-touch-icon-57-precomposed.png">
<!-- Bootstrap Twitter -->
<link href="files/bootstrap_twitter/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="files/bootstrap_twitter/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<!-- CSS Perso -->
<link rel="stylesheet" href="files/bootstrap_twitter/css/style.css">
<link rel="stylesheet" href="files/bootstrap_twitter/css/customize.css">
Je ne toucherai donc qu'aux fichiers style.css et customize.css.
J'ai aussi ajouté le script bootstrap.min.js dans "Code Javascript personnalisé" :
Code : Tout sélectionner
<script src="files/bootstrap_twitter/bootstrap/js/bootstrap.min.js"></script>
Je n'ai pas indiqué de "Présentation statique" non plus, tout sera géré par le bootstrap en principe.
Au niveau des modules inclus, j'ai mis un article dans chaque partie et j'ai créé un module de navigation pour tester mais rien de plus pour le moment.
Donc déjà, à ce stade disons "Stade 1", qu'auriez-vous fait différemment, ajouté/enlevé ?
Au niveau des extensions, j'ai installé :
- includes (qui est super pratique pour mettre des trucs dans des modules puis ensuite dans des présentations de page)
- m17-sticky-backend-footer (pour coller les boutons de l'admin en bas de page parce que j'en ai marre de scroller)
- MultiColumnWizard (parce que c'est nécessaire pour d'autres extensions)
- subcolumns (parce que je veux pouvoir créer simplement des colonnes sans avoir à pondre du code)
- subcolumns_bootstrap (parce que visiblement cette extension rend subcolumns compatible avec le bootstrap Twitter
- wrapper (parce que...)
- zz_bebreadcrumb (question d'habitude, je trouve que c'est pratique dans l'admin)
A noter que pour utiliser subcolumns_bootstrap il faut aller dans la configuration et sélectionner "Bootstrap" dans la section Columnset Settings.
"Stade 2" : fe_page
Revenons à fe_page. Visiblement, pour que le Bootstrap Twitter fonctionne, il faut respecter certains points et avoir les bonnes classes aux bons endroits. Alors voilà ce que j'ai fait mais franchement je ne sais pas trop si c'est ce qu'il faut faire.
Voilà donc ce que j'ai mis :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<head>
<meta charset="<?php echo $this->charset; ?>">
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<base href="<?php echo $this->base; ?>">
<meta name="robots" content="<?php echo $this->robots; ?>">
<meta name="description" content="<?php echo $this->description; ?>">
<meta name="keywords" content="<?php echo $this->keywords; ?>">
<meta name="generator" content="Contao Open Source CMS">
<?php echo $this->viewport; ?>
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>
<!--[if lt IE 9]><script src="<?php echo TL_ASSETS_URL; ?>assets/html5shiv/<?php echo HTML5SHIV; ?>/html5shiv.js"></script><![endif]-->
</head>
<body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper" class="container">
<?php if ($this->header): ?>
<header id="header">
<div class="inside">
<?php echo $this->header; ?>
</div>
</header>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>
<div id="container">
<div id="main" class="row">
<div class="inside">
<?php echo $this->main; ?>
</div>
<?php echo $this->getCustomSections('main'); ?>
</div>
<?php if ($this->left): ?>
<aside id="left" class="span2">
<div class="inside">
<?php echo $this->left; ?>
</div>
</aside>
<?php endif; ?>
<?php if ($this->right): ?>
<aside id="right" class="span2">
<div class="inside">
<?php echo $this->right; ?>
</div>
</aside>
<?php endif; ?>
</div>
<?php echo $this->getCustomSections('after'); ?>
<?php if ($this->footer): ?>
<footer id="footer">
<div class="inside">
<?php echo $this->footer; ?>
</div>
</footer>
<?php endif; ?>
</div>
<?php echo $this->mootools; ?>
<?php if (!$this->disableCron): ?>
<script>
<?php if ($this->layout->addJQuery): ?>
setTimeout(function(){jQuery.ajax("system/cron/cron.txt",{complete:function(e){var t=e.responseText||0;parseInt(t)<Math.round(+(new Date)/1e3)-<?php echo $this->cronTimeout; ?>&&jQuery.ajax("system/cron/cron.php")}})},5e3)
<?php else: ?>
setTimeout(function(){(new Request({url:"system/cron/cron.txt",onComplete:function(e){e||(e=0),parseInt(e)<Math.round(+(new Date)/1e3)-<?php echo $this->cronTimeout; ?>&&(new Request({url:"system/cron/cron.php"})).get()}})).get()},5e3)
<?php endif; ?>
</script>
<?php endif; ?>
</body>
</html>
Il y a relativement peu de changement si ce n'est que j'ai ajouté :
- la classe container : <div id="wrapper" class="container">
- la classe row : <div id="main" class="row">
- la classe span2 aux colonne gauches et droite : <aside id="left " class="span2"> et <aside id="right" class="span2">.
Bien sûr c'est arbitraire, j'aurai pu mettre des span différents mais bon, c'est pour tester.
Ensuite j'ai mis un peu de contenu pour voir.
Déjà, à ce stade, c'est pas trop mal (à part la taille des titres qui est démesurée), les colonnes fonctionnent bien en responsive design, le texte aussi. Par contre ma colonne de gauche est à droite...
"Stade 2", qu'auriez-vous fait différemment, ajouté/enlevé ?
"Stade 3" : la navigation
Ensuite, j'ai modifié les modèles "mod_navigation.html5"
Code : Tout sélectionner
<!-- indexer::stop -->
<nav class="navbar <?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a>
<div class="navbar-inner">
<div class="container">
<?php echo $this->items; ?>
</div>
</div>
<a id="<?php echo $this->skipId; ?>" class="invisible">[nbsp]</a>
</nav>
<!-- indexer::continue -->
et "nav_default.html5" :
Code : Tout sélectionner
<ul class="nav <?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
Pour que ça corresponde à ce qui est indiqué sur le Site du Zéro. Si on n'a pas de sous pages, seulement un seul niveau de profondeur pour la navigation et qu'on visualise seulement sur un grand écran, ça semble aller. On peut même utiliser les classes comme navbar-fixed-top sans modifier le modèle, simplement en indiquant cette classe dans les paramètres du module.
Par contre si on a plusieurs niveau de navigation, là par contre le rendu n'est pas du tout celui attendu puisque les rollovers ne sont pas implémentés ni rien.
Il semblerai aussi que le menu pour les mobiles ne se déclenche pas...
Soit, alors j'ai regardé ici mais là par contre, c'est déjà plus compliqué pour mettre les bonnes classes aux bons endroits ! D'ailleurs comment on fait sans user de str_replace comme un malade dans le modèle ?
Je crois que c'est déjà bien pour commencer
J'ai un site de test donc si ça intéresse des volontaires pour travailler sur ce projet, demandez moi le lien et éventuellement un pass pour l'admin.