transferz-fe-component-library

FE components library

Components included

• Button
• Icon
• Typography

Variable values

Colors

These colors define the theme, and are used in all generated classes related to CSS properties that use color values.

• BLACK & GREY

  • $black: #000000;
  • $grey-3: #a1a1a1;
  • $grey-2: #e0e0e0;
  • $grey-1: rgba(230, 230, 230);

• ASPHALT

  • $asphalt-7: #7e8a96;
  • $asphalt-6: #38414a;
  • $asphalt-5: #5e6d7c;
  • $asphalt-4: #afb6be;
  • $asphalt-3: #dfe2e5;
  • $asphalt-2: #eff0f2;
  • $asphalt-1: #f7f8f8;

• ATLANTIS

  • $atlantis-5: #88b537;
  • $atlantis-4: #97c93d;
  • $atlantis-3: #cbe49e;
  • $atlantis-2: #eaf4d8;
  • $atlantis-1: #f5faec;

• BLUE

  • $blue-5: #0083a8;
  • $blue-4: #0092bb;
  • $blue-3: #80c9dd;
  • $blue-2: #cce9f1;
  • $blue-1: #e6f4f8;

• RED

  • $red-5: #d45b43;
  • $red-4: #ec654a;
  • $red-3: #f6b2a5;
  • $red-2: #fbe0db;
  • $red-1: #fdf0ed;

• YELLOW

  • $yellow-5: #e6bb30;
  • $yellow-4: #ffd035;
  • $yellow-3: #ffe89a;
  • $yellow-2: #fff6d7;
  • $yellow-1: #fffaeb;

Generated classes

Color related classes

For every color variable listed above, there are few classes generated, each for a specific CSS rule that's related to a color value.

.color-#{$color-name}, .#{$color-name} {
    color: $color;
}

.bg-color-#{$color-name}, .bg-#{$color-name} {
    background-color: $color;
}

.border-color-#{$color-name}, .border-#{$color-name} {
    border-color: $color;
}

Display variant classes

For CSS display rule there are some generated classes described below. Available variables are: 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'none';

  .display-#{$value}, .d-#{$value} {
    display: $value;
  }

Flexbox related classes

There are some variables that define available combinations for generated classes described below. Available options for flex-direction are 'row', 'row-reverse', 'column', 'column-reverse';

  .flex-direction-#{$direction}, .flex-#{$direction} {
    flex-direction: $direction;
  }

Available options for justify-content are 'flex-start', 'flex-end', 'center', 'space-between', 'space-evenly', 'space-between';

  .justify-content-#{$value}, .justify-#{$value} {
    justify-content: $value;
  }

Available options for align-items and align-self are 'flex-start', 'flex-end', 'center', 'stretch';

  .align-items-#{$value}, .align-#{$value} {
    align-items: $value;
  }

  .align-self-#{$value}, .self-#{$value} {
    align-self: $value;
  }

Position variant classes

For CSS position rule there are some generated classes described below. Available variables are: 'static', 'relative', 'absolute', 'fixed';

  .position-#{$value}, .p-#{$value} {
    position: $value;
  }

Position top, right, bottom & left variant classes

For CSS position rule there are some generated classes described below. Available values are: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;

  .top-#{$size}-perc,
  .top-#{$size} {
    top: #{$size}%;
  }

  .right-#{$size}-perc,
  .right-#{$size} {
    right: #{$size}%;
  }

  .bottom-#{$size}-perc,
  .bottom-#{$size} {
    bottom: #{$size}%;
  }

  .left-#{$size}-perc,
  .left-#{$size} {
    left: #{$size}%;
  }

Center element

For centering elements there are some generated classes described below.

    CENTER ABSOLUTE HORIZONTALY

    .center-a-h {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    }

    CENTER ABSOLUTE VERTICALLY

    .center-a-v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }

    CENTER ABSOLUTE BOTH
    .center-a-b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

Grid system classes

