Webmasters Gallery

What a bulky title for such a streamlined tool. Grade.js is a JavaScript library that you use to automatically frame your images. The interesting thing about that is that the frame is made up from a gradient of the two most dominant colors of the respective image. But try fitting that into a headline…

Grade.js: Easy to Use, Neat Results

Grade.js is the latest project of developer Ben Howdle from the United Kingdom. Ben is distributing the JavaScript library for free under the MIT license via Github. You can learn about its functionality on this demo page.

There are different options for the integration into your project. You can download the 104kb large script, and upload it onto your project. You could also install it via npm, or use the given CDN link.

Using it is very easy. First, you implement the script and initialize it. Like this, for example:

1
2
3
4
5
6
7
8
9
10
11

<script src="path/to/grade.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function(){
        /*
            A NodeList of all your image containers (Or a single Node).
            The library will locate an <img /> within each
            container to create the gradient from.
         */
        Grade(document.querySelectorAll('.gradient-wrap'))
    })
</script>

Then, place a container div around the image you want to frame. This container is marked with the class “gradient-wrap”.

That can look like this:

1
2
3
4

<!--the gradients will be applied to these outer divs, as background-images-->
<div class="gradient-wrap">
    <img src="./samples/finding-dory.jpg" alt="" />
</div>

That’s it. From now on, all of the page’s images that are in a container with the class “gradient-wrap”, will be equipped with a frame like this one:

To do so, the JavaScript detects the two most dominant colors from the color palette of the respective image, and creates a suitable gradient. It’s obvious that you need to place all images in separate containers, isn’t it?