Skip to content

ramoona/postcss-banks-db

Repository files navigation

PostCSS Banks DB Build Status

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.

About

PostCSS plugin to create CSS based on Banks DB data

Resources

License

Stars

Watchers

Forks

Packages

No packages published