Bootstrap : utiliser la grille responsive sans le theme

Google a dit : le 21 avril 2015 si tu n’as pas de site responsif, alors tu seras pénalisé dans les résultats de recherche mobile. Et comme à chaque annonce de Google de ce type, tout le monde s’exécute ! Mais ce n’est pas toujours évident de passer son site en responsif, surtout si vous avez votre design à conserver.

Du Bootstrap dans tous les sens

Exemple design Bootstrap

Exemple design Bootstrap

Aujourd’hui, il y a beaucoup de sites qui utilisent Bootstrap. Ce framework CSS est devenu le plus populaire. On le trouve partout : back-office, front-office, WordPress… Il est tellement répandu qu’on a l’impression que beaucoup de nouveaux sites se ressemblent… Beaucoup trop à mon goût… Où est la créativité ?

Il faut savoir qu’à la base ce framework est destiné aux développeurs de Twitter pour créer rapidement et proprement des outils back-end. Et pour que cela soit réellement efficace, Bootstrap intègre son propre design. Ainsi, les développeurs passent peu de temps sur l’interface et se concentrent sur les fonctionnalités.

Pour être franc j’utilise beaucoup Boostrap. Je me suis fais la main dessus et il me permet de faire un design propre très rapidement. Selon les volontés des clients, j’achète ou je créé des thèmes. Cependant dans tous les thèmes achetés, je suis effaré de voir que les développeurs intègrent Bootstrap dans sa version complète et surcharge TOUT pour avoir un visuel complètement différent… Tout ce code CSS inutile… c’est désespérant… Pourquoi utiliser un framework complet si c’est pour en réécrire la moitié???

Si vous voulez développer un thème basé sur Bootstrap, travailler à partir des sources Bootsptrap et faite votre thème !

Bootstrap : La grille responsive sans le thème

Pour rendre un site existant responsif avec Bootstrap (sans tomber dans une surchage du framework ou un visuel similaire au voisin), je conseille d’utiliser la grille responsive de Bootstrap uniquement. Mais par défaut Bootstrap ne permet pas d’extraire uniquement cette partie, même dans sa page de personnalisation. Dans cette interface, même si vous cochez uniquement « Grid System », vous aurez toujours cette mise en forme propre à Bootstrap (les inputs de telle taille avec des bords arrondis par exemple).

Alors j’ai décidé de creuser un peu et je suis tombé sur le github de zirafa. Ce dernier à travaillé à partir des sources Bootstrap et en a extrait uniquement sa grille responsive. Sur son repository, il a pré-compilé la grille responsive Bootstrap en 12, 24, 30 et 100 colonnes. J’ai utilisé cette méthode pour différents projets, et j’en suis plutôt satisfait. Au moins j’ai une grille responsive qui laisse libre cours à mon imagination pour le design. Et surtout je n’ai pas un pavé de CSS complétement inutile !

Sur des sites existants, cette méthode permet de travailler uniquement sur le responsif sans toucher ou casser le visuel déjà en place. Je ne dis pas que cela se fera rapidement, mais c’est la méthode la plus simple, rapide et performante que j’ai pu trouver pour rendre un site existant responsif avec Bootstrap.

Comment(2)

by | Yoyo Répondre

Tout à fait d’accord avec toi, un site bien intégré n’as pas besoin de 90% de bootstrap car il faut sans cesse écraser les styles, ce qui est contraignant et moche
Un graphiste qui veut être original ne va pas baser son boulot sur les styles de bootsrap..
Le système de grille est pas trop mal, mais il n’est pas encore très bien optimisé je trouve. (Tout en float par défaut, ça veut dire encore écraser les css si on veut du display inline-block ou display table par exemple, à moins de modifier le bootsrap proprement avec des nouvelles classes).

by | laurent Répondre

tout à fait d’accord à 100%; avec l’abus de boostrap, on a soit des sites tous pareil (feignantise) et le web devient triste/uniforme, soit besoin de tout surcharger pour avoir son look (quelle galère, je l’ai fiat une fois). merci pour les repère clairs (c’est con mais il fallait le savoir) pour utiliser juste la grille et ce qui est vraiment utile et indispensable dans bootstrap. et bien sur, utiliser boostrap complet pour le backoffice qui a été pérvu pour ca comme vous le dites. et non pour des frontoffice.

« Dans cette interface, même si vous cochez uniquement « Grid System », vous aurez toujours cette mise en forme propre à Bootstrap (les inputs de telle taille avec des bords arrondis par exemple). »
c’était ca mon gros pb

…Ce dernier à travaillé à partir des sources Bootstrap et en a extrait uniquement sa grille responsive. Sur son repository, il a pré-compilé la grille responsive Bootstrap en 12, 24, 30 et 100 colonnes » surtout que 12 colonne trop peu et ca oblige à faire des div de dv de div avec pleins de classe css. tres lourd
c’était exactement ce qu’il me fallait genial merci. enfin un article sensé.
par contre dommage qu’il ait pas gardé la partie css reset (en virant certains choix arbitaires)
je vais essayer et vous dira si moi aussi j’ai aimé

Laisser un commentaire

Votre email ne sera pas publié.