Twitter Best Bootstrap Customization Best Practices [fermé]


285

Je travaille avec Bootstrap 2.0.3 en utilisant MOINS. Je veux le personnaliser en détail, mais je veux éviter de faire des changements à la source autant que possible car les changements dans les bibliothèques sont fréquents. Je suis nouveau sur LESS donc je ne sais pas comment fonctionne sa compilation. Quelles sont les meilleures pratiques pour travailler avec des cadres LESS ou LESS?


Salutations de l'avenir! Les "meilleures pratiques" de personnalisation du bootstrap ont changé dans les versions 3.x et 4.x basées sur SASS: stackoverflow.com/a/50410667/171456
Zim

Réponses:


180

Ma solution est similaire à celle de jstam, mais j'évite d'apporter des modifications aux fichiers source lorsque cela est possible. Étant donné que les modifications apportées au bootstrap seront fréquentes, je veux pouvoir extraire la dernière source et apporter des modifications minimales en conservant mes modifications dans des fichiers séparés. Bien sûr, ce n'est pas complètement à l'épreuve des balles.

  1. Copiez bootstrap.less et variables.less dans le répertoire parent. Renommez bootstrap.less en theme.less ou tout ce que vous voulez. La structure de votre répertoire doit ressembler à ceci:

    /Website            
         theme.less
         variables.less
         /Bootstrap
         ...
  2. Mettez à jour toutes les références dans theme.less pour pointer vers le sous-répertoire bootstrap. Assurez-vous que votre variables.less est référencé à partir du parent et non du répertoire d'amorçage comme ceci:

    ...
    // CSS Reset
    @import "bootstrap/reset.less";
    
    // Core variables and mixins
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc
    @import "bootstrap/mixins.less";
    
    // Grid system and page structure
    @import "bootstrap/scaffolding.less";
    @import "bootstrap/grid.less";
    @import "bootstrap/layouts.less";

    ...

  3. Ajoutez vos remplacements CSS dans le fichier theme.less immédiatement après leur emplacement.

    ...
    // Components: Nav
    @import "bootstrap/navs.less";
    @import "bootstrap/navbar.less";
    
    // overrides
    .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
        border-radius: 0 0 0 0;
        padding: 10px;
    }
    
    .nav-tabs, .nav-pills {
        text-transform: uppercase;
    }
    
    .navbar .nav > li > a {
        text-shadow: none;
    }
    
    ...
  4. Lien vers theme.less au lieu de bootstrap.less dans vos pages HTML.

Chaque fois qu'une nouvelle version sort, vos modifications doivent être sécurisées. Vous devez également faire une différence entre vos fichiers d'amorçage personnalisés chaque fois qu'une nouvelle version sort. Les variables et les importations peuvent changer.


Y a-t-il une raison spécifique pour le n ° 3? Que se passe-t-il si tous vos CSS personnalisés apparaissent en bas après toutes les importations, au lieu d'être mélangés après chaque importation?
AaronLS

2
@AaronLS: Cela devrait aussi fonctionner. Je pense que le numéro 3 est pour le garder organisé.
Jonatan Littke

@joelrodgers Pourquoi mixins.less ne devrait-il pas être édité directement?
Joe Isaacson

À quoi pensez-vous inclure un fichier variables-custom.less vide (via @import) dans bootstrap.less? Ensuite, tout le monde pourra personnaliser les variables Bootstrap par défaut et les mettre à jour en toute sécurité. Quoi qu'il en soit, je pense que cette fonctionnalité doit absolument être incluse dans Bootstrap.
adriendenat

36

C'est quelque chose avec lequel j'ai également lutté. D'une part, je souhaite personnaliser fortement le fichier variables.less avec mes propres couleurs et paramètres. D'un autre côté, je souhaite modifier un peu les fichiers Bootstrap pour faciliter le processus de mise à niveau.

