Best Practices für die Anpassung von Twitter-Bootstraps [geschlossen]

Ich arbeite mit Bootstrap 2.0.3 mit WENIGER. Ich möchte es umfassend anpassen, aber ich möchte nach Möglichkeit vermeiden, Änderungen an der Quelle vorzunehmen, da Änderungen an den Bibliotheken häufig sind. Ich bin neu bei LESS, daher weiß ich nicht, wie die Kompilierung vollständig funktioniert. Was sind einige Best Practices für die Arbeit mit WENIGER oder WENIGER basierten Frameworks?

Meine Lösung ist ähnlich wie die von jstam, aber ich vermeide es, wenn möglich, Änderungen an den Quelldateien vorzunehmen. Angesichts der häufigen Änderungen am Bootstrap möchte ich in der Lage sein, die neueste Quelle abzurufen und minimale Änderungen vorzunehmen, indem ich meine Änderungen in separaten Dateien aufbewahre. Natürlich ist es nicht vollständig kugelsicher.

1. Kopieren Sie bootstrap.less und variables.less in das übergeordnete Verzeichnis. Benennen Sie bootstrap.less in theme.less oder was auch immer Sie wollen um. Ihre Verzeichnisverzeichnisstruktur sollte folgendermaßen aussehen:

   /Website            
        theme.less
        variables.less
        /Bootstrap
        ...

2. Aktualisieren Sie alle Verweise in theme.less, um auf das Bootstrap-Unterverzeichnis zu verweisen. Stellen Sie sicher, dass auf Ihre Variablen.less vom übergeordneten Verzeichnis und nicht wie folgt vom Bootstrap-Verzeichnis verwiesen wird:

   ...
   // 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. Fügen Sie Ihre CSS-Überschreibungen unmittelbar nach dem Einfügen in die Datei theme.less ein.

   ...
   // 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. Verknüpfen Sie theme.less anstelle von bootstrap.less in Ihren HTML-Seiten.

Immer wenn eine neue Version herauskommt, sollten Ihre Änderungen sicher sein. Sie sollten auch einen Unterschied zwischen Ihren benutzerdefinierten Bootstrap-Dateien machen, wenn eine neue Version herauskommt. Variablen und Importe können sich ändern.

Damit habe ich auch zu kämpfen. Einerseits möchte ich die Datei variables.less mit meinen eigenen Farben und Einstellungen stark anpassen. Andererseits möchte ich die Bootstrap-Dateien ein wenig wie möglich ändern, um den Upgrade-Prozess zu vereinfachen.

Meine Lösung (vorerst) besteht darin, eine Addon-WENIGER-Datei zu erstellen und diese in die bootstrap.lessDatei einzufügen, nachdem die Variablen und Mixins importiert wurden. Also so etwas wie das:

...

// 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";

...

Auf diese Weise kann ich Bootstrap-Farben und -Schriftarten zurücksetzen oder zusätzliche Mixins hinzufügen. Mein Code ist separat, wird jedoch im Rahmen der restlichen Bootstrap-Importe kompiliert. Es ist nicht perfekt, aber es ist eine Notlösung, die für mich gut funktioniert hat.

Von meiner Seite habe ich nur eine Datei mit dem Namen theme.lessimportiert boostrap.less, und direkt darunter überschreibe ich den Variablenwert, den ich nicht aktualisieren möchte (auch wenn es mit WENIGER schlecht zu sein scheint, aber es ist einfacher zu pflegen) .

Dies funktioniert gut, wenn benutzerdefinierte Werte für Variablen in vorhanden sind variables.less

Danach kompiliere ich theme.lessstattdessen meine Datei ausbootstrap.less

Beispiel theme.less:

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

Ein weitaus besserer Ansatz (IMHO) besteht darin, sich am Bootswatch- Github-Projekt namens Swatchmaker zu orientieren . Dieses Projekt ist speziell auf das Erstellen und Verwalten von Dutzenden von Bootstrap-Themen auf der Website zugeschnitten.

