Les frameworks Web tels que Bootstrap ou passe-partout HTML5 offrent-ils quelque chose à un concepteur (pas à un développeur)?

Notez qu'il s'agit bien plus de conception que de développement.

Je crée des sites à partir de zéro avec des CSS et HTML entièrement écrits à la main.

Je connais les modèles CSS pré-build tels que Bootstrap ou HTML5 Boilerplate depuis un certain temps. Je les ai regardés brièvement dans le passé, mais je ne me suis jamais lancé dans leur utilisation. Je n'ai aucun problème à réinitialiser CSS, à inclure javascript si nécessaire ou à configurer pour les fenêtres.

Ce soir, j'ai codé une page HTML5 / CSS de base. Rien de vraiment bouleversant en termes de mise en page. Tout simplement un point de départ. Ensuite, j'ai décidé de donner à Bootstrap un tourbillon avec la même disposition. C'est un 960px assez standard, 3 colonnes avec une page d'image de héros.

Alors que je modifie Bootstrap, il m'est venu à l'esprit que 80% ou plus de mon temps était consacré à l'apprentissage de la classe ou de l'ID appliqué à quelque chose, puis à la trouver dans le CSS à ajuster. Il est devenu clair que Bootstrap n'allait pas me faire gagner du temps du tout. En fait, Bootstrap augmenterait considérablement les temps de production en raison de la CSS * trop modelée.

* ( par "trop ​​de modèles", je veux dire qu'il y a beaucoup de CSS que je n'utiliserais probablement pas pour un site Web donné. Pas qu'il y ait un CSS inutile dans l'ensemble. )

Je comprends que si j'étais familier avec Bootstrap, je connaîtrais les noms de classe / id et l'emplacement général dans les feuilles de style. Donc, je suis prêt à me pencher un peu sur le temps que cela me prenait, en réalisant que cela était dû en partie à ma propre méconnaissance.

Cependant, je ne peux m'empêcher de me demander si Bootstrap et. Al. ne sont que des béquilles qui paralysent les concepteurs en les alimentant à la cuillère avec leur propre marque de code. Verrouiller ainsi une base de consommateurs qui reposera entièrement sur une solution tierce et sa fonctionnalité pour tout, ou du moins la majorité. Cela me rappelle ceux qui ne peuvent concevoir un site Web que s'ils peuvent utiliser Dreamweaver. Et le ciel nous en préserve s'ils n'ont pas accès à Dreamweaver et qu'un changement est nécessaire.

Lorsque je crée un site, j'utilise mon propre ensemble de noms de classe et d'ID standard. Je structure CSS de façon intuitive pour moi. J'ai mon propre ensemble de modèles de pré-construction pour une configuration rapide. Par conséquent, tout site que je crée peut être édité assez rapidement. L'utilisation de l'un des packages frontaux préconfigurés signifie simplement que je dois apprendre leurs conventions de dénomination et leur structure plutôt que de compter sur les miennes.

• Quelqu'un peut-il me vanter les grandes vertus de systèmes tels que Bootstrap ou HTML5 Boilerplate ?
• Qu'est-ce qui les rend précieux pour vous?
• Connaissez-vous simplement le système que vous utilisez pour pouvoir y naviguer facilement ou devez-vous toujours chercher des objets?
• Pourriez-vous construire un site sans eux si vous le deviez?

J'ai fait beaucoup de recherches sur les frameworks le mois dernier. Je n'ai plongé dans aucune des solutions, mais quelques alternatives de framework qui sont sur ma liste restreinte sont Foundation , Intuit et YAML et Base .

La bonne chose à propos de ceux-ci est qu'ils n'ont pas le look 'Bootstrap' et semblent encourager les designers à leur travail (design), tout en veillant à la réactivité.

Voici une grande liste de frameworks et plus d'informations dans cet article .

Comme mentionné, j'ai fait le travail de recherche, mais je n'ai pas commencé à les tester, donc tout commentaire préconisant l'un des cadres serait utile.

Les avantages ont tendance à être principalement:

• Prototypage rapide (c.-à-d. Vitesse)
• Cohérence du navigateur Cross intégrée

Si vous devez créer une grille et que la grille que vous devez créer correspond au framework CSS pré-construit, alors la logique est que vous êtes à mi-chemin en utilisant le framework.

Cela dit, j'ai tendance à être d'accord avec vous. Les cadres CSS, à mon humble avis, sont comme des modèles de conception visuelle en ce sens que s'ils répondent à 90% de votre objectif, ils sont excellents, mais s'ils ne le font pas, vous passez beaucoup plus de temps et d'efforts à modifier la valeur par défaut que la simple construction le vôtre à partir de zéro.

ADDENDA:

