Bootstrap cards for showing colors

Bootstrap cards for showing colors

A few days ago, I built a website for showing traditional Chinese colors with bootstrap cards - colors.flinhong.com. A screenshot as the feature picture shows. This color site was originally inspired by Nipponcolors, which showing traditional Japanese colors. A similar site http://zhongguose.com doing the same with traditional Chinese colors, but it feels a little bit strange. So I decided to play around with this idea using bootstrap cards, just for fun.

Several issues I encountered during this process, just write them down for records.

Horizontal bootstrap card columns

The first issue is the order of the cards in “card columns”. The default setting for the cards are ordered from top to bottom and left to right:

1  4  7  10
2  5  8  11
3  6  9

For a long list of cards, it first fills the left columns and leaves the most right column empty at the worst situation. That’s not what I wanted.

I found a simple solution from stackoverflow1, just add a .d-flex class solved my problem. Using these two classes together, class="card-columns d-flex", the order of cards is what I needed:

1  2  3  4
5  6  7  8
9

Vertical progress bar

3 progress bars were used to illustrate the RGB colors. Make them vertical meets some css tricks. First, add a .vertical class to each “progress”:

<div class="progress vertical">
    <div class="progress-bar" style="height: 86%"></div>
</div>

Then style it with following styles:

.vertical {
    width: 1px;
    height: 10rem;
    margin: 0 1px;
}
.vertical .progress-bar {
    width: 100%;
}

The “progress” container has a fixed width, and height for the progress bar sets inline with “height” (the original progress bar sets its width).

Writing modes

This is just a css property used to align text, here, it’s in vertical for the pinying of the color:

Vertical align text

More details about this property should refer to MDN docs2.

Click and tap in jQuery

In the beginning, I didn’t notice any difference between these two behaviours. But when I visit the site with mobile devices, it matters.

This issue is easy to fix with defining the events separately with touchstart and click:

$('element').on('touchstart click', function(event) {
    if(event.handled === false) return
    event.stopPropagation();
    event.preventDefault();
    event.handled = true;
    // ...continue your scripts here
});

Brightness adaption

Since the background color of <body> changes with each color selected, the text (for demonstration), should adjust with it. If the color selected is very bright, the text should set to dark, vice versa.

This is done by estimating the brightness of the color:

var luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b;
if (luma<150) {
    $('body').css('color', '#eee')
} else {
    $('body').css('color', '#1c1c1c')
}

Here is just a simple adaptation, we can divid it into more levels if needed.

The color data

The present site uses data from a Japanese site, 中国の伝統色320色. These color values are just for reference, not really standarded in any Chinese national standard.

I really want more accurate data source, but it’s not an easy job. I found a book named Zhongguo Yanse Mingcheng in our Library; it provides ~1000 Chinese color names with Munsell values. I tried to convert these Munsell color values into sRGB using python3, but eventually found it’s not possible for all the colors showing in the book. Simply because not all the Munsell colors (real Munsell colors or interpolated colors) can be presented in sRGB color space. So I stopped at this stage just using the data from the above mentioned Japanese site.

OK, that all about the building process, share the colors.flinhong.com site if you like it.

Refs:

avatar

Frank Lin

Code learning...

Say something Login