Bootstrap cards for showing colors

Bootstrap cards for showing colors

enjoy the colourful world

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 & 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 follow 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.

By the way, I found it looks well on Chrome, Edge, and Safari, but failed render on Firefox… No further plan to improve it at present…

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple templating language that Jekyll uses to process pages on your site. With Liquid you can output an modify variables, have logic statements inside your pages and loop over content.

Practising closures in JavaScript

JavaScript Notes

2018.12.17

Practising closures in JavaScript

JavaScript is a very function-oriented language. As we know, functions are first class objects and can be easily assigned to variables, passed as arguments, returned from another function invocation, or stored into data structures. A function can access variable outside of it. But what happens when an outer variable changes? Does a function get the most recent value or the one that existed when the function was created? Also, what happens when a function invoked in another place - does it get access to the outer variables of the new place?

Self-host comments in Jekyll, powered by Firebase real-time database

Tutorials

2017.03.25

Self-host comments in Jekyll, powered by Firebase real-time database

It's convenient to set up a comment system in Jekyll site with external social comment systems like Disqus or Duoshuo (多说). However, as you all know, Disqus was blocked in China and Duoshuo is going to shutdown. It's the time to rethink about the comment system (although I didn't get too many comments →_→), simple and controllable. And it becomes true with Firebase database.

TOC / 目录

TRENDING