Je devrais ajouter un autre avantage potentiel:

• c'est un système documenté

Dans un environnement d'entreprise, où vous pouvez avoir plusieurs développeurs front-end et le projet peut s'étendre sur plusieurs années avec plusieurs équipes différentes de développeurs front-end, avoir un cadre documenté de couche de présentation sous-jacente peut vous aider.

Cela ne veut pas dire que votre propre infrastructure maison ne peut pas être documentée, c'est juste que la documentation n'est souvent pas une priorité.

Je connais HTML5 Boilerplate, mais je connais mieux Bootstrap, je vais donc en parler. N'oubliez pas que les deux sont axés sur deux tâches différentes (H5BP est un modèle normalisé réactif, Bootstrap est une collection de widgets HTML / CSS / JS et une grille réactive.) En fait, ils peuvent être utilisés ensemble .

Cependant, je ne peux m'empêcher de me demander si Bootstrap et. Al. ne sont que des béquilles qui paralysent les concepteurs en les alimentant à la cuillère avec leur propre marque de code. Verrouiller ainsi une base de consommateurs qui reposera entièrement sur une solution tierce et sa fonctionnalité pour tout, ou du moins la majorité. Cela me rappelle ceux qui ne peuvent concevoir un site Web que s'ils peuvent utiliser Dreamweaver. Et le ciel nous en préserve s'ils n'ont pas accès à Dreamweaver et qu'un changement est nécessaire.

L'analogie échoue ici car vous avez un accès complet à la source Bootstrap. Si vous n'aimez pas comment quelque chose fonctionne, vous pouvez le changer. Pour moi, c'est l'opposé d'une béquille - vous pouvez utiliser le code source pour apprendre les techniques CSS.

Je ne suis pas d'accord pour dire que la «conception d'un site Web» doit être aussi proche du métal que je pense que les codeurs C doivent avoir une connaissance intime du langage d'assemblage. Même si cette analogie tombe à plat parce que l'ajustement du HTML / CSS est simplement une question d'extension des sélecteurs et d'ajout de ce dont vous avez besoin.

Quelqu'un peut-il me vanter les grandes vertus de systèmes tels que Bootstrap ou HTML5 Boilerplate?

Pour moi, la fonctionnalité de tueur de Bootstrap est le style de widget cohérent et facile à appliquer et les composants Javascript. Vous voulez qu'un lien ressemble à un bouton? Ajoutez une classe '.btn'. Vous voulez une table? Ajoutez une classe '.table'. Vous voulez un élément de navigation? Configurez une liste non ordonnée et ajoutez des classes de navigation.

Des listes déroulantes, des popovers, des alertes, etc. sont facilement ajoutés aux éléments avec des attributs de données. Bootstrap comprend un très joli ensemble d'icônes qui peuvent être facilement intégrées dans des widgets.

Qu'est-ce qui les rend précieux pour vous?

• Peut rapidement prototyper des sites
• Tout le débogage des CSS cross-browser et cross-platform a été fait pour moi.
• CSS facilement personnalisable avec une large sélection de variables afin que je puisse expérimenter et prototyper des dispositions rapidement.
• Widgets de navigation standard
• Le code source ouvert et gratuit, je peux me salir les mains et personnaliser le MOINS si j'ai besoin d'un nouveau mixin ou changer de comportement comme je le souhaite.

Connaissez-vous simplement le système que vous utilisez pour pouvoir y naviguer facilement ou devez-vous toujours chercher des objets?

L'une des plus grandes fonctionnalités de Bootstrap est son excellente documentation . Je peux y naviguer facilement et les sélecteurs CSS sont intuitifs et faciles à retenir.

Pourriez-vous construire un site sans eux si vous le deviez?

Oui, mais c'est clairement plus de travail. Je peux me concentrer sur l'UX et les mises en page de prototypes rapides avec de beaux widgets finis et des fonctionnalités cohérentes.

La bonne chose à propos des modèles et des cadres est qu'ils peuvent vous faire gagner beaucoup de temps si vous travaillez comme ils le souhaitent. Ainsi, avec Bootstrap, une fois que vous avez appris leur sémantique pour faire un carrousel JS, c'est presque criminellement simple à implémenter. De plus, Bootstrap semble devenir beaucoup plus simple si vous lancez le vôtre avant de commencer ou utilisez quelque chose comme bootstrap-sass dans Rails pour modifier ces variables à la volée; cela vous évitera de tout changer plus tard.