Das Makefileim Projekt erstellt swatchmaker.less(Sie können es in etwas umbenennen customizations.less). Diese Datei enthält eine Reihe von Importen:

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

Sie können den swatchOrdner und die bootswatch.lessDateien nach Belieben umbenennen .

Dies ist sinnvoll, da Sie Bootstrap aktualisieren können, ohne Ihre eigenen Dateien zu beeinträchtigen. Tatsächlich Makefileenthält das auch Befehle zum Abrufen der neuesten Version von Bootstrap. Weitere Informationen finden Sie in der README-Datei auf der Projektseite.

Als Bonus schlägt die README- Datei auch vor, dass Sie das watchrJuwel installieren, das das Projekt automatisch erstellt, wenn sich eine .lessDatei ändert.

Wenn (und nur wenn) Sie die Zeit haben, können Sie es so machen wie ich. Ich behalte meine eigene geänderte Version der Frameworks und lese bei jedem Update des Frameworks die Dokumente und überprüfe die Quelle auf Änderungen.

Diese Lösung klingt auf den ersten Blick vielleicht weniger ideal, aber ich habe meine Gründe dafür. Ich arbeite nicht mit einem, sondern mit einer Mischung aus vielen Frameworks, Best Practices, Resets / Normalisierungs-Stylesheets usw., und ich bin mir immer sicher, dass kein Update jemals bestehende Projekte in einer Weise verändern wird, die ich nicht erwartet habe.

Ich arbeite aus folgenden Gründen an und mit meinem eigenen benutzerdefinierten Framework.

1. Ich ziehe jedes bisschen aus, ich muss nicht modular und klein bleiben
2. Ich benutze mein Framework für Kundenjobs und möchte a) wissen, womit ich genau arbeite, während ich b) alles besitze, was ich an den Kunden verkaufe. Ich kopiere und verwende nicht nur Frameworks, sondern versuche sie zu verstehen und neu zu erstellen
3. Ich verwende mein Framework in Kombination mit einem CMS und kann ein Framework nicht einfach in ein Projekt einfügen / von vorne beginnen

Ich kam zu der gleichen Lösung wie Joel:

Benutzerdefinierte weniger Dateien

Genau wie oben beschrieben: Ich erstelle lokale Kopien für alle Less-Dateien, die ich anpasse: Zum Beispiel: "variables-custom.less", "alerts-custom.less", "button-custom.less". So kann ich einige Standards verwenden und meine eigenen Ergänzungen haben. Der Nachteil ist: Wenn Bootstrap aktualisiert wird, ist die Migration sehr schwierig.

Aber es gibt noch etwas anderes:

Stile überschreiben

Wenn ich mich nach Workflows umsehe, sehe ich oft Leute, die vorschlagen, Stile einfach zu überschreiben. Sie importieren also zuerst die Standard-Less-Dateien und fügen dann unten Ihre benutzerdefinierten Deklarationen hinzu. Der Vorteil hier ist: Es ist einfacher, auf eine neuere Version zu aktualisieren. Der Nachteil ist: Die kompilierte CSS-Datei enthält alle Überschreibungen. Einige CSS-Selektoren werden zweimal definiert. Der Browser muss also etwas heben, um herauszufinden, was tatsächlich angewendet werden soll. Das ist nicht wirklich sauber.

Ich frage mich, warum Präprozessoren nicht klug genug sind, um solche Doppeldeklarationen zu lösen. Gibt es einen besseren Workflow, den ich hier vermisse?

Fügen Sie einfach @import "../../styles.less";(oder wo immer sich Ihr Stylesheet befindet) Bootstrap.less unten hinzu. Auf diese Weise können Sie Bootstrap-Mixins wie .gradientoder .border-radiusin Ihren eigenen Stilen verwenden.