Preface
Step Five: Creating pallete color for theme customization.
When you framework is not enough, you have to make your own component, or your own set of CSS such as color pallete.
1: Chapter Overview
Consider examine the directory structure.
Pallete Options
I try three palletes:
- Google Material Color
- Open Color
- bootstrap Color
I will put this color classes in SASS helper, so that it would generate CSS helper.
For each pallete, I make a helper. So that now we have three sass file:
helper-gmc.sass,helper-oc.sass, andhelper-bs5.sass.
Source Code: Step-05
Source code for this chapter can be obtained here:
Related Articles
The obsolete Bootstrap v4 article:
The old Bulma article:
SASS Example
LESS Example
2: Material Color: SASS Build
For color classes, I start from verbatim copy from Materialize CSS. Then I make a few enhacement to suit my needs.
Google Material Color
The google material color system can be found at:
Original SASS Code
This is the source of the code:
Then I copy the code from Dogfalo to my SASS folder as shown below.
SASS Directory Structure
It is good time to organize SASS folder.
❯ tree -C css
css
├── bootstrap.scss
├── helper-gmc.scss
├── main
│ └── ...
├── main.scss
├── materialize
│ ├── _color-classes.scss
│ ├── _color-variables.scss
│ └── _shadow.scss
└── _variables.scss
SASS: Helper
@charset "UTF-8";
// Materialize CSS
@import "materialize/shadow";
// Color
@import "materialize/color-variables";
@import "materialize/color-classes";
SASS: Variables
The color variables could looks like below code:
$pink: (
"base": #e91e63,
"lighten-5": #fce4ec,
"lighten-4": #f8bbd0,
"lighten-3": #f48fb1,
"lighten-2": #f06292,
"lighten-1": #ec407a,
"darken-1": #d81b60,
"darken-2": #c2185b,
"darken-3": #ad1457,
"darken-4": #880e4f,
"accent-1": #ff80ab,
"accent-2": #ff4081,
"accent-3": #f50057,
"accent-4": #c51162
);
At the end of CSS, it also list all the available colors.
$colors: (
"materialize-red": $materialize-red,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades
) !default;
SASS: Classes
We need some processing here.
@each $name, $color in $colors {
@each $spectrum, $value in $color {
@if $spectrum == "base" {
.#{$name} {
background-color: $value !important;
}
.#{$name}-text {
color: $value !important;
}
}
@else if $name != "shades" {
.#{$name}.#{$spectrum} {
background-color: $value !important;
}
.#{$name}-text.text-#{$spectrum} {
color: $value !important;
}
}
}
}and also
// Shade classes
@each $name, $value in $shades {
.#{$name} {
background-color: $value !important;
}
.#{$name}-text {
color: $value !important;
}
}
SASS: Shadow
For shadow, I also shamefully grab from materialize SCSS.
/* 6dp elevation modified*/
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
0 1px 10px 0 rgba(0,0,0,0.12),
0 2px 4px -1px rgba(0,0,0,0.3);
}
Note that bootstrap5 has their own version of shadow. But I feel like, I like materialize version is more flexible.
Compiled CSS
.pink {
background-color: #e91e63 !important;
}
.pink-text {
color: #e91e63 !important;
}
.pink.lighten-5 {
background-color: #fce4ec !important;
}
.pink-text.text-lighten-5 {
color: #fce4ec !important;
}
.pink.lighten-4 {
background-color: #f8bbd0 !important;
}
.pink-text.text-lighten-4 {
color: #f8bbd0 !important;
}
.pink.lighten-3 {
background-color: #f48fb1 !important;
}
Now that we have the CSS ready to be used, we still need to prepare the HTML code.
2: Material Color: Nunjucks Build
Example Layout Page
Color Class
We would like to apply google material color design for all parts. Especially the main chuncks.
<!-- responsive main -->
<div class="row layout-base maxwidth">
<main class="col-md-8 p-4
white z-depth-3 hoverable">
<article>
{% include './051-article-gmc.njk' %}
</article>
</main>
<aside class="col-md-4 p-4
white z-depth-3 hoverable">
Side Menu
</aside>
</div>
Gradient Test
We can try Gradient in article chunck,
such as this class: blue darken-2 z-depth-3 hoverable.
<ul class="list-group">
<li class="list-group-item
blue darken-4 text-light">
<h4>Your Mission</h4></li>
<li class="list-group-item
blue darken-2 z-depth-3 hoverable">
To have, to hold, to love,
cherish, honor, and protect?</li>
<li class="list-group-item
blue lighten-1 z-depth-3 hoverable">
To shield from terrors known and unknown?
To lie, to deceive?</li>
<li class="list-group-item
blue lighten-3 z-depth-3 hoverable">
To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</li>
<li class="list-group-item
blue lighten-5 z-depth-3 hoverable">
<blockquote class="bq bq-blue-dark">
As always, should you be
caught or killed,
any knowledge of your actions
will be disavowed.
</blockquote>
</li>
</ul>
Nunjucks Directory Structure
The directory structure is typical.
❯ tree -C views
views
├── 051-material-color.njk
├── contents
│ ├── 051-article-gmc.njk
│ └── 051-main-gmc.njk
├── heads
│ ├── links-gmc.njk
│ └── meta.njk
├── layouts
│ └── base.njk
└── shared
├── footer-gmc.njk
├── navbar-button.njk
├── navbar-collapse-gmc.njk
├── navbar-dropdown-gmc.njk
└── navbar-gmc.njk
5 directories, 11 files
I don’t think that I need to go in detail for each file. You can examine the code yourself from my github repository.
Browser Preview
Screenshot
And have fun with the result. Consider open the file in Browser.
It is nice right?
Static Page
HTML Document Target
As a summary from this section, all the html element is as shown below.
Consider examine the HTML output, above.
3: Open Color: SASS Build
I have been using Google Material Color
for a few years.
AndI wonder if there is an alternate pallete
for google material color.
I search for alternative and
find this Open Color with MIT license.
The color is not as nice as GMC,
but OC is the best alternative so far.
Actually, I cannot find any open source pallete
that can beat these two.
Official Site
SASS Build
Inspired by Materialize CSS
I use the color from OC pallete,
but I strip down the sass version,
and make my own color classes.
Inspired by Materialize CSS,
I use two SASS the variables, and the classes.
SASS Directory Structure
With similar structure, we can do the same with open color.
❯ tree -C css
css
├── bootstrap.scss
├── helper-oc.scss
├── main
│ └── ...
├── main.scss
├── materialize
│ └── _shadow.scss
├── open-color
│ ├── _open-color-classes.scss
│ └── _open-color-variables.scss
└── _variables.scss
SASS: Helper
@charset "UTF-8";
// Materialize CSS
@import "materialize/shadow";
// Heeyeun's Open Color
@import "open-color/_open-color-variables";
@import "open-color/_open-color-classes";
Instead of making a new shadow file, I use pre-existing sahdow from materialize folder.
SASS: Variables
The spectrum array is start from zero
- [gitlab.com/…/step-05/sass/css/materialize/_color-variables.scss][scss-color-variables]
$oc-pink-list: (
"0": #fff0f6,
"1": #ffdeeb,
"2": #fcc2d7,
"3": #faa2c1,
"4": #f783ac,
"5": #f06595,
"6": #e64980,
"7": #d6336c,
"8": #c2255c,
"9": #a61e4d
);
At the end of CSS, it also list all the available colors.
$oc-color-spectrum: 9;
$oc-color-list: (
"gray": $oc-gray-list,
"red": $oc-red-list,
"pink": $oc-pink-list,
"grape": $oc-grape-list,
"violet": $oc-violet-list,
"indigo": $oc-indigo-list,
"blue": $oc-blue-list,
"cyan": $oc-cyan-list,
"teal": $oc-teal-list,
"green": $oc-green-list,
"lime": $oc-lime-list,
"yellow": $oc-yellow-list,
"orange": $oc-orange-list
);
SASS: Classes
SASS is easy. You can make the loop yourself.
@each $name, $color in $oc-color-list {
@each $spectrum, $value in $color {
.oc-#{$name}-#{$spectrum} {
background-color: $value !important;
}
.oc-#{$name}-#{$spectrum}-text {
color: $value !important;
}
}
}If you do not understand how it works, you might consider to read this article first:
I also add loop to build black and white class.
@each $color, $value in $oc-general-list {
.oc-#{$color} {
background-color: $value !important;
}
.oc-#{$color}-text {
color: $value !important;
}
}
SASS Shadow
Open Color is not the only thing I need for this templates to works.
I also use materialize shadow as almost verbatim copy,
that contain z-depth and hoverable classes.
Compiled CSS
.oc-pink-0 {
background-color: #fff0f6 !important;
}
.oc-pink-0-text {
color: #fff0f6 !important;
}
.oc-pink-1 {
background-color: #ffdeeb !important;
}
.oc-pink-1-text {
color: #ffdeeb !important;
}
.oc-pink-2 {
background-color: #fcc2d7 !important;
}
.oc-pink-2-text {
color: #fcc2d7 !important;
}
3: Open Color: Nunjucks Build
Very similar with previous, but different color class.
Example Layout Page
Color Class
We would like to apply open color design for all parts. Especially the main chuncks.
<!-- responsive main -->
<div class="row layout-base maxwidth">
<main class="col-md-8 p-4
oc-white z-depth-3 hoverable">
<article>
{% include './051-article-oc.njk' %}
</article>
</main>
<aside class="col-md-4 p-4
oc-white z-depth-3 hoverable">
Side Menu
</aside>
</div>
Gradient Test
We can try Gradient in article chunck,
such as this class: oc-blue-9 text-light.
<ul class="list-group">
<li class="list-group-item oc-blue-9 text-light">
<h4>Your Mission</h4></li>
<li class="list-group-item oc-blue-7">
To have, to hold, to love,
cherish, honor, and protect?</li>
<li class="list-group-item oc-blue-5">
To shield from terrors known and unknown?
To lie, to deceive?</li>
<li class="list-group-item oc-blue-3">
To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</li>
<li class="list-group-item oc-blue-1">
<blockquote class="bq bq-blue-dark">
As always, should you be
caught or killed,
any knowledge of your actions
will be disavowed.
</blockquote>
</li>
</ul>
Nunjucks Directory Structure
The directory structure is typical.
❯ tree -C views
views
├── 051-material-color.njk
├── contents
│ ├── 051-article-gmc.njk
│ └── 051-main-gmc.njk
├── heads
│ ├── links-gmc.njk
│ └── meta.njk
├── layouts
│ └── base.njk
└── shared
├── footer-gmc.njk
├── navbar-button.njk
├── navbar-collapse-gmc.njk
├── navbar-dropdown-gmc.njk
└── navbar-gmc.njk
5 directories, 11 files
I don’t think that I need to go in detail for each file. You can examine the code yourself from my github repository.
Browser Preview
Screenshot
And have fun with the result. Consider open the file in Browser.
It looks good, although google material looks better.
Static Page
HTML Document Target
As a summary from this section, all the html element is as shown below.
Consider examine the HTML output, above.
4: Bootstrap Color: SASS Build
I don’t think that bootstrap color is designed for gradient. But I decide to give it a try, and see how it goes.
Bootstrap Color
The bootstrap color can be found at:
The color is buried inside bootstrap sass, so we have to include it somewhere.
SASS Directory Structure
Consider arrange our folder again, but this time for bootstrap color.
❯ tree -C css
css
├── bootstrap.scss
├── bs5-colors
│ ├── _bs5-color-classes.scss
│ └── _bs5-color-variables.scss
├── helper-bs5.scss
├── main
│ └── ...
├── main.scss
├── materialize
│ └── _shadow.scss
└── _variables.scss
SASS: Helper
@charset "UTF-8";
// Materialize CSS
@import "materialize/shadow";
// Color
@import "bs5-colors/_bs5-color-variables";
@import "bs5-colors/_bs5-color-classes";
Instead of making a new shadow file, I use pre-existing sahdow from materialize folder.
SASS: Variables
The color variables can be imported from internal bootstrap sass.
@import
// pre variables
"../../bootstrap5/functions",
"../../bootstrap5/variables"
;
At the end of CSS, it also list all the available colors.
$bs-color-list: (
"blue": $blues,
"indigo": $indigos,
"purple": $purples,
"pink": $pinks,
"red": $reds,
"orange": $oranges,
"yellow": $yellows,
"green": $greens,
"teal": $teals,
"cyan": $cyans
);
SASS: Classes
We need some processing here.
@each $name, $color in $bs-color-list {
@each $spectrum, $value in $color {
.bs-#{$spectrum} {
background-color: $value !important;
}
.bs-#{$spectrum}-text {
color: $value !important;
}
}
.bq-#{$name}-dark {
border-left: 5px solid map-get($color , "#{$name}-700");
}
.bq-#{$name}-light {
border-left: 5px solid map-get($color , "#{$name}-300");
}
}and depend on your need, you can append other classes as well.
@each $spectrum, $value in $grays {
.bs-gray-#{$spectrum} {
background-color: $value !important;
}
.bs-gray-#{$spectrum}-text {
color: $value !important;
}
}
.bq-gray-dark {
border-left: 5px solid map-get($grays , "700");
}
.bq-gray-light {
border-left: 5px solid map-get($grays , "300");
}
SASS: Shadow
I also use materialize shadow as almost verbatim copy,
that contain z-depth and hoverable classes.
Compiled CSS
.bs-pink-100 {
background-color: #f7d6e6 !important;
}
.bs-pink-100-text {
color: #f7d6e6 !important;
}
.bs-pink-200 {
background-color: #efadce !important;
}
.bs-pink-200-text {
color: #efadce !important;
}
.bs-pink-300 {
background-color: #e685b5 !important;
}
.bs-pink-300-text {
color: #e685b5 !important;
}
Now that we have the CSS ready to be used, we still need to prepare the HTML code.
4: Bootstrap Color: Nunjucks Build
Also very similar with previous, but different color class.
Example Layout Page
Color Class
We would like to apply bootstrap color design for all parts. Especially the main chuncks.
<!-- responsive main -->
<div class="row layout-base maxwidth">
<main class="col-md-8 p-4
bs-white z-depth-3 hoverable">
<article>
{% include './051-article-bs5.njk' %}
</article>
</main>
<aside class="col-md-4 p-4
bs-white z-depth-3 hoverable">
Side Menu
</aside>
</div>
Gradient Test
We can try Gradient in article chunck,
such as this class: bs-blue-900 text-light.
<ul class="list-group">
<li class="list-group-item bs-blue-900 text-light">
<h4>Your Mission</h4></li>
<li class="list-group-item bs-blue-700">
To have, to hold, to love,
cherish, honor, and protect?</li>
<li class="list-group-item bs-blue-500">
To shield from terrors known and unknown?
To lie, to deceive?</li>
<li class="list-group-item bs-blue-300">
To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</li>
<li class="list-group-item bs-blue-100">
<blockquote class="bq bq-blue-dark">
As always, should you be
caught or killed,
any knowledge of your actions
will be disavowed.
</blockquote>
</li>
</ul>
Nunjucks Directory Structure
The directory structure is self explanatory. Very similar with previous.
❯ tree -C views
views
├── 051-bootstrap-color.njk
├── contents
│ ├── 051-article-bs5.njk
│ └── 051-main-bs5.njk
├── heads
│ ├── links-bs5.njk
│ └── meta.njk
├── layouts
│ └── base.njk
└── shared
├── footer-bs5.njk
├── navbar-bs5.njk
├── navbar-button.njk
├── navbar-collapse-bs5.njk
└── navbar-dropdown-bs5.njk
5 directories, 11 files
I don’t think that I need to go in detail for each file. You can examine the code yourself from my github repository.
Browser Preview
Screenshot
And have fun with the result. Consider open the file in Browser.
It looks darker. But that’s okay.
Static Page
HTML Document Target
As a summary from this section, all the html element is as shown below.
Consider examine the HTML output, above.
What is Next 🤔?
We are ready to continue to enhance our responsive with multicolor design.
We still have real life decoration before experiment with dark mode, So we have to move on with responsive, widget, and blog post.
Consider continue reading [ Bootstrap - Sass - Responsive ].