Grid system contains generated classes that help in development of the layout, affecting the position, size and inter-relations of components in the flexbox grid. Grid is based on the system of 12 columns, which represent the full width/height, that is 100% of available space. Available variables are: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;

  .width-#{$size}, .w-#{$size} {
    width: calc(100% / 12 * #{$size});
  }
  .max-width-#{$size}, .max-w-#{$size} {
    max-width: calc(100% / 12 * #{$size});
  }
  .min-width-#{$size}, .min-w-#{$size} {
    min-width: calc(100% / 12 * #{$size});
  }

  .height-#{$size}, .h-#{$size} {
    height: calc(100% / 12 * #{$size});
  }
  .max-height-#{$size}, .max-h-#{$size} {
    max-height: calc(100% / 12 * #{$size});
  }
  .min-height-#{$size}, .min-h-#{$size} {
    min-height: calc(100% / 12 * #{$size});
  }

  .grow-#{$size}, .flex-grow-#{$size} {
    flex-grow: $size;
  }
  .shrink-#{$size}, .flex-shrink-#{$size} {
    flex-shrink: $size;
  }
  .basis-#{$size}, .flex-basis-#{$size} {
    flex-basis: $size;
  }

Margin & padding classes

For CSS margin and padding rules, with all their variants, there are some generated classes described below. Available variables are from 0 - 100.

    .padding-#{$size}, .p-#{$size} {
    padding: #{$size}px;
  }

  .padding-vertical-#{$size}, .p-v-#{$size} {
    padding: #{$size}px 0;
  }

  .padding-horizontal-#{$size}, .p-h-#{$size} {
    padding: 0 #{$size}px;
  }

  .padding-left-#{$size}, .p-l-#{$size} {
    padding-left: #{$size}px;
  }

  .padding-right-#{$size}, .p-r-#{$size} {
    padding-right: #{$size}px;
  }

  .padding-top-#{$size}, .p-t-#{$size} {
    padding-top: #{$size}px;
  }

  .padding-bottom-#{$size}, .p-b-#{$size} {
    padding-bottom: #{$size}px;
  }

  .margin-#{$size}, .m-#{$size} {
    margin: #{$size}px;
  }

  .margin-vertical-#{$size}, .m-v-#{$size} {
    margin: #{$size}px 0;
  }

  .margin-horizontal-#{$size}, .m-h-#{$size} {
    margin: 0 #{$size}px;
  }

  .margin-left-#{$size}, .m-l-#{$size} {
    margin-left: #{$size}px;
  }

  .margin-right-#{$size}, .m-r-#{$size} {
    margin-right: #{$size}px;
  }

  .margin-top-#{$size}, .m-t-#{$size} {
    margin-top: #{$size}px;
  }

  .margin-bottom-#{$size}, .m-b-#{$size} {
    padding-bottom: #{$size}px;
  }

Opacity value classes

For CSS opacity rule there are some generated classes described below. Available variables are: 0, 0-2, 0-4, 0-5, 0-6, 0-8, 0-9, 0-95, 1;

  .opacity-#{$name} {
    opacity: $value;
  }

Z-index value classes

For CSS z-index rule there are some generated classes described below. Available values are: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 99, 999;

  .z-index-#{$value}, .z-#{$value} {
    opacity: $value;
  }

Border radius value classes

For CSS border-radius rule there are some generated classes described below. Available values are: 5, 8, 10, 12, 15, 16, 20, 24, 25, 28, 30, 35;

  .border-radius-#{$size},
  .b-r-#{$size} {
    border-radius: #{$size}px;
  }

  .border-radius-50-perc,
  .b-r-50-perc {
    border-radius: 50%;
   }

Commit Message Format

<type>: <summary>
  │         │
  │         └─⫸ Summary in present tense. Not capitalized. No period at the end.
  │
  │
  └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test

The <type> and <summary> fields are mandatory.

Type

Must be one of the following:

• build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• perf: A code change that improves performance
• refactor: A code change that neither fixes a bug nor adds a feature
• test: Adding missing tests or correcting existing tests