Twitter Bootstrap Meilleures pratiques de personnalisation
Je travaille avec Bootstrap 2.0.3 en utilisant LESS. Je souhaite le personnaliser à fond, mais je souhaite éviter de modifier la source autant que possible car les modifications apportées aux bibliothèques sont fréquentes. Je suis nouveau à MOINS alors je ne sais pas comment sa compilation fonctionne entièrement. Quelles sont les meilleures pratiques pour travailler avec des frameworks LESS ou LESS?
Ma solution est semblable à celle de jstam, mais j’évite d’apporter des modifications aux fichiers source lorsque cela est possible. Étant donné que les modifications apportées à bootstrap seront fréquentes, je souhaite pouvoir extraire la dernière source et effectuer des modifications minimes en conservant mes modifications dans des fichiers séparés. Bien sûr, ce n'est pas complètement à l'épreuve des balles.
Copiez les fichiers bootstrap.less et variables.less dans le répertoire parent. Renommez bootstrap.less en theme.less ou ce que vous voulez. Votre structure de répertoires devrait ressembler à ceci:
/Website theme.less variables.less /Bootstrap ...Mettez à jour toutes les références dans theme.less pour qu'elles pointent vers le sous-répertoire bootstrap. Assurez-vous que votre variable.less est référencée à partir du parent et non du répertoire bootstrap 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";...
Ajoutez vos substitutions CSS dans le fichier theme.less immédiatement après leur inclusion.
... // 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; } ...Faites un lien vers theme.less au lieu de bootstrap.less dans vos pages HTML.
Chaque fois qu'une nouvelle version est disponible, vos modifications doivent être sécurisées. Vous devriez également faire un diff entre vos fichiers personnalisés bootstrap chaque fois qu'une nouvelle version est disponible. Les variables et les importations peuvent changer.
C'est quelque chose avec lequel j'ai eu du mal aussi. D'une part, je souhaite hautement personnaliser le fichier variables.less avec mes propres couleurs et paramètres. D'autre part, je souhaite modifier un peu les fichiers Bootstrap afin de faciliter le processus de mise à niveau.
Ma solution (pour l'instant) consiste à créer un fichier LESS addon et à l'insérer dans le fichier bootstrap.less après l'importation des variables et des 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 Bootstrap couleurs, polices 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 palliatif qui a bien fonctionné pour moi.
De mon côté, j'ai juste un fichier nommé theme.less avec une importation de boostrap.less dedans, et juste en dessous, je remplace (même si cela semble être mauvais en utilisant LESS, mais bon, c'est plus facile à maintenir ) la valeur de la variable que je ne souhaite pas mettre à jour.
Cela fonctionne bien pour avoir des valeurs personnalisées pour les variables dans variables.less
Après cela, je compile mon fichier theme.less à la place de bootstrap.less
Exemple theme.less:
@import "path/to/my/bootstrap.less";
@linkColor: #MyAwesomeColor;
Une approche bien meilleure (IMHO) consiste à s'inspirer du projet github Bootswatch appelé swatchmaker . Ce projet est spécialement conçu pour la construction et la gestion de dizaines de Bootstrap thèmes sur le site Web.
Le Makefile dans le projet génère swatchmaker.less (vous pouvez le renommer comme suit: 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 les dossiers swatch et bootswatch.less selon vos besoins.
Cela a du sens puisque vous pouvez mettre à niveau Bootstrap sans affecter vos propres fichiers. En fait, Makefile contient également des commandes permettant d’extraire la dernière version de Bootstrap. Voir le README sur la page du projet pour plus d'informations.
En prime, le README vous suggère également d'installer la gemme watchr qui construira automatiquement le projet lorsqu'un fichier .less sera modifié.
Je suis venu à la même solution que Joel:
moins de fichiers 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", "boutons-custom.less". Donc, je peux utiliser certaines normes et avoir mes propres ajouts. L'inconvénient est que: lorsque Bootstrap sera mis à jour, il est très difficile de migrer.
Mais il y a autre chose:
Styles de remplacement
Lorsque je regarde autour de moi pour voir les flux de travail, je vois souvent des gens suggérer de simplement remplacer les styles. Vous devez donc d'abord importer les fichiers standard Less, puis ajouter vos déclarations personnalisées en bas. L'avantage est qu'il est plus facile de passer à une version plus récente. L'inconvénient est que: le fichier CSS compilé inclut tous les remplacements. Certains sélecteurs CSS sont définis deux fois. Le navigateur doit donc faire des 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?
Si (et seulement si) vous avez le temps, vous pouvez le faire comme je le fais. Je garde ma propre version modifiée du ou des framework (s) et avec chaque mise à jour du framework, je lis la documentation et vérifie les modifications apportées à la source.
Cette solution peut sembler moins idéale au premier abord, mais j’ai mes raisons de le faire. Je ne travaille pas avec un seul, mais un amalgame de nombreux cadres, meilleures pratiques, feuilles de style de réinitialisations/normalisation, etc.
Je travaille sur et avec mon propre framework personnalisé pour les raisons suivantes.
- Je dépouille chaque petit morceau, je n'ai pas besoin de garder des choses modulaires et petites
- J'utilise mon cadre pour les travaux des clients et je veux a) savoir exactement ce 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
- J'utilise mon framework en combinaison avec un CMS et je ne peux pas simplement laisser tomber et oublier un framework dans un projet/recommencer à zéro
Ajoutez simplement @import "../../styles.less"; (ou où que soit votre feuille de style) à bootstrap.less en bas. Cela vous permet d'utiliser Bootstrap mixins comme .gradient ou .border-radius dans votre propre style.less.