Hello !

J'ai une maquette à integrer, je voulais savoir si vous me conseiller d'utiliser un Framework de type Bootstrap (Si vous avez mieux je vous ecoute) ou faire du CSS pure sachant que la maquette dois etre responsive

15 réponses


Defy
Réponse acceptée

perso moi je n'utilise pas de framework comme bootstrap ou foundation ou autre, tu es obligé de surcharger l'existant pour reussir a voir une chose, et defois ben c'est la merde. je préfère avoir une petite grille responsive deja faite ( reloud a faire le truc ^^ ) du genre
Simple-Grid ou alors un micro framework comme Skeleton tu as plus de liberté dans tes choix et tu ne ralenti pas le site avec plein de css que tu n'utilisera jamais

Kaelyscius
Réponse acceptée

Pour de l'intrégation de maquette, je partirai plus sur un framework qui t'apporterai un système de grilles seulement (pour faire ton responsive plus simplement)

En revanche du bootstrap qui est plus fait pour créer une application rapidement convient moins. Car tu as une grosse surcouche CSS parfois plus que galère à enlever, au final tu charges du CSS dont tu n'as pas besoin, tu surcharges un CSS (Donc tu rajoutes une couche) sur une base dont tu n'as pas besoin.

Bootstrap c'est cool, mais ce n'est qu'un outils qui réponds à un besoin spécifique. Mais n'est pas à utiliser partout tout le temps.

Par exemple pour planter un clou tu as besoin d'un marteau. Mais rien ne t'empêche d'utiliser une masse. Maintenant la question est : as tu besoin d'une masse pour planter un clou? As tu besoin de bootstrap pour faire du CSS?

Sauf si vraiment il y a des fonctionnalités utiles pour toi dans bootstrap, regarde peut être des frameworks comme skeleton (mis plus haut) ou pure.css .

AlexisLS
Auteur

Merci pour ton conseil @Defy, cependant tu peux effectivement importer uniquement ce que tu as besoin

@greg effectivement je pense que c´est une bonne solution meme si la maquette n´a pas etais penser bootstrap

AlexisLS
Auteur

Merci de votre avis

je dirais de faire ton dev toi même une grid c'est pas compliquer a faire, de plus tu peux te félicté de l'avoir dev tous seul comme un grand.

ensuite pour le responsive vaut mieux avoir un design prevu pour (flat) c'est moins chiant que créer une image pour chaque taille d'écran etc...

AlexisLS
Auteur

@neecride Merci pour ton avis mais une grille developper main sera t'elle aussi performante qu'un framework ?

ben utiliser un framework juste pour une grille autant faire sa propre grille, surtous que sur grafikart il y a une super tuto sur la creation d'une grille en scss

AlexisLS
Auteur

C'est vraix ..

Salut Akexisls

Une grille est assez simple a créer ( le framework t'apportera beaucoup d'éléments supperflues, qui à mon sens compliqueront ton intégration, car tu dois t'apdater au framework et non au design, ça devrai êter l'inverse )

Si tu peux utiliser Sass voici un mini script pour générer tes grilles

/*************************************************************************************************
Grille
*************************************************************************************************/
/*** Grille ***/    
$grille_maxwidth:           1145px; /*** Largeur de la grille ***/
$grille_columns:            12; /*** Nombre de colonne ***/
$grille_gutter:             15px; /*** Espacement entre les colonnes ***/

/*** Mixin pouvant être appelé dans le fichier sass | .div{@include col(6) } ***/
@mixin clearfix(){
    &:before, &:after { content: " "; display: table; }
    &:after { clear: both; }
    * {zoom: 1;}
}

@mixin container(){
    @include clearfix();
    max-width: $grille_maxwidth;
    margin: 0 auto;
    position: relative;
    overflow: hidden;  
}

@mixin row(){ @include clearfix(); margin: 0px ($grille_gutter * -1); }

/*** Inverse des mixin | à utiliser sur les balises html ***/
.container{ 
    @include container();
}

.clearfix{ @include clearfix(); }
.row{ @include row(); }

/*** Génération de la grille ***/
@mixin col($col){
    float: left;
    min-height: 1px;
    position: relative;
    padding: 0px $grille_gutter;
    width: $col / $grille_columns *100%;
}

@for $i from 1 through $grille_columns{
    .col-#{$i}{
        @include col($i);
    }
}

/*** Tu peux utiliser soit la class col-x sur les balises souhaité, sois directement dans ton fichier Sass | #madiv{ @include col(6) }

/*************************************************************************************************
Box sizing | Afin que les marges et padding s'applique à l'intérieur de l'élément
*************************************************************************************************/
*:before, *:after {
  box-sizing: border-box; }

*:before, *:after {
  box-sizing: border-box; }

* {
  box-sizing: border-box; }

Personnellement, je ne suis pas fan des framework. Je pars du principe que quand on connait son boulot, on a pas besoin d'un outil : c'est de la perte de temps et de ressources pour rien.
Ce que je dis à mes élèves par exemple, c'est que Bootstrap peut être pratique comme outil de prototypage, pour vite montrer à un client à quoi pourrait ressembler leurs site au niveau des placements.

