PostCSS Banks DB

PostCSS plugin to insert CSS based on Banks DB data.

@banks-db-template {
    .billing-form.is-%code% {
        background-color: %color%;
    }
}

.billing-form.is-ru-alfabank {
    background-color: #F22F17;
}
.billing-form.is-be-inbelgium {
    background-color: #ff6600;
}
.billing-form.is-ru-citybank {
    background-color: #0088CF;
}
...

Best Practices

• Banks have different colors so you must use postcss-contrast to be sure about form readability. Put it after postcss-banks-db.

  @banks-db-template {
      .billing-form.is-%code% {
          background-color: %color%;
          color: contrast(%color%);
      }
  }
  

• Add long transition for form colors because quick changes scary users.

  .billing-form.is-%code% {
      transition: background .6s, color .6s;
  }
  

Usage

postcss([ require('postcss-banks-db') ])

See PostCSS docs for examples for your environment.