Customized Colors With bootScore

As a “pow­er­ful, free Boot­strap starter theme for Word­Press”, bootScore uses the col­or con­cept of Boot­strap by mark­ing up its ele­ments accord­ing­ly. Con­se­quent­ly, each bootScore instance ini­tial­ly starts with the same out­fit. How­ev­er, it also offers tech­niques to mod­i­fy the default design so that a web design­er can define and imple­ment her cus­tomized col­ors in and with bootScore:

Solution

• Define the appear­ance of your site.
• Select the appro­pri­ate Boot­strap col­or clus­ters.
• Rewrite the func­tion col­ors accord­ing­ly.
• Define your own CSS class­es accord­ing to our goals.
• Assign these class­es to the intend­ed ele­ments of your site.

Background

Boot­strap has divid­ed the RGB col­or space into 10 col­or clus­ters: Blau (blue), Indi­go (indigo), Vio­lett (purple), Rosa (pink), Rot (red), Orange (orange), Gelb (yellow), Grün (green), Petrol (teal), Cyan (cyan), Grau (gray).Blue (blue), Indi­go (indigo), Vio­let (purple), Pink (pink), Red (red), Orange (orange), Yel­low (yellow), Green (green), Petrol (teal), Cyan (cyan), Gray (gray). Each clus­ter starts with a cor­re­spond­ing light col­or and goes 9 steps up to a cor­re­spond­ing almost black col­or. The col­ors are defined as SASS vari­ables, fol­low­ing the same pat­tern for each clus­ter. For exam­ple, we can access a $green-100, $green-200, $green-300, $green-400, $green-500, $green-600, $green-700, $green-800, $green-900, where $green cor­re­sponds to the col­or $green-500.

If we want to use these col­ors in one of our ele­ments, we define a CSS class like .cdg600 { color: $green-600; } in our child theme file scss/bscore_custom.scss and assign it to the intend­ed HTML ele­ment as here­in <code class="cdg600">$green-600</code>. Although this tech­nique nar­rows the RGB col­or space, it makes it eas­i­er for us to cre­ate col­or-dif­fer­en­ti­at­ed yet coor­di­nat­ed themes.

In addi­tion to the pure­ly tech­ni­cal col­or treat­ment, Boot­strap also breaks new ground con­cep­tu­al­ly: There would be — so the idea — cross-site com­mu­nica­tive tasks that are (can be) per­formed by dif­fer­ent ele­ments of a site. Boot­strap allows you to assign typ­i­cal “func­tion­al col­ors” to these func­tion­al ele­ments. Even­tu­al­ly, the web design­er decides which ele­ments of a site take on which func­tion — and assigns them the cor­re­spond­ing “func­tion­al col­or”.

Specif­i­cal­ly, Boot­strap assumes that there are typ­i­cal­ly (sev­er­al) ele­ments in sites that sig­nal suc­cess, deter, warn, or inform. Or that there are pri­ma­ry, sec­ondary, or ter­tiary ele­ments¹, dark or light ele­ments. Boot­strap defines ‘func­tion­al col­ors’ for these cross-page com­mu­nica­tive func­tions. The cor­re­spond­ing Boot­strap-col­or-How­to shows the default assign­ment of these ‘func­tion­al col­ors’.

Hence, a Boot­strap-based theme only needs to mark up its ele­ments accord­ing to the intend­ed func­tions with the asso­ci­at­ed CSS class­es to imple­ment a min­i­mal con­sis­tent col­or con­cept. This is pro­vid­ed by bootScore. How­ev­er, it uses the default func­tion col­ors of Boot­strap. Ulti­mate­ly, this results in a rather ‘col­or­ful’ col­or con­cept. How­ev­er, we can align the col­ors by over­writ­ing CSS def­i­n­i­tions of the ‘func­tion class­es’ and thus trans­fer­ring the con­cep­tu­al­ly appro­pri­ate col­or to all cor­re­spond­ing­ly marked ele­ments. Bootscore demon­strates this approach by switch­ing the pri­ma­ry col­or from blue to red — with the help of the ‘com­mand’ $primary:#FF0000; in the file bscore_variables.scss.

How­ev­er, we have to explic­it­ly assign the val­ue of the desired col­or instead of using one of the vari­ables from the col­or clus­ters defined by Boot­strap. That’s not what we actu­al­ly want. Intu­itive­ly we would write $primaty:$red;. Unfor­tu­nate­ly, that is not pos­si­ble because the bootScore file bscore_variables.scss is loaded before the cor­re­spond­ing Boot­strap file.² Thus, for cus­tomiz­ing the func­tion­al col­ors defined by Boot­strap and used by bootScore, we need to over­write the exist­ing def­i­n­i­tions where we explic­it­ly use the val­ues of the intend­ed clus­ter col­ors. To do that, we use our file bscore_variables.scss in our child theme.

How­ev­er, redefin­ing a func­tion col­or implic­it­ly also adjusts the depen­dent col­ors: If we set the pri­ma­ry col­or to red, the links become red, the back­ground col­or of the badges becomes a lighter red, and their link text a dark­er red. But, bootScore ‘only’ pass­es the deci­sions of Boot­strap through.³

As com­pen­sa­tion, we can then use all the pre­de­fined Boot­strap vari­ables in our own CSS def­i­n­i­tions we gath­er in our bootScore file bscore_custom.scss. More­over: we can assign the CSS class­es pre­de­fined by Boot­strap (text|bg|...)-(primary|secondary|...|danger|...' direct­ly to our HTML ele­ments for func­tion­al­ly col­or­ing them accord­ing to our con­cept. And even fur­ther and fin­er: In our file bscore_custom.scss, we can also over­write exist­ing class­es — such as the CSS class card by SASS-ori­ent­ed def­i­n­i­tions in the com­mand card { backgroundcolor: var(--#{$prefix}dark); to get a black back­ground.⁴ This would ‘dark­en’ all the cards in our overview file.⁵

How­ev­er, because we often don’t want to change all the ele­ments that are marked with pre­de­fined class­es, we end up using the tra­di­tion­al method again: we define new class­es, using col­ors from the boot­strap clus­ters, and then assign them to the ele­ments we intend to use in the tem­plates. And how do we find these? By study­ing the source code of our pre­vi­ous bootscore pages — and try­ing things out.

To make a long sto­ry short: For cre­at­ing a uni­fied col­or con­cept, we must

1. define our design goals — for exam­ple:
   • The site should appear green-white-grey. => To get that, add to your file bscore_custom.scss
     • $primary: #146c43; // $green-600
     • $secondary: #6c757d; // predefined value of $gray-600
     • $info: #0d6efd; // predefined value of $blue-500
   • Promi­nent ele­ments should appear pur­ple (or dark red). => To get that, add to your file bscore_custom.scss
     • $danger: #520dc2; // predefined value of $indigo-600
     • $warning: #8540f5; // predefined value of $indigo-400
     • $success: #20c997; // predefined value of $teal-500
   • Sec­ondary text should be leg­i­bly grayed out.
   • The white arti­cle teasers should have a faint green bor­der. => To get that, add to your file bscore_custom.scss
     • .card { border-color: $green-600; }
   • The teas­er cards on our land­ing page should be pre­sent­ed on a slight­ly green back­ground. => To get that, add to your file bscore_custom.scss
     • .page-template-mylap , .hfeed { background-color: $blue-100;}
   • The head­er and foot­er should con­tin­ue to be gray, as it is by default designed by bootScore
2. select the Boot­strap col­or clus­ters we want to use (here: the clus­ters blue, pur­ple, and grey).
3. rewrite the func­tion­al col­ors accord­ing­ly — in our bscore_variables.scss file.⁶
4. define your own CSS class­es accord­ing to our goals — in our bscore_custom.scss file.
5. assign these class­es to the intend­ed ele­ments of your site.⁷

CSS-class: bg-pri­ma­ry	CSS-class: text-pri­ma­ry
CSS-class: bg-sec­ondary	CSS-class: text-sec­ondary
CSS-class: bg-suc­cess	CSS-class: text-suc­cess
CSS-class: bg-info	CSS-class: text-info
CSS-class: bg-warn­ing	CSS-class: text-warn­ing
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

---

And how does this …

… sup­port our migra­tion to bootScore? Well, once start­ed with improv­ing the image han­dling, a web design­er will also notice the blurred ‘fea­tured images’ of bootScore. She will try and refine solu­tions. And she may also tack­le them with new HTML‑5 tech­niques. Because with that, a fanci­er image strat­e­gy com­bined with an inte­grat­ed license ful­fill­ment process and its own logo will real­ly make sense. How­ev­er, pic­tures bring col­ors to read­ing. So they should be inte­grat­ed into a cus­tomized col­or con­cept. This post also con­tributes some­thing to this top­ic.

---

1. which prob­a­bly refer to dif­fer­ent degrees of impor­tance [↩]
2. bootScore says that by doing so it fol­lows the Boot­strap guide­line. [↩]
3. More­over, asked which ele­ment has got which func­tion, bootScore rec­om­mends try­ing it out. [↩]
4. or how­ev­er we’ve defined the func­tion col­or ‘dark’ [↩]
5. Admit­ted­ly, this could also be done more sim­ply, name­ly with the state­ment .card { backgroundcolor: $dark} [↩]
6. as shown in the table [↩]
7. as described above [↩]