Quand ça fait longtemps que tu es dans le métier, le mieux c'est encore de faire ses propres bouts de code. On a chacun notre logique, notre syntaxe, etc : ce sera toujours plus simple d'avoir ta façon de penser plutôt que de t'approprier celle d'un autre.

@cytheria je trouve que tu es un peu radicale dans ta tournure de phase. Enfin de mon point de vue, et je vais essayer de l'expliquer.

Je pars du principe que quand on connait son boulot, on a pas besoin d'un outil.

Donc si on connait bien son boulot, on a pas besoin d'outils de versionning, pas besoin de framework (Litteralement cadre de travail) etc etc...

Quand ça fait longtemps que tu es dans le métier, le mieux c'est encore de faire ses propres bouts de code. On a chacun notre logique, notre syntaxe, etc :

Du coup les normes de codage? Essayer de formater son code, la lisibilité, la maintenabilité? On en fait rien?

Ce n'est ni une critique, ni une polémique. Juste je trouve cela dommage d'avoir un avis si tranché, alors qu'après des années dans le métier (je n'ai qu'a peine deux ans d'expérience en dev.) je pensais que justement, on savait à quel moment on a besoin d'un outil ou pas. Qu'il ne fallait pas forcément "toujours" réinventer la roue. (Je mets une nuance hein, car on est tout autant capable de bien faire, et il faut au moins avoir une fois crée la roue ).

Et surtout comment on peut normaliser son code afin qu'il puisse être repris par chacun.

Après c'est sûre que si tu es freelance, seul sur tes projets et que tu t'en fou de savoir qu'un jour ton client peut aller frapper ailleurs au risque de trouver un autre qui comprendra rien, qui dira que tu as fait un travail de merde (vrai ou pas hein, la mauvaise foi et l'incompétence ça existe.) tu peux coder comme tu veux le sens. Faire la logique que tu veux etc.

Enfin voila ! Rien de méchant dans ce que je dis, je le répète ! Sait on jamais. Je ne veux ni provoquer ou quoi que ce soit. Comme tout le monde, je suis la pour apprendre :-D

@kaelyscius : oui, j'admets que dit comme ça parait un peu sec, mais c'etait pas du tout dit dans ce sens là. C'est plus dans le sens "moi perso ça me fraine". Et rassure toi, je ne le prends pas mal, c'est juste que j'ai écris ça "dans le speed" :p (pour ça que j'aime pas trop les forums de base, c'est que j'ai du mal à m'exprimer quand c'est asynchrone :p)

Pour les normes, le formatage, la lisibilité, etc : je met ça "hors outil". Pour moi ça fait parti de mes habitudes de codage que de bien nommer mes classes, etc. Pour moi, Bootstrap (et tout ce genre d'outils) ne t'aide pas à bien nommer tes classes (enfin, ce n'est pas son rôle quoi).
Bien sûr il faut suivre une norme, je suis la première à le faire (et crois moi, une fois j'ai du récup un code CSS dégueu, avec des commentaires en russe, j'ai compris ma douleur :p).

Après y'a un truc que je tiens à préciser, c'est qu'il y a ceux qui savent coder et qui utilisent des outils, et ceux qui font de la pensée magique avec un theme Bootstrap qu'on modifie alarach :p.

Haha ! Dit comme ça je comprend mieux ta pensée ! ;-) Et si tu regarde en réponse épinglé, tu verras que je dis la même chose.

Un outil à son utilisation propre et à ce titre sa pertinence à répondre à une ou plusieurs problématique. C'est pour ça que pour ce problème la, j'avais proposé des outils plus petit. (Et il est aussi juste de créer son propre système de grille.)

Cela dit, il ne faut pas te sentir freinée par un outil. "Si" il répond à ton besoin et te permet d'avancer plus vite en l'adoptant, prend le temps de le comprendre, sinon c'est qu'il ne convient pas à ton problème.

L'utilité d'un outil est la récurence auquel il sera utilisé. Sinon personne utiliserai Jquery, angular, etc etc qui eux aussi sont des frameworks puis ce qu'on peut tout faire en javascript natif ^^ :-P

Tu connais ton métier, et tu sais de quoi tu parles, donc continue d'avancer, d'apprendre et de tester de nouveaux outils! Sinon vers qui les développeurs junior comme moi vont ils se tourner ? :p

Un outil à son utilisation propre et à ce titre sa pertinence à répondre à une ou plusieurs problématique. C'est pour ça que pour ce problème la, j'avais proposé des outils plus petit. (Et il est aussi juste de créer son propre système de grille.)

D'accord avec ta réponse ;)

Cela dit, il ne faut pas te sentir freinée par un outil. "Si" il répond à ton besoin et te permet d'avancer plus vite en l'adoptant, prend le temps de le comprendre, sinon c'est qu'il ne convient pas à ton problème.

Totalement d'accord, malheureusement Bootstrap n'a jamais répondu à mon besoin :p Les autres l'ont parfois fait, mais je t'avoue que je suis constamment en train de me faire mon "framework maison", donc dès qu'il y a une bonne idée, j'essaye de l'adapter à mon truc à moi :p

PS : Question con, mais comment on fait les quotes et les HL sur les users ici ? :p

Comme ça ? @cythera c'est l'utilisation de double * autour, pour faire un gras.

Plus d'info : ici