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

285

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?

Joel Rodgers
quelle
Grüße aus der Zukunft! Die "Best Practices" für die Bootstrap-Anpassung wurden in SASS-basierten 3.x und 4.x geändert
Zim

Antworten:

180

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.

Joel Rodgers
quelle
Gibt es einen bestimmten Grund für # 3? Was passiert, wenn alle Ihre benutzerdefinierten CSS nach allen Importen unten angezeigt werden, anstatt nach jedem Import vermischt zu werden?
AaronLS
2
@ AaronLS: Das sollte auch funktionieren. Ich denke, Nummer 3 ist dafür da, es organisiert zu halten.
Jonatan Littke
@joelrodgers Warum sollte mixins.less nicht direkt bearbeitet werden?
Joe Isaacson
Was halten Sie davon, eine leere Datei variables-custom.less (über @import) in bootstrap.less aufzunehmen? Dann kann jeder die Standard-Bootstrap-Variablen anpassen und sicher aktualisieren. Jedenfalls denke ich, dass diese Funktion unbedingt in Bootstrap enthalten sein muss.
Adriendenat
36

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.

jstam
quelle
1
Gute Lösung. Genau das habe ich mit einigen Änderungen gemacht. Schau dir meine Antwort an. Es war zu lang, um einen Kommentar abzugeben.
Joel Rodgers
Ich mag auch deine Lösung, Joel. Schöne Trennung Ihres Codes vom Code des Frameworks.
Jstam
Da mixins auf Variablen verweist, benötige ich zusätzliche benutzerdefinierte Variablen.less zwischen variables.less und mixins.less import? Damit ich Variablen wie @baseFontSize ändern kann. Ich weiß nicht einmal genug, um zu wissen, ob es mich ersticken wird, wenn ich wieder eine gleichnamige Variable deklariere.
AaronLS
Ich fand, dass dies die hilfreichste Lösung ist, da wir für eine neue Kopie von Bootstrap einfach eine Zeile erneut hinzufügen müssen, um bootstrap.lessunsere angepasste Datei abzurufen und möglicherweise viele Zeilen zu ändern, wenn sich die kernlosen Dateinamen usw. ändern. Ich habe sie verwendet Diese Lösung hat mein minimiertes JS mit Grunzen neu kompiliert und alles ist gut in der Haube! Anpassungen funktionieren ohne unfreundliche !importantAussagen!
Twknab
25

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;  
Sam
quelle
1
Dies ist der Weg, um 1) eine Kopie des Bootstrap-Codes zu haben, die nach Belieben aktualisiert werden kann, während 2) Sie Ihre eigenen benutzerdefinierten Einstellungen vornehmen können. Weitere Informationen zur Ordnerstruktur finden Sie unter stackoverflow.com/questions/13809895/… .
Jeromy French
Ich habe dafür gesorgt, dass dies vor meinem eigenen weniger Code steht, um sicherzustellen, dass Bootstrap ihn nicht überschreibt.
Aram Kocharyan
Das hat bei mir super funktioniert. Ich habe Koala nur auf theme.less gerichtet und es wird jedes Mal kompiliert, wenn ich speichere.
Ow3n
Wenn
5

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.

Aleemb
quelle
4

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
Alle Bits gleich
quelle
Ja, ich verstehe, aber für mich ändern sich die Dinge so schnell, dass all diese Web-Technologie ein bisschen überwältigend wird, um den Überblick zu behalten.
Joel Rodgers
1
Wie bereits erwähnt: Mein Ansatz richtet sich nur an diejenigen, die die aktuelle Entwicklung mehrerer Frameworks im Auge behalten. Ich mache das, weil ich über die Entwicklung und die unterschiedlichen Ansätze für technische Herausforderungen auf dem Laufenden bleiben muss. Ich denke, dies ist besser für Framework-Entwickler geeignet als für Freiberufler, die nur "die Arbeit erledigen wollen".
Alle Bits gleich
4

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?

Frank Lämmer
quelle
1
Ich verstehe, dass Sie Recht haben, aber Sie können ein CSS-Reinigungsprogramm immer online oder lokal ausführen. Hier ist eine Liste von ihnen: stackoverflow.com/questions/135657/… Sie möchten wahrscheinlich sowieso nicht, dass weniger Compiler im Produkt ausgeführt werden.
Joel Rodgers
Danke für die Antwort, war mir nicht bewusst, dass es Staub-mich-Werkzeuge gibt. cool, ich werde mich damit beschäftigen. Eigentlich benutze ich sowieso lokal weniger Compiler (CodeKit). Ich möchte das CSS nicht zweimal kompilieren.
Frank Lämmer
2

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.

dallen
quelle