it-swarm.com.de

Twitter Bootstrap Best Practices zur Anpassung

Ich arbeite mit Bootstrap 2.0.3 mit WENIGER. Ich möchte es umfangreich anpassen, aber ich möchte vermeiden, Änderungen an der Quelle vorzunehmen, wenn dies möglich ist, da Änderungen an den Bibliotheken häufig vorkommen Neu bei LESS, daher weiß ich nicht, wie die Kompilierung vollständig funktioniert. Was sind einige bewährte Methoden für die Arbeit mit LESS- oder LESS-basierten Frameworks?

285
Joel Rodgers

Meine Lösung ist ähnlich wie die von jstam, aber ich vermeide Änderungen an den Quelldateien, wenn dies möglich ist. Da die Änderungen an bootstrap häufig vorkommen, möchte ich in der Lage sein, die neueste Quelle abzurufen und minimale Änderungen vorzunehmen, indem ich meine Änderungen in separaten Dateien behalte. Natürlich ist dies nicht vollständig kugelsicher .

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

    /Website            
         theme.less
         variables.less
         /Bootstrap
         ...
    
  2. Aktualisieren Sie alle Verweise in theme.less, um auf das Unterverzeichnis bootstrap zu verweisen. Stellen Sie sicher, dass Ihre variables.less vom übergeordneten Verzeichnis und nicht vom Verzeichnis bootstrap referenziert wird wie so:

    ...
    // 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 in die theme.less-Datei ein, unmittelbar nachdem sie enthalten sind.

    ...
    // 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 Ihre HTML-Seiten mit theme.less anstelle von bootstrap.less.

Wann immer 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.

180
Joel Rodgers

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

Meine Lösung ist (fürs Erste), eine WENIGER-Addon-Datei zu erstellen und sie in das bootstrap.less Datei nachdem die Variablen und Mixins importiert wurden. So etwas in der Art:

...

// 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, Schriftarten oder zusätzliche Mixins hinzufügen. Mein Code ist separat, wird jedoch im Rest des Befehls Bootstrap kompiliert Es ist nicht perfekt, aber es ist eine Lücke, die für mich gut funktioniert hat.

36
jstam

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

Dies eignet sich gut für benutzerdefinierte Werte für Variablen in variables.less

Danach kompiliere ich mein theme.less Datei statt aus bootstrap.less

Beispiel theme.less:

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

Ein weitaus besserer (IMHO) Ansatz ist es, sich am Bootswatch Github-Projekt mit dem Namen Swatchmaker zu orientieren. Dieses Projekt ist speziell auf die Erstellung und Verwaltung von Dutzenden von Bootstrap Themes auf der Website zugeschnitten.

Das Makefile im Projekt erstellt swatchmaker.less (Sie können es in customizations.less Umbenennen). 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 Ordner swatch und die Dateien bootswatch.less Nach Belieben umbenennen.

Dies ist sinnvoll, da Sie Bootstrap ohne Auswirkungen auf Ihre eigenen Dateien aktualisieren können. Tatsächlich enthält das Makefile auch Befehle zum Abrufen der neuesten Version von Bootstrap. Siehe README auf der Projektseite für mehr.

Als Bonus schlägt die README auch vor, dass Sie den Gem watchr installieren, der das Projekt automatisch erstellt, wenn sich eine .less - Datei ändert.

5
aleemb

Ich kam zu der gleichen Lösung wie Joel:

Benutzerdefiniert 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", "buttons-custom.less". So kann ich einige Standards verwenden und meine eigenen Zusätze haben. Der Nachteil ist: Wenn Bootstrap aktualisiert wird, ist die Migration wirklich 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 dabei ist: Es ist einfacher, auf eine neuere Version zu aktualisieren. Der Nachteil ist: Die kompilierte CSS-Datei enthält alle Überschreibungen. Einige CSS-Selektoren sind doppelt definiert. Der Browser muss also einige Schritte ausführen, 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 Doppelerklärungen zu lösen? Gibt es einen besseren Workflow, den ich hier vermisse?

4
Frank Lämmer

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

Diese Lösung mag auf den ersten Blick weniger ideal klingen, aber ich habe meine Gründe dafür. Ich arbeite nicht mit einem, sondern mit einer Vielzahl von Frameworks, Best Practices, Resets/Normalization-Stylesheets usw., und ich bin mir immer sicher, dass kein Update jemals bestehende Projekte auf eine Weise verändern wird, die ich mir nicht vorgestellt habe.

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

  1. Ich ziehe jedes bisschen aus, ich brauche nicht, Sachen modular und klein zu halten
  2. Ich verwende mein Framework für Kundenjobs und möchte a) wissen, womit ich genau arbeite, b) alles besitzen, was ich an den Kunden verkaufe. Ich kopiere und verwende Frameworks nicht einfach, 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 oder von vorne beginnen
4
All Bits Equal

Einfach hinzufügen @import "../../styles.less"; (oder wo immer sich Ihr Stylesheet befindet) bis bootstrap.less am unteren Rand. Dies ermöglicht es Ihnen, Bootstrap Mixins wie .gradient oder .border-radius in deinen eigenen Styles.less.

2
dallen