DA01 parle de cohérence du navigateur ... c'est un facteur important pour moi. C'est pourquoi j'utilise jQuery même si un certain nombre de personnes chez SO vous rappelleront que l'ajout d'une grande bibliothèque juste pour faire quelques choses est un gaspillage de ressources. Je sais que lorsque j'utilise jQuery, cela fonctionnera sur un certain ensemble de navigateurs, et donc même si je peux probablement obtenir une solution plus légère par moi-même, j'ai trouvé plus avantageux d'apprendre comment jQuery veut que j'écrive JavaScript et faites-le à leur façon.

Au final, j'ai tendance à trouver les frameworks HTML / CSS restrictifs; Je suis assez un maniaque du contrôle que j'aime toujours coder à la main quand je le peux. Mais, je respecte le fait que des gens plus intelligents et plus avancés que moi aient passé beaucoup de temps à mettre en place ces modèles / frameworks.

Par intérêt, travaillez-vous au sein d'une grande équipe pour une grande entreprise?

Des cadres tels que le bootstrap sont fantastiques pour créer une norme de code cohérente tout au long d'un projet, cela signifie également que lors du recrutement de nouveaux développeurs, ceux qui ont l'expérience d'un cadre populaire seront déjà familiers avec la syntaxe et peuvent devenir productifs beaucoup plus rapidement ... une excellente nouvelle pour les grandes entreprises.

De plus, avec des frameworks tels que le bootstrap, ils le maintiennent constamment à jour en prenant en charge plus de tailles d'écran, plus d'appareils et de meilleures fonctionnalités, pour une entreprise comme la nôtre (où nous utilisons le bootstrap), cela revient essentiellement à économiser de l'argent.

En lisant certaines des réponses jusqu'à présent, elles semblent être très étroites, je suppose que la plupart des réponses proviennent de personnes habituées à travailler seules ou en très petites équipes et sur des projets plus petits où ce genre de chose n'est généralement pas un problème. .

En plus de ce qui a été dit dans les bonnes réponses précédentes, un autre avantage de ces modèles serait la cohérence entre les appareils . Les grilles intégrées facilitent la conception pour n'importe quel système d'exploitation.

Je préfère toujours écrire mon propre code, pour les raisons suivantes:

• Familiarité avec ce que j'ai déjà écrit. Si je dois changer quelque chose, je sais exactement où il se trouve;

• Structure centrée sur le projet. Chaque nouveau site / application aura des besoins différents des précédents, ainsi les fichiers et les ressources devront peut-être être organisés séparément.

• Vues personnalisées pour différents appareils.

À moins que vous ne créiez une page très restreinte, vous finirez par ajouter de plus en plus de styles à de nouveaux éléments et à remplacer ceux qui existent déjà.

Parce que j'aime travailler avec des conceptions réactives, la principale raison pour laquelle je ne les utiliserais pas est parce que je préfère concevoir chaque étape adaptative "séparément" et dans son ensemble. Et ces modèles fonctionnent généralement avec une grille plus ou moins rigide que vous ne pouvez pas modifier complètement.

Le plus grand avantage est que vous pouvez expérimenter le redimensionnement vous-même au lieu de simplement spéculer à quoi les choses ressembleraient.

J'ai une approche de développement très "content first" où je code la navigation et j'ajoute le contenu texte. Cela a tendance à vous exposer à des choses que vous n'aviez pas prévues lorsque vous étiez en phase de conception.

En utilisant un framework tel que Twitter Bootstrap, vous pouvez réellement tester les pages tout en étant en cours de conception et peut même découvrir des problèmes de convivialité et d'autres défis liés à l'expérience utilisateur. Les frameworks contiennent de nombreuses classes réutilisables avec lesquelles vous vous familiariserez et vous feront gagner du temps.

Vous avez mentionné que vous codiez beaucoup à partir de zéro. Quand j'ai quelque chose qui doit être très personnalisé ou très léger, je vais avec Skeleton

Pendant des années, j'avais l'habitude de tout coder à la main, mais de nos jours j'ai tendance à utiliser Bootstrap. pourquoi est ce que je fais ça?

