Twitter Best Bootstrap Customization Best Practices [fermé]

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?

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.

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.

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;  

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.

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

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?

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.