Meilleures pratiques de personnalisation de Twitter Bootstrap

Question

Je travaille avec Bootstrap 2.0.3 en utilisant LESS. Je veux le personnaliser largement, mais je veux éviter autant que possible de modifier les sources, car les modifications des bibliothèques sont fréquentes. Je suis novice en matière de LESS et je ne sais pas comment fonctionne entièrement sa compilation. Quelles sont les meilleures pratiques pour travailler avec LESS ou les frameworks basés sur LESS ?

Answer 1

Ma solution est similaire à celle de Jstam, mais j'évite autant que possible de modifier les fichiers sources. Étant donné que les changements apportés à bootstrap seront fréquents, je veux être en mesure de télécharger la dernière source et de faire des changements minimaux en conservant mes modifications dans des fichiers séparés. Bien sûr, ce n'est pas totalement infaillible.

1. Copiez les fichiers bootstrap.less et variables.less dans le répertoire parent. Renommez bootstrap.less en theme.less ou ce que vous voulez. La structure de votre répertoire devrait 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 fichier variables.less est référencé à partir du répertoire parent et non du répertoire bootstrap comme suit :

   ...
   // 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 surcharges CSS dans le fichier theme.less immédiatement après l'endroit où elles sont incluses.

   ...
   // 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. Créez un lien vers theme.less au lieu de bootstrap.less dans vos pages HTML.

Chaque fois qu'une nouvelle version sort, vos modifications devraient être sûres. Vous devriez également faire une comparaison entre vos fichiers bootstrap personnalisés chaque fois qu'une nouvelle version est publiée. Les variables et les importations peuvent changer.

Answer 2

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

Ma solution (pour l'instant) consiste à créer un fichier LESS pour l'addon et à l'insérer dans le répertoire de l'addon. bootstrap.less après que les variables et les mixins aient été importés. 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";

...

Ainsi, si je veux réinitialiser les couleurs et les polices de Bootstrap ou ajouter des mixins supplémentaires, je peux le faire. Mon code est distinct, mais il sera compilé avec le reste des importations Bootstrap. Ce n'est pas parfait, mais c'est un palliatif qui a bien fonctionné pour moi.

Answer 3

De mon côté, j'ai juste un fichier nommé theme.less avec une importation de boostrap.less et juste en dessous je surcharge (même si ça semble mauvais d'utiliser LESS, mais bon, c'est plus facile à maintenir) la valeur de la variable que je veux mettre à jour.

Cela fonctionne bien si l'on veut avoir des valeurs personnalisées pour les variables dans les documents suivants variables.less

Après cela, je compile mon theme.less au lieu de bootstrap.less

Exemple theme.less :

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

Answer 4

Kickstrap fait essentiellement ce que vous voulez faire. http://getkickstrap.com

Answer 5

Une bien meilleure approche (IMHO) consiste à s'inspirer de l'expérience de la Commission européenne. Bootswatch projet github appelé swatchmaker . Ce projet est spécialement conçu pour la création et la gestion des dizaines de thèmes Bootstrap du site Web.

El Makefile dans les constructions du projet swatchmaker.less (vous pouvez le renommer en quelque chose comme customizations.less ). Ce fichier contient un ensemble d'importations :

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

Vous pouvez renommer le swatch et bootswatch.less à ce que vous trouvez approprié.

C'est logique puisque vous pouvez mettre à jour Bootstrap sans affecter vos propres fichiers. En fait, le Makefile contient également des commandes permettant de récupérer la dernière version de Bootstrap. Consultez le fichier README sur la page du projet pour en savoir plus.

En prime, le README suggère également d'installer le programme watchr qui compilera automatiquement le projet lorsqu'un fichier .less changements de fichiers.