bootstrap ou foundation Comparaison

Par CodingWeb, il y a 10 ans

Les bases HTML/CSS

Bonsoir à tous ;

Après une présentation avec aucune réponse, je me lance dans une demande un peu particulière étend utilisateur bootstrap, Je me suis aperçu en parcourant le forum et les vidéos que grafikart Conseillait foundation pour des raisons de performances sur un projet à long terme ? J'aimerais avoir plusieurs avis sur les deux framework css Avant de me plonger dans foundation que je connais vaguement.

En regardant la documentation de foundation je me suis aperçu qu'il n'avait pas la classe container et container-fluid qui est très pratique à mon sens.

Est-ce qu'il serait possible d'utiliser les deux en utilisant les composants que j'aurais besoin dans un projet Web, où ça serait totalement ridicule ? Perte de performance, conflit, maintenance du code, j'attends vos avis et commentaires avec impatience.

À bientôt sur le forum.

7 réponses

Benjamin Derepas, il y a 10 ans

Les deux framework ont le même principe globalement : ils fournissent un reset, un kit typographique, une grid responsive gérant les breakpoint , et un ui kit ansi que divers scripts js pour animer le tout.

Si on ne se base que sur les grids, la seule différence majeur c'est que Foundation est écrit en mobile first alors que Bootstrap est en desktop first .
Cela dit, la prochaine version de Bootstrap (v4) sera non seulement en mobile first, mais sera basé aussi sur le model flexbox plutôt que des float.

Bref quoi qu'il en soit, choisir entre Boostrap et Foundation c'est un peu comme choisir entre Laravel & Cakephp. C'est selon les préférences des utilisateurs.

Toute fois je te déconseil d'utiliser les deux en même temps, mais si tu veux vraiment comprendre le fonctionnement et mettre les mains dedans, je peux te conseiller de regarder un peu le code source, et de créer ton propre framework css (avec sass ou less ou autre) pour l'adapter à tes besoins

CodingWeb, il y a 10 ans

Merci pour cette réponse aussi rapide, quand tu parles de faire mon propre framework css à partir de foundation et bootstrap ? Ou le créer moi-même de toute pièce ?

Comme je l'ai dit bootstrap j'ai déjà pratiqué pas mal de choses avec et je le trouve plutôt accessible avec sa documentation excellente.

Foundation a l'air simple aussi donc comme tu le site ci-dessus je peux utiliser les ressources qu'il me faut sur les deux sens pertes de performances ? Il y a des trucs qui me plaisent sur les deux comme tu dis c'est un peu comme laravel et cakephp.

Defy, il y a 10 ans

quand tu parles de faire mon propre framework css à partir de foundation et bootstrap ?

non il parle d'utiliser une techno comme sass less stylus ou encore postCss pour faire ta propre grille, tes propre elements ui etc

Underscreen, il y a 10 ans

CodingWeb clairement Benjamin Derepas te le déconseille clairement ici de mixer les deux
Toute fois je te déconseil d'utiliser les deux en même temps

CodingWeb, il y a 10 ans

Bonsoir merci pour ces réponses.

Quand vous dites de mixer avec les deux vous parlez sur la même page ? Par ce que j'ai fait le test de ce genre

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="style/css/bootstrap.css" rel="stylesheet" type="text/css"> <link type="text/css" rel="stylesheet" href="bower_components/foundation/css/foundation.css" /> <script src="bower_components/modernizr/modernizr.js"></script> <title></title> </head> <body> <?php /** * Created by PhpStorm. * User: Codin * Date: 27/10/2015 * Time: 01:43 */ ?> <div class="row"> <div data-magellan-expedition="fixed"> <dl class="sub-nav"> <dd data-magellan-arrival="equipe"><a href="#equipe">Equipe</a></dd> <dd data-magellan-arrival="conception"><a href="#conception">Conception</a></dd> <dd data-magellan-arrival="realisation"><a href="#realisation">Réalisation</a></dd> </dl> </div> </div> <div class="row"> <a name="equipe"></a> <h2 data-magellan-destination="equipe">L'équipe</h2> <p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.</p> <a name="conception"></a> <h2 data-magellan-destination="conception">La conception</h2> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <a name="realisation"></a> <h2 data-magellan-destination="realisation">La réalisation</h2> <p>Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</p> <h2>La suite</h2> <p>Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> </div> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/foundation/js/foundation.min.js"></script> <script src="js/app.js"></script> </body> </html>

Mais j'obtiens une page blanche après avoir inclure le CSS de bootstrap

<link href="style/css/bootstrap.css" rel="stylesheet" type="text/css">

Après cela j'ai fait une petite recherche Google et je suis tombé sur ce lien
Est-ce qu'il existe une solution plus adapté où il est impossible d'inclure les deux sur la même page sans avoir de conflits ?

À bientôt sur le forum.

Defy, il y a 10 ans

Quel interet de couplé les deux? c'est comme si tu faisais une app avec cake et symfoni mélangé et que tu voudrais rendre des contrôleur cake dans une view twig depuis symfoni

CodingWeb, il y a 10 ans

En effet merci sujet clos