Bootstrap cards for showing colours

Bootstrap cards for showing colours

enjoy the colourful world

Web Notes

2017.11.06

👣 #bootstrap #card #colours

A few days ago, I built a website for showing traditional Chinese colours with bootstrap cards - colors.flinhong.com. This colour site was originally inspired by Nipponcolors, which showing traditional Japanese colours. A similar site http://zhongguose.com doing the same with traditional Chinese colours, 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, so 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 colours. 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 PinYin of individual colour.

More details about this writing mode 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 colour of <body> changes with each colour selected, the text (for demonstration), should adjust following it. If the colour selected is very bright, the text should set to dark, vice versa.

This is done by estimating the brightness of the colour:

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 divide it into more levels if needed.

The colour data

The present site uses data from a Japanese site, 中国の伝統色320色. These colour values are just for reference, not really standardized 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 colour names with Munsell values. I tried to convert these Munsell colour values into sRGB using Python3, but eventually found it’s not possible for all the colours showing in the book. Simply because not all the Munsell colours (real Munsell colours or interpolated colours) can be presented in sRGB colour 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.

  1. Bootstrap 4 order Masonry-like column cards horizontal instead of vertical ↩

  2. Writing-mode, MDN web docs ↩

  3. Colour science for python ↩

THE END
Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.41 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.

PREV

编写第一个 shell 脚本

NEXT

Shell 文件测试比较

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 template language that Jekyll uses to process pages for your site. With Liquid you can output complex contents without additional plugins.

Setup an IKEv2 server with strongSwan

Tutorials

2020.01.09

Setup an IKEv2 server with strongSwan

IKEv2, or Internet Key Exchange v2, is a protocol that allows for direct IPSec tunnelling between networks. It is developed by Microsoft and Cisco (primarily) for mobile users, and introduced as an updated version of IKEv1 in 2005. The IKEv2 MOBIKE (Mobility and Multihoming) protocol allows the client to main secure connection despite network switches, such as when leaving a WiFi area for a mobile data area. IKEv2 works on most platforms, and natively supported on some platforms (OS X 10.11+, iOS 9.1+, and Windows 10) with no additional applications necessary.

TOC

Ads by Google

RECENT READS