1. J'obtiens une mise en page réactive avec très peu de travail. Sur certains des sites Web sur lesquels je travaillais, il suffit de quelques ajustements mineurs pour obtenir une mise en page optimisée pour les tablettes et les mobiles. La barre de navigation réactive est l'un de mes composants bootstrap préférés.
2. Les contrôles par défaut ne sont pas cohérents entre les navigateurs et les systèmes d'exploitation, sans oublier qu'ils sont tous toujours laids quel que soit le système d'exploitation ou le navigateur que vous utilisez. Avec bootstrap, vous obtenez un look décent et cohérent et ressentez peu de travail. Si vous voulez quand même remodeler tous les contrôles, alors oui, Bootstrap ne vous fera pas gagner beaucoup de temps, mais d'après mon expérience, la plupart du temps, vous n'auriez pas assez de temps pour remodeler tous les contrôles, mais vous vous sentirez toujours irrité par la laideur par défaut les contrôles.
3. Cela met une limite à ce que vous voulez faire, ce qui est une bonne chose, car lorsque vous travaillez en CSS pur, vous avez tendance à vouloir modifier chaque petit truc (la couleur, l'épaisseur de la bordure, le dégradé, l'ombre, le rayon de la bordure, le transitions, et la liste est longue), alors qu’individuellement elles prennent peu de temps, dans l’ensemble, c’est un temps considérable. Lorsque vous travaillez sur des projets avec une échéance, vous voulez limiter ce que vous pouvez et ne pouvez pas faire; l'utilisation de frameworks vous permet de penser dans des composants à granularité plus grossière au lieu des propriétés CSS à modifier.
4. Certains frameworks côté serveur ont une intégration avec bootstrap. Par exemple, lorsque vous utilisez django-bootstrap, vous pouvez simplement faire {{ form|as_bootstrap }}pour obtenir des styles de style bootstrap, y compris une surbrillance rouge sur les messages d'erreur, etc.

Alors que je modifie Bootstrap, il m'est venu à l'esprit que 80% ou plus de mon temps était consacré à l'apprentissage de la classe ou de l'ID appliqué à quelque chose, puis à la trouver dans le CSS à ajuster.

C'est là que vous vous trompez. Si vous souhaitez bénéficier de Bootstrap, vous ne devriez pas trop personnaliser; vous abandonnez la flexibilité d'avoir à et de pouvoir tout modifier lors de l'utilisation de composants prédéfinis. Vous ne devriez pas passer du temps à scier ou à sculpter des planches de bois lors de la décoration d'une pièce à partir de composants IKEA.

Bootstrap est bon lorsque vous devez patcher rapidement un site Web fonctionnel à partir de composants prédéfinis; leurs composants ressortent comme un pouce endolori si vous les mettez dans des sites avec des designs fantaisistes, donc je laisse généralement Bootstrap pour ce genre de projets.

L'utilisation de l'un des packages frontaux préconfigurés signifie simplement que je dois apprendre leurs conventions de dénomination et leur structure plutôt que de compter sur mes propres moyens.

C'est en fait un avantage d'utiliser un package populaire. Il est plus facile de confier un projet à un autre développeur lorsque vous savez tous les deux ce que "btn-group", "btn btn-large" fait, avec des frameworks personnels, ils devraient apprendre vos particularités (ou plus communément, ils auraient juste une cascade votre css avec leurs changements, et sans prendre la peine d'essayer de déchiffrer ou de modifier votre code).

Connaissez-vous simplement le système que vous utilisez pour pouvoir y naviguer facilement ou devez-vous toujours chercher des objets?

Les plus courants comme btn, table, row *, span *, etc. seraient naturels. Mais pour le code HTML des principaux composants, il est beaucoup plus rapide de simplement copier-coller à partir de leurs exemples plutôt que de les taper.

Pourriez-vous construire un site sans eux si vous le deviez?

J'y suis allé, j'ai fait ça plusieurs fois.

ils ne sont bons que pour:

1. les concepteurs qui ne sont pas familiers avec le codage mais qui souhaitent une solution pour apporter leurs conceptions sur un site.
2. un moyen de diffuser la production en ligne pour quelqu'un qui ne veut pas construire son propre framework.

personnellement, j'ai mes propres méthodes et je n'ai aucune envie de suivre cette voie car j'ai déjà appris à coder CSS, HTML et jQuery. J'y vois un avantage pour les personnes qui n'ont aucune idée et qui essaient d'apprendre à coder. Cela aurait été bien de voir quelque chose comme ça il y a environ cinq ans. De plus, comme vous l'avez indiqué, il vous faudrait plus de temps pour l'implémenter dans vos méthodes de production actuelles.

EDIT: ne pas essayer de détourner votre fil mais je me demande aussi la même chose mais en ce qui concerne WordPress. J'ai légèrement utilisé WordPress mais je ne sais pas si un framework est bénéfique. J'ai prévu d'aller à l'ancienne jusqu'à ce que je trouve un avantage majeur.

Bootstrap est un bon point de départ pour une mise en page réactive. Mais en ce qui concerne le design, je pense que son joli manque. Il fait son look un peu "bootstrappy", qui parce que son modèle est extrêmement utilisé.

Mais vous devez garder à l'esprit la raison pour laquelle le bootstrap a été conçu, c'était pour apporter de la cohérence aux applications internes construites par Twitter, et si vous deviez l'utiliser pour cela, ou même si vous êtes un développeur qui veut rapidement mettre à jour le Web application sans beaucoup de réflexion, peut-être en tant que mvp ou prototype, c'est un très bon outil.