Linear colour scheme
with LESS

Make content boxes with a linear colour scheme using a LESS loop.

Beauty is in the eye of the beholder, but I think it looks nice (if I have not changed the front page design of this site, go ahead and take a look). The colours are all generated in a LESS loop. In the code snippet below I started out with a colour (#CC66FF), then tested with different values until I got something that looked good.

The LESS snippet below explained:

• @no-main-boxes: 6; - Number of iterations (boxes)

• .bs-main-box-@{index} - Will create CSS classes .bs-main-box-1, .bs-main-box-2 … .bs-main-box-6

• The styling is performed in the mixin .bs-main-box-style(@index)

.bs-main-box-style(@index) {
    @color: desaturate(spin(lighten(#CC66FF, 28%), @index * 40), (@index * 5));

    background-color: @color;
    .bs-title-icon {
      color: darken(@color, 20%);
    }
    border: 1px solid darken(@color, 4%);
  }

  @no-main-boxes: 6;

  .loop (@index) when (@index > 0) {

    .bs-main-box-@{index} {
      .bs-main-box-style(@index);
    }

    .loop(@index - 1);
  }

  .loop (@no-main-boxes);