Ma solution (pour l'instant) est de créer un fichier addon LESS et de l'insérer dans le bootstrap.lessfichier après l'importation des variables et mixins. Donc quelque chose comme ça:

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

De cette façon, si je veux réinitialiser les couleurs, les polices Bootstrap ou ajouter des mixins supplémentaires, je le peux. Mon code est séparé mais sera compilé dans le reste des importations Bootstrap. Ce n'est pas parfait, mais c'est un trou d'arrêt qui a bien fonctionné pour moi.


1
Bonne solution. C'est exactement ce que j'ai fait avec quelques changements. Regardez ma réponse. Il était trop long pour faire un commentaire.
Joel Rodgers

J'aime aussi ta solution, Joel. Belle séparation de votre code par rapport au code du framework.
jstam

Étant donné que les mixins font référence à des variables, aurais-je besoin d'un fichier custom-variables.less supplémentaire entre les variables.less et mixins.less? Pour que je puisse modifier des variables comme @baseFontSize. Je n'en sais même pas assez pour savoir si cela va m'étouffer en déclarant à nouveau une variable du même nom.
AaronLS

J'ai trouvé que c'était la solution la plus utile parce que pour une nouvelle copie de bootstrap, nous devons simplement ajouter une ligne à nouveau bootstrap.less, saisir notre fichier personnalisé VS changer potentiellement de nombreuses lignes si les noms de fichiers sans noyau changent, etc ... J'ai utilisé cette solution, recompilé mon JS minifié à l'aide de grognement et tout va bien dans le capot! Personnalisations fonctionnant sans aucune !importantdéclaration non conviviale !
twknab

25

De mon côté, j'ai juste un fichier nommé theme.lessavec une importation boostrap.lessdedans, et juste en dessous je remplace (même s'il semble être mauvais en utilisant MOINS, mais bon, c'est plus facile à maintenir) la valeur de la variable que je ne veux pas mettre à jour .

Cela fonctionne bien pour avoir des valeurs personnalisées pour les variables dans variables.less

Après cela, je compile mon theme.lessfichier à la placebootstrap.less

Exemple theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

1
C'est le moyen 1) d'avoir une copie du code d'amorçage qui peut être mis à jour à volonté tout en 2) de pouvoir imposer vos propres paramètres personnalisés. Voir stackoverflow.com/questions/13809895/… pour plus de détails sur la structure des dossiers.
Jeromy French

J'ai veillé à mettre cela avant mon propre code moins pour m'assurer que le bootstrap ne le remplaçait pas.
Aram Kocharyan

Cela a très bien fonctionné pour moi. Je viens de pointer Koala sur theme.less et il se compile chaque fois que j'enregistre.
ow3n le

Si quelqu'un utilise la version SASS, faites attention à ! Default
prasanthv

5

Une approche bien meilleure (à mon humble avis ) consiste à s'inspirer du projet Bootswatch Github appelé Swatchmaker . Ce projet est spécialement conçu pour créer et gérer des dizaines de thèmes Bootstrap sur le site Web.

Le Makefiledans le projet se construit swatchmaker.less(vous pouvez le renommer en quelque chose comme customizations.less). Ce fichier contient un tas d'importations:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

Vous pouvez renommer le swatchdossier et les bootswatch.lessfichiers comme bon vous semble.

Cela est logique car vous pouvez mettre à niveau Bootstrap sans affecter vos propres fichiers. En fait, le Makefilecontient également des commandes pour récupérer la dernière version de Bootstrap. Voir le LISEZMOI sur la page du projet pour en savoir plus.

En prime, le fichier README vous suggère également d'installer la watchrgemme qui construira automatiquement le projet lorsqu'un .lessfichier change.


4

Si (ET UNIQUEMENT SI) vous avez le temps, vous pouvez le faire comme moi. Je garde ma propre version modifiée du ou des frameworks et à chaque mise à jour du framework, je lis les documents et vérifie la source des modifications.

Cette solution peut sembler moins idéale à première vue, mais j'ai mes raisons de le faire. Je ne travaille pas avec un seul mais un amalgame de nombreux cadres, meilleures pratiques, réinitialisations / feuilles de style de normalisation, etc. et je suis toujours sûr qu'aucune mise à jour ne changera jamais les projets existants d'une manière que je ne voyais pas venir.

Je travaille sur et avec mon propre framework personnalisé pour les raisons suivantes.

  1. Je dépouille chaque petit morceau, je n'ai pas besoin de garder les choses modulaires et petites
  2. J'utilise mon framework pour les emplois clients et je veux a) savoir exactement avec quoi je travaille tout en b) posséder tout ce que je vends au client. Je ne fais pas que copier et utiliser des frameworks, mais essayer de les comprendre et de les recréer
  3. J'utilise mon framework en combinaison avec un CMS et je ne peux pas simplement déposer et oublier un framework dans un projet / recommencer à zéro

Oui, je comprends, mais pour moi, les choses changent si vite que toute cette technologie Web devient un peu écrasante à suivre.
Joel Rodgers

1
Comme mentionné: mon approche est uniquement pour ceux qui gardent un œil sur le développement actuel de plusieurs cadres. Je le fais parce que je dois rester au courant du développement et des différentes approches des défis techniques. Je pense que cela convient mieux aux développeurs de frameworks qu'aux freelances qui veulent juste "faire le travail".
Tous les bits sont égaux

4

Je suis arrivé à la même solution que Joel:

Fichiers moins personnalisés

Tout comme décrit ci-dessus: je crée des copies locales pour tous les fichiers Less que je personnalise: Tels que: "variables-custom.less", "alerts-custom.less", "buttons-custom.less". Je peux donc utiliser certaines normes et avoir mes propres ajouts. L'inconvénient est: lorsque Bootstrap sera mis à jour, il est vraiment difficile de migrer.

Mais il y a autre chose:

Remplacer les styles

Lorsque je regarde les flux de travail, je vois souvent des gens suggérer de simplement remplacer les styles. Vous importez donc d'abord les fichiers Less standard, puis ajoutez vos déclarations personnalisées en bas. L'avantage ici est: il est plus facile de passer à une version plus récente. L'inconvénient est le suivant: le fichier CSS compilé comprend tous les remplacements. Certains sélecteurs CSS sont définis deux fois. Le navigateur doit donc faire quelques efforts pour savoir quoi appliquer réellement. Ce n'est pas vraiment propre.

Je me demande pourquoi les préprocesseurs ne sont pas assez intelligents pour résoudre de telles doubles déclarations? Y a-t-il un meilleur flux de travail qui me manque ici?


1
Je vois que vous êtes point, mais vous pouvez toujours exécuter un utilitaire de nettoyage CSS en ligne ou localement. Voici une liste d'entre eux: stackoverflow.com/questions/135657/… Vous ne voulez probablement pas qu'un compilateur moins s'exécute dans le produit de toute façon.
Joel Rodgers

merci pour la réponse, je ne savais pas qu'il y avait des outils de dépoussiérage. cool, je vais creuser dedans. En fait, j'utilise un compilateur moins local de toute façon (CodeKit). Je ne veux pas compiler deux fois le CSS.
Frank Lämmer

2

Ajoutez simplement @import "../../styles.less";(ou où que se trouve votre feuille de style) à bootstrap.less en bas. Cela vous permet d'utiliser des mixins Bootstrap comme .gradientou à l' .border-radiusintérieur de vos propres styles.less.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.