Das eigene Farbkonzept mit bootScore

Als “leis­tungs­star­kes, kos­ten­lo­ses Boot­strap-Star­ter-The­me für Word­Press” ver­wen­det bootS­core das Farb­de­sign von Boot­strap und zeich­net sei­ne Ele­men­te ent­spre­chend aus. Zur Ver­fei­ne­rung die­ser all­seits glei­chen Ergeb­nis­se lie­fert es aber Tech­ni­ken mit. So muss die Web­de­si­gne­rin erst das eige­ne Farb­kon­zept ent­wi­ckeln und es dann in und mit bootS­core umset­zen, wenn sie ein per­sön­li­ches Out­fit ihrer Site möch­te:

Lösung

1. Kon­zi­pie­re das Erschei­nungs­bild Dei­ner Site.
2. Wäh­le die ent­spre­chen­den Boot­strap-Farb­clus­ter.
3. Schrei­be die Funk­ti­ons­far­ben ent­spre­chend um.
4. Defi­nie­re die eige­nen CSS-Klas­sen gemäß Dei­nes Kon­zep­tes.
5. Wei­se die Klas­sen den inten­dier­ten Ele­men­ten Dei­ner Web­site zu.

Hintergrund

Boot­strap hat den RGB-Farb­raum in 10 Farb­clus­ter unter­teilt: Blau (blue), Indi­go (indigo), Vio­lett (purple), Rosa (pink), Rot (red), Oran­ge (orange), Gelb (yellow), Grün (green), Petrol (teal), Cyan (cyan), Grau (gray). Jeder Clus­ter beginnt mit einer ent­spre­chend hel­len Far­be und geht 9 Schrit­ten bis zu einer ent­spre­chend fast schwar­zen Far­be. Defi­niert sind die Far­ben als SASS-Varia­blen, für jeden Clus­ter nach dem­sel­ben Mus­ter. Zugrei­fen kön­nen wir so etwa auf ein $green-100, $green-200, $green-300, $green-400, $green-500, $green-600, $green-700, $green-800, $green-900, wobei $green der Far­be $green-500 ent­spricht.

Wol­len wir die­se Far­ben in einem unse­rer Ele­ment ver­wen­den, defi­nie­ren wir in unse­rer Child-The­me­da­tei scss/bscore_custom.scss eine CSS-Klas­se .cdg600 { color: $green-600; } und wei­sen die dem inten­dier­ten HTML-Ele­ment zu, wie z.B. hier <code class="cdg600">$green-600</code>. Die­se Tech­nik ver­engt den RGB-Farb­raum zwar, sie erleich­tert es uns aber, farb­lich dif­fe­ren­zier­te und trotz­dem ein­heit­li­che The­mes zu erstel­len.

Neben der rein tech­ni­schen Farb­be­hand­lung geht Boot­strap auch kon­zep­tio­nell neue Wege: Es gäbe — so der Gedan­ke — Site-über­grei­fen­de kom­mu­ni­ka­ti­ve Auf­ga­ben, die von ver­schie­de­nen Ele­men­ten einer Site aus­ge­führt wer­den (kön­nen). Boot­strap erlaubt es, die­sen Funk­ti­ons­ele­men­ten typi­sche “Funk­ti­ons­far­ben” zuzu­ord­nen. Wel­che Ele­men­te einer Site wel­che Funk­ti­on über­neh­men, ent­schei­det die Web-Desi­gne­rin — und ord­net die­sen die ent­spre­chend “Funk­ti­ons­far­be” zu.

Kon­kret geht Boot­strap davon aus, dass es in Sites typi­scher­wei­se (meh­re­re) Ele­men­te gibt, die Erfolg signa­li­sie­ren, die abschre­cken, war­nen oder infor­mie­ren. Oder, dass es pri­mä­re Ele­men­te gibt, sekun­dä­re oder teriä­re¹, dunk­le oder hel­le Ele­men­te. Für die­se sei­ten­über­grei­fen­den kom­mu­ni­ka­ti­ven Funk­tio­nen defi­niert Boot­strap ‘funk­tio­na­le Far­ben’. Das ent­spre­chen­de Boot­strap-color-How­to zeigt die Vor­be­le­gung die­ser ‘Funk­ti­ons­far­ben’.

Ein Boot­strap-basier­tes The­me muss also nur noch sei­ne Ele­men­te ent­spre­chend der vor­ge­se­he­nen Funk­tio­nen mit den zuge­hö­ri­gen CSS-Klas­sen aus­zeich­nen, um ein mini­mal kon­sis­ten­tes Farb­kon­zept zu rea­li­sie­ren. Das hat bootS­core vor­be­rei­tet. Aller­dings ver­wen­det es die Stan­dard-Funk­ti­ons­far­ben von Boot­strap. So ent­steht ein recht “bun­tes” Farb­kon­zept. Wir kön­nen die Farb­wahl jedoch ‘ent­schär­fen’, indem wir die CSS-Defi­ni­tio­nen der ‘Funk­ti­ons­klas­sen’ über­schrei­ben und so die kon­zep­tio­nell pas­sen­de Far­be auf alle ent­spre­chend mar­kier­ten Ele­men­te über­tra­gen. boots­core demons­triert die­sen Ansatz, indem es die Pri­mär­far­be von Blau auf Rot umsetzt — mit­hil­fe der Zei­le $primary:#FF0000; in der Datei bscore_variables.scss.

Dabei müs­sen wir den Wert der gewünsch­ten Far­be jedoch expli­zit zuwei­sen, anstatt eine der Varia­blen aus den von Boot­strap defi­nier­ten Farb­clus­tern zu ver­wen­den. Das ist nicht das, was wir eigent­lich wol­len. Intui­tiv wür­den wir $primary:$red; schrei­ben. Lei­der ist das nicht mög­lich, weil die bootS­core-Datei bscore_variables.scss vor der ent­spre­chen­den Boot­strap-Datei gela­den wird.². Um also die von Boot­strap defi­nier­ten und von bootS­core ver­wen­de­ten Funk­ti­ons­far­ben anzu­pas­sen, müs­sen wir die bestehen­den Defi­ni­tio­nen über­schrei­ben, in denen wir expli­zit die Wer­te der beab­sich­tig­ten Clust­er­far­ben ver­wen­den. Dazu nut­zen wir unse­rer Datei bscore_variables.scss.

Die Umde­fi­ni­ti­on einer Funk­ti­ons­far­be passt dann aller­dings auch abge­lei­te­te Far­ben an: Set­zen wir die Pri­mä­re­far­be auf rot, wer­den die Links rot ein­ge­färbt, die Hin­ter­grund­far­be der Bad­gets auf ein hel­le­res Rot und deren Link­text auf ein dunk­le­res. bootS­core reicht dabei ’nur’ die Ent­schei­dun­gen von Boot­strap durch.³

Als Aus­gleich für die Kom­pli­ka­ti­on kön­nen wir dann alle vor­de­fi­nier­ten Boot­strap-Varia­blen in unse­ren eige­nen CSS-Defi­ni­tio­nen ver­wen­den, die wir in unse­rer Boots­core-Datei bscore_custom.scss defi­nie­ren. Mehr noch: wir kön­nen auch die von Boot­strap vor­de­fi­nier­ten CSS-Klas­sen (text|bg|…)-(primary|secondary|…|danger|…‘) direkt unse­ren HTML-Ele­men­ten zuord­nen, sodass auch die­se unse­res Kon­zep­tes ent­spre­chend ein­ge­färbt wer­den. Und noch wei­ter und fei­ner: Wir kön­nen auch bestehen­de Klas­sen — wie etwa die CSS-Klas­se card — mit der SASS ori­e­nier­ten Defi­ni­ti­on .card { backgroundcolor: var(--#{$prefix}dark); in unse­rer Datei bscore_custom.scss auf einen schwar­zen Hin­ter­gund umset­zen.⁴ Damit wür­den alle Kar­ten in unse­ren Über­sichts­da­tei ‘ver­dun­kelt’.⁵

Weil wir jedoch oft genug nicht alle Ele­men­te ändern wol­len, die mit vor­de­fi­nier­ten Klas­sen aus­ge­zeich­net sind, lan­den wir zum Schluß doch wie­der bei der tra­di­tio­nel­le Metho­de: wir defi­nie­ren unse­re eige­nen Klas­sen, nut­zen dabei Far­ben aus den Boot­strap-Clus­tern, und wei­sen unse­re Klas­sen dann in den Tem­pla­tes den von uns inten­dier­ten Ele­men­te zu. Und wie fin­den wir die­se? Indem wir den Quell­code unse­rer bis­he­ri­gen boots­core-Sei­ten stu­die­ren — und etwas ‘rum­pro­bie­ren.

Um es zusam­men­fas­sen: Für ein­heit­li­ches und tech­nisch ein­ge­bun­de­nes Farb­kon­zept, müs­sen wir

1. unse­re Zie­le defi­nie­ren (hier:
   • Unse­re Site soll blau-weiß-grau erschei­nen = in Datei _bscore_variables.scss ein­fü­gen:
     • $primary: #0d6efd; // Wert von $blue-500
     • $secondary: #6c757d; // Wert von $gray-600
     • $info: #6ea8fe; // Wert von $blue-300
   • Her­vor­ste­chen­de Ele­men­te sol­len vio­lett erschei­nen = in Datei _bscore_variables.scss ein­fü­gen:
     • $danger: #520dc2; // Wert von $indigo-600
     • $warning: #8540f5; // Wert von $indigo-400
   • Neben­säch­li­cher Text soll les­bar aus­ge­graut sein.
   • Die wei­ßen Arti­kel­teaser sol­len schwach-blau umran­det sein = in Datei _bscore-sustom.scss ein­fü­gen: .card { border-color: $blue-600; }
   • Die Teaser auf der Landing­pa­ge und auf den Über­sichts­sei­ten sol­len auf einem leicht blau­en Hin­ter­grund abge­legt wer­den. = in Datei _bscore-sustom.scss ein­fü­gen: .page-template-mylap , .hfeed { background-color: $blue-100;}
   • Hea­der und Foo­ter sol­len wei­ter­hin auf grau­em Hin­ter­grund dar­ge­stellt wer­den.
2. die funk­tio­na­len Far­ben ent­spre­chend umschrei­ben — in unse­rer Datei bscore_variables.scss
3. unse­re Site­ele­men­te ent­spre­chend ihrer Funk­ti­on mit den Funk­ti­ons­klas­sen aus­zeich­nen⁶
4. unse­re eige­nen CSS-Klas­sen ent­spre­chend unse­rer Zie­le defi­nie­ren — in unse­rer Datei bscore_custom.scss
5. unse­re Klas­sen den vor­ge­se­he­nen Ele­men­ten unse­rer Site zuwei­sen⁷

CSS-class: bg-pri­ma­ry	CSS-class: text-pri­ma­ry
CSS-class: bg-secon­da­ry	CSS-class: text-secon­da­ry
CSS-class: bg-suc­cess	CSS-class: text-suc­cess
CSS-class: bg-info	CSS-class: text-info
CSS-class: bg-war­ning	CSS-class: text-war­ning
CSS-class: bg-dan­ger	CSS-class: text-dan­ger
CSS-class: bg-dark	CSS-class: text-dark
CSS-class: bg-light	CSS-class: text-light

---

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, ein­mal ange­fan­gen mit Ver­bes­se­run­gen der Bild­be­hand­lung, wer­den der Web-Desi­gne­rin auch die ver­wisch­ten ‘pri­mä­ren Bei­trags­gil­der’ auf­fal­len. Sie wird Lösun­gen aus­pro­bie­ren und ver­fei­nern. Und sie wird sie u.U. auch mit neu­en HTML‑5 Tech­ni­ken ange­hen. Denn damit wird eine aus­ge­fal­le­ne­re Bild­stra­te­gie samt inte­grier­ter Lizenz­er­fül­lung und das eige­ne Logo erst rich­tig sinn­voll. Wie auch immer: Bil­der brin­gen Far­be ins Lese­le­ben. Zuletzt soll­te all das also auch in ein eige­nes Farb­kon­zept ein­ge­bun­den sein. Zu die­ser The­ma­tik trägt auch die­ser Post etwas bei.

---

Im Übri­gen: Män­ner sind mit­ge­meint.

1. seman­tisch ist dies wohl eine Abstu­fung der Wich­tig­keit [↩]
2. bootS­core sagt, dass es damit der Boot­strap-Richt­li­nie folgt. [↩]
3. Mehr noch: Gefragt danach, wel­che HTML-Ele­men­te wel­cher Funk­ti­on zuge­ord­net sind, emp­fiehlt bootS­core, das ein­fach aus­zu­pro­bie­ren. [↩]
4. oder wie auch immer die Funk­ti­ons­far­be ‘dark’ gera­de defi­niert ist [↩]
5. Das gin­ge zuge­ge­be­ner­ma­ßen auch ein­fa­cher, näm­lich mit der Anwei­sung .card { backgroundcolor: $dark}. [↩]
6. wie in u.a. Tabel­le demons­triert [↩]
7. wie oben vor­ge­führt [↩]