Bootstrap Templates sauber editieren - CSS Handhabung?

[SimonK91]

Hallo Forum,

ich plane auf Basis von Bootstrap eine Webseite zu erstellen und habe nun ein (recht neutrales) Bootstrap Template gefunden, was meinen groben Vorstellungen entspricht, damit ich nicht "from scratch" anfangen muss... Nun geht es natürlich daran, das ganze zu personalisieren (CSS editieren -> eigene Farben, Menü-Styling ändern usw).

Wie gehe ich nun am saubersten vor, dass ich nicht die Bootstrap CSS editiere, ich nehme an man arbeitet eher mit einer custom.css wo dann nur die Änderungen hinterlegt sind und die dann priorisiert geladen werden und die orig. Bootstrap css dann überschreibt?

Nebenfrage: Ich habe mir angewöhnt, so vorzugehen dass ich z.b. in Firefox das Design anschaue, dann mit Firebug auf "Element untersuchen" gehe und die CSS dann live editiere, und mich an das Design was mir gefällt herantaste, da ich dadurch immer eine Live-Vorschau habe.

Dann ist es aber oftmühsam a) die Code-Zeile und Klasse in der CSS zu finden da sich die Zeilenangabe oft unterscheidet und b) sicher zu sein, dass man die entsprechende Änderung nicht nur da, sondern auch noch an anderen Stellen in der CSS machen muss, damit es dann überall übernommen wird. (z.b. werden Farben in einer CSS ja an zig Stellen erneut definiert, mit STRG+F und ersetzen kann man aber auch nicht immer arbeiten, da die Farbe an einer anderen Stelle wieder passen würde...)

Wie macht man das klüger, oder geht es nicht anders als "trail and error"?

Danke!

 

[derlorenz]

Ich weiß nicht ob es den richtigen Weg gibt. Aber im Prinzip mache ich es genauso wie du, nur dass ich die originalen Templates direkt bearbeite und das lokal. Da kann man über Firebug die Änderungen ja direkt speichern. Ich arbeite dann mit einer Kopie vom Original, um eventuell noch mal vergleichen zu können.

 

[SimonK91]

Danke für das Feedback. Mit der CSS muss ich mal schauen, so wirklich sauber/richtig fühlt sich das nicht an 😂

 

[Midnight Sun]

Teile die du ändern möchtest oder musst heraussuchen und die passenden Angaben dazu in einer separaten CSS abspeichern und diese einbinden.

Welches Template du dir rausgesucht hast wissen wir nicht, sonst könnte man direkt nachsehen, was und wie viel extra dafür geschrieben wurde.

Mit dem Firefox und Firebug handhabe ich es ebenfalls so, das Original-Template habe ich nebenbei ebenfalls offen und bearbeite dieses ansonsten nur als Kopie.

 

[Darrel]

Um den ständigen Wechsel von Browser und Code-Editor zu vermeiden, nutzen viele einen Code-Editor mit "Live-Server"-Funktion. Also jedes Mal wenn du eine Änderung abspeicherst, wird diese Änderung im Browser-Fenster gleich angezeigt.

Der grundsätzliche Ansatz, um nicht ständig überall beispielsweise die Primärfarbe eines Themes ändern zu müssen, liegt in der Nutzung von CSS-Präprozessoren (Sass, LESS), die dir Variablen, Maps, Mixins usw. zur Verfügung stellen.

Falls du Bootstrap 4 nutzt, ist der offiziell vorgeschlagene Weg der folgende:

Importiere die original Sass-Dateien des Bootstrap-Themes in deine eigene custom.scss Datei und ändere dort die Variablen, etc.: Twitter Bootstrap 4 Dokumentation