Customizing Websites With Bookmarklets: How We Improved Our Kanban Board

A 3 minute read written by Dylan February 8, 2017

An illustration of a browser with post its on

About two years ago, we implemented Kanban into our daily processes at Yellow Pencil with great results. Kanban, a Japanese word for “visual signal” or “card”, has several core principles:

  1. Visualize work
  2. Limit work in process
  3. Focus on flow
  4. Continuous improvement

As you might have guessed, there is a strong emphasis on visualization. The most common way to visualize the workflow while using this discipline is to use a Kanban board with cards and columns. Each column on the board represents a step in the workflow. At its most basic level, a Kanban board has three columns; To-Do, Doing, and Done.

Basic board screenshot

A Kanban board can be created with sticky notes and a whiteboard, but with offices in Vancouver and Edmonton, our “board” and “cards” needed to be digital. We’ve been using LeanKit for our digital Kanban board and are big fans of the tool.

True to the principles of Kanban, we have revised our board several times to better visualize the status of work (to do, in progress, in testing, waiting for acceptance, etc.) and the flow between team members (project management, creative, development, etc.). The end result is a board with nested rows that accurately visualize our work and workflow.

Uncollapsed board screenshot

While LeanKit lets you collapse columns so you can focus on the section of the board you work in, you can’t collapse nested rows. If you use filters to show only your cards on the board, this leads to a lot of vertical scrolling past empty rows.

For my LeanKit challenge, I discovered I could collapse the vertical white space by adjusting the site styles in my web browser’s developer tools.

Collapsed board screenshot

Since LeanKit is a cloud-hosted solution, I couldn’t directly edit the styles, so I needed another way of injecting CSS into the page.

Bookmarklets are bookmarks that sit in your browser’s bookmarks bar, but rather than linking to a website, they execute some Javascript.

For my bookmarklet, I created a new bookmark and pasted the following as the URL:

javascript:(function(){var newcss=".laneContents, .laneContents-at, .laneContents-over { height: auto !important; padding-bottom: 10px !important; }.laneContents:after, .laneContents-at:after, .laneContents-over:after { content: \"\"; display: table; clear: both; }";if("\v"=="v"){document.createStyleSheet().cssText=newcss}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=newcss}})();

When clicked, it would insert the CSS into the page which would override the minimum height set for each row.

To take this one step further and have it automatically happen when I am viewing the Kanban board, I created a Tampermonkey and Greasemonkey script.

// ==UserScript==
// @name         Collapse Leankit Vertical Space
// @namespace    http://LEANKIT_ACCOUNT.leankit.com/
// @version      1.0
// @description  Collapse the vertical space in columns on the YP Board
// @author       Dylan Rogowsky
// @match        https://LEANKIT_ACCOUNT.leankit.com/Boards/View/BOARD_ID
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Get the board container height
    var boardHeight = parseInt(window.getComputedStyle(document.getElementById("kb-board"), null).getPropertyValue("height")) - 20; 

    // Force the height of the column contents to be auto
    var customcss = ".laneContents, .laneContents-at, .laneContents-over { height: auto !important; padding-bottom: 10px !important; }";

    // Clear the column contents
    customcss += ".laneContents:after, .laneContents-at:after, .laneContents-over:after { content: \"\"; display: table; clear: both; }";

    // Remove min-height on lane contents
    customcss += "ul.laneContents { min-height: 32px !important; } "; 

    / Force the height of columns to be the height of the board container
    customcss += "div.lane { height: auto !important; min-height: 31px !important; } #kanban > .lane { height: " + boardHeight + "px !important; }"; /
    if ("\v" == "v") {
        document.createStyleSheet().cssText = customcss;
    } else {
        var tag = document.createElement("style");
        tag.type = "text/css";
        document.getElementsByTagName("head")[0].appendChild(tag);
        tag[(typeof document.body.style.WebkitAppearance == "string") ? "innerText" : "innerHTML"] = customcss;
    }
})();

Tampermonkey and Greasemonkey are browser plugins that automatically run scripts on pages that match a URL pattern (the ‘@match’ line). Now I can simply view the board and the vertical whitespace will automatically be collapsed.

Even though this is a small visual change, it has made a significant difference when viewing the board on smaller screens, or when displayed on larger ones, such as a television (as we often do during our daily standup meetings). We can simply scroll horizontally across the board without missing any cards that are out-of-view and need to be discussed.

If you are in a similar situation where you’d like to make visual adjustments to a website or web application, bookmarklets and browser plugins such as Tampermonkey and Greasemonkey can help you tweak a website, even if you don’t have access to the code.

Have you experimented with bookmarklets to solve a different problem? We’d love to see more examples!