Bootstrap Twitter

Questions, astuces à propos des modèles et des feuilles de styles
Avatar de l’utilisateur
MIMATA
Membre
Messages : 453
Inscription : 23 Avr 2008 08:29
Localisation : France
Contact :

Bootstrap Twitter

Messagepar MIMATA » 20 Juin 2013 18:27

Bonjour,

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... :mrgreen:

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 :wink:

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.
Dernière édition par MIMATA le 23 Juin 2013 14:08, édité 1 fois.
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com

Avatar de l’utilisateur
MIMATA
Membre
Messages : 453
Inscription : 23 Avr 2008 08:29
Localisation : France
Contact :

Re: Bootstrap Twitter

Messagepar MIMATA » 23 Juin 2013 14:05

Je continue mes essais.

Déjà, j'ai changé les span2 par des row dans fe_page.

Ensuite, j'ai modifié plusieurs modèles pour faire fonctionner le bootstrap.

Le modèle pagination.html5 qui gère la pagination. J'ai choisi un style centré de taille moyenne :

Code : Tout sélectionner

<!-- indexer::stop -->
<div class="pagination block pagination-centered">

  <p><?php echo $this->total; ?></p>

  <ul>

    <?php if ($this->hasFirst): ?>
      <li class="first"><a href="<?php echo $this->first['href']; ?>" class="first" title="<?php echo $this->first['title']; ?>"><?php echo $this->first['link']; ?></a></li>
    <?php endif; ?>

    <?php if ($this->hasPrevious): ?>
      <li class="previous"><a href="<?php echo $this->previous['href']; ?>" class="previous" title="<?php echo $this->previous['title']; ?>"><?php echo $this->previous['link']; ?></a></li>
    <?php endif; ?>

    <?php echo $this->items; ?>

    <?php if ($this->hasNext): ?>
      <li class="next"><a href="<?php echo $this->next['href']; ?>" class="next" title="<?php echo $this->next['title']; ?>"><?php echo $this->next['link']; ?></a></li>
    <?php endif; ?>

    <?php if ($this->hasLast): ?>
      <li class="last"><a href="<?php echo $this->last['href']; ?>" class="last" title="<?php echo $this->last['title']; ?>"><?php echo $this->last['link']; ?></a></li>
    <?php endif; ?>

  </ul>

</div>
<!-- indexer::continue -->


Le modèle mod_breadcrumb.html5 qui gère donc le fil d'Ariane :

Code : Tout sélectionner

<!-- indexer::stop -->
<div class="<?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; ?>

  <ul class="breadcrumb">
    <?php foreach ($this->items as $item): ?>
      <?php if ($item['isActive']): ?>
        <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?> last"><?php echo $item['title']; ?></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['title']; ?>"><?php echo $item['link']; ?></a> <span class="divider">/</span></li>
      <?php endif; ?>
    <?php endforeach; ?>
  </ul>

</div>
<!-- indexer::continue -->


Le modèle de galerie d'images. Notez que pour le moment, j'ai des marges trop importantes entre les vignettes :

Code : Tout sélectionner

<ul class="thumbnails">
  <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <li class="<?php echo $class; ?> <?php echo $col->class; ?>">
          <figure class="image_container"<?php if ($col->margin): ?> style="<?php echo $col->margin; ?>"<?php endif; ?>>
            <?php if ($col->href): ?>
              <a class="thumbnail" href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>"></a>
            <?php else: ?>
              <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>">
            <?php endif; ?>
            <?php if ($col->caption): ?>
              <figcaption class="caption" style="width:<?php echo $col->arrSize[0]; ?>px"><?php echo $col->caption; ?></figcaption>
            <?php endif; ?>
          </figure>
        </li>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>


Et les modèles du menu (mod_navigation.html5 et nav_default.html5) mais là je ne mets pas encore le code parce que c'est de la bidouille et que mon code, même si il fonctionne, n'est pas très "beau"... En tout cas, en ce qui concerne le menu, il faut d'abord garder à l'esprit que le Bootstrap Twitter ne gère pas le rollover pour garder une parfaite compatibilité avec les plateforme tactile. Donc pour dérouler un sous menu, il faut cliquer.
Autre point, on ne peut avoir que 3 niveaux de profondeur ; on pourrait considérer que c'est un problème mais en terme d'ergonomie, 3 clics dans un menu pour parvenir au contenu est un maximum donc finalement cette limitation est gérable et justifiable. Par contre, il faut savoir que le 3e niveau est accessible en rollover sur PC mais en clic sur appareils tactiles...donc vous allez me dire : pourquoi pas de rollover sur le premier niveau alors qu'il y en a bien un sur le 2e ? Et ben j'en sais rien...il faut demander à Twitter.
Encore une chose à savoir, le Bootstrap Twitter v2.3.2 est buggé... sur mobile, le 3e niveau de navigation déconne et il faut appliquer la correction ici pour résoudre le problème... Une fois fait, tout marche comme ça devrait.

Pour l'intégration du menu, je me suis basé sur ce modèle.

J'ai aussi trouvé un site qui permet de personnaliser le bootstrap de Twitter et de modifier les couleurs par défaut. Il suffit de changer les valeurs et de générer le fichier CSS que l'on va ensuite ajouter à nos fichiers CSS en ajoutant
<link href="files/bootstrap_twitter/bootstrap/css/magic-bootstrap-min.css" rel="stylesheet" type="text/css"> dans le champs des balises supplémentaires dans vos présentations de page, à la place de bootstrap.min.css et avant bootstrap-responsive.min.css :

Code : Tout sélectionner

<!-- Bootstrap Twitter -->
<link href="files/bootstrap_twitter/bootstrap/css/magic-bootstrap-min.css" rel="stylesheet" type="text/css">
<link href="files/bootstrap_twitter/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">


A suivre...
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com

taskone
Membre
Messages : 50
Inscription : 30 Mars 2013 10:14
Localisation : paris

Re: Bootstrap Twitter

Messagepar taskone » 24 Juin 2013 09:02

Intéressant ce petit tuto !

Perso je ne suis pas du tout fan de bootstrap, pour plusieurs raisons :

    > Je ne suis pas l'auteur du code, donc c'est nettement plus difficile à débugger
    > Je n'aime pas avoir une dépendance au JS pour générer du CSS / html (sauf si c'est pour de la dégradation élégante ou une amélioration progressive)
    > Les sites deviennent trop statiques et identiques en utilisant ce "genre d'utilitaire"
    > D'un point de vue général, c'est réinventer la route pour pas grand chose... surtout que Contao a son propre framework...

A+

Avatar de l’utilisateur
MIMATA
Membre
Messages : 453
Inscription : 23 Avr 2008 08:29
Localisation : France
Contact :

Re: Bootstrap Twitter

Messagepar MIMATA » 24 Juin 2013 09:11

Bonjour,

Ce n'est pas un tuto, ce sont des essais.

Comme toi, je ne suis pas vraiment un adepte des sur-couches mais bon.

Concernant le Framework CSS de Contao, aurais-tu une idée d'où on peut trouver des infos ? Où est la documentation ?
Perso, je code mes css à la main, sans passer par le framework css de Contao faute de savoir comment l'utiliser...
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com

taskone
Membre
Messages : 50
Inscription : 30 Mars 2013 10:14
Localisation : paris

Re: Bootstrap Twitter

Messagepar taskone » 24 Juin 2013 09:42

MIMATA a écrit :Ce n'est pas un tuto, ce sont des essais.

Ouuups... désolé ! :oops:

Ce doc te sera peut-être utile : https://contao.org/files/meetings/The-T ... mework.pdf

A+

guigui
Membre
Messages : 54
Inscription : 22 Mars 2012 11:22
Localisation : Loire-Atlantique / Vendée

Re: Bootstrap Twitter

Messagepar guigui » 29 Nov 2013 17:38

Je relance le topic car en me renseignant sur Bootstrap j'ai trouvé ça :

Bootstrap pour Contao
http://contao-bootstrap.netzmacht.de/home/

Qui permet l'installation de Bootstrap dans Contao . Attention: L'extension ne fonctionne que sous Contao 3.1.x .

C'est en allemand mais avec Chrome on arrive à comprendre !!

En espérant que ça t'aide dans ton essai !

Avatar de l’utilisateur
tom-over
Membre
Messages : 829
Inscription : 23 Mai 2008 10:43
Localisation : Rouen

Re: Bootstrap Twitter

Messagepar tom-over » 18 Mars 2014 11:43

Avez-vous déjà réalisé des sites avec bootstrap et Contao ?

Car je vais avoir un site à développer que j'aimerais avec en responsive.. Et peut être que ça me faciliterai la tache ;)

Vous en pensez quoi ?
Est-il nécessaire d'utiliser bootsrap quand on maîtrise plutôt bien le CSS ?
Qu'apporte bootstrap à un site ?

Avatar de l’utilisateur
audrey
Membre
Messages : 282
Inscription : 07 Mars 2011 09:09
Localisation : Perpignan
Contact :

Re: Bootstrap Twitter

Messagepar audrey » 18 Mars 2014 11:48

Si c'est que du responsive que tu veux, bootstrap twitter je trouve ça hyper lourd.
T'as des systèmes de grilles responsive plus sympa, notamment : http://goldengridsystem.com/
uniquement réalisée en em, beaucoup plus propre et plus simple à gérer :-)

Avatar de l’utilisateur
tom-over
Membre
Messages : 829
Inscription : 23 Mai 2008 10:43
Localisation : Rouen

Re: Bootstrap Twitter

Messagepar tom-over » 18 Mars 2014 11:52

audrey a écrit :Si c'est que du responsive que tu veux, bootstrap twitter je trouve ça hyper lourd.
T'as des systèmes de grilles responsive plus sympa, notamment : http://goldengridsystem.com/
uniquement réalisée en em, beaucoup plus propre et plus simple à gérer :-)


Mais il y a la même chose dans Contao. non ?

Avatar de l’utilisateur
audrey
Membre
Messages : 282
Inscription : 07 Mars 2011 09:09
Localisation : Perpignan
Contact :

Re: Bootstrap Twitter

Messagepar audrey » 18 Mars 2014 12:00

goldengrid est dans contao ?
arf je sais pas.

Mais bootsrap c'est pas que du responsive, c'est un peu de tout et de rien. Si t'as une charte graphique originale, ça sert pas à grand chose d'utiliser bootstrap.

Avatar de l’utilisateur
tom-over
Membre
Messages : 829
Inscription : 23 Mai 2008 10:43
Localisation : Rouen

Re: Bootstrap Twitter

Messagepar tom-over » 18 Mars 2014 12:06

Oui je fais du sur-mesure pour le webdesign...

Il y a une grille dans contao... mais pas forcement "goldengrid". Je ne sais pas comment on la gère...

Mais pour le responsive : je ne sais par quoi commencer et puis comment l'intégrer par la suite dans Contao ! :?

Avatar de l’utilisateur
MIMATA
Membre
Messages : 453
Inscription : 23 Avr 2008 08:29
Localisation : France
Contact :

Re: Bootstrap Twitter

Messagepar MIMATA » 18 Mars 2014 14:02

Bonjour,

Regarde ce thème : http://rocksolidthemes.com/de/contao/themes/opensauce
Et c'est gratuit. C'est pour ça que je n'ai pas continué mes expérimentations.

Pour la question de savoir si ça facilite le responsive....je n'en suis pas certain du tout.
En fait, il vaut mieux faire sa propre feuille de style et jouer avec les media queries.

L'utilisation d'un bootstrap est utile si tu cherches à avoir une interface très sobre et déjà prête.
Si tu dois intégrer un design spécifique, il vaut mieux tout faire à sa sauce.
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com


Revenir vers « Modèles et CSS »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité