Flexi plugin default colors and style may not match with your current theme. To make it possible we started rolling out new features in “General Tab” with sub tab “Appearance CSS Style” since v4.0. This page will get updated when new style has been added in next version.
CSS style classes
| Class | Color | Example |
|---|---|---|
fl-has-text-white |
hsl(0, 0%, 100%)
| Hello Flexi |
fl-has-text-black |
hsl(0, 0%, 4%)
| Hello Flexi |
fl-has-text-light |
hsl(0, 0%, 96%)
| Hello Flexi |
fl-has-text-dark |
hsl(0, 0%, 21%)
| Hello Flexi |
fl-has-text-primary |
hsl(171, 100%, 41%)
| HelloFlexi |
fl-has-text-link |
hsl(217, 71%, 53%)
| HelloFlexi |
fl-has-text-info |
hsl(204, 86%, 53%)
| HelloFlexi |
fl-has-text-success |
hsl(141, 71%, 48%)
| HelloFlexi |
fl-has-text-warning |
hsl(48, 100%, 67%)
| HelloFlexi |
fl-has-text-danger |
hsl(348, 100%, 61%)
| HelloFlexi |
You can use each color in their light and dark versions. Simply append *-light or *-dark
| Class | Light/Dark background | Example |
|---|---|---|
fl-has-background-primary-light |
hsl(171, 100%, 96%)
| Hello Flexi |
fl-has-background-link-light |
hsl(219, 70%, 96%)
| Hello Flexi |
fl-has-background-info-light |
hsl(206, 70%, 96%)
| Hello Flexi |
fl-has-background-success-light |
hsl(142, 52%, 96%)
| Hello Flexi |
fl-has-background-warning-light |
hsl(48, 100%, 96%)
| Hello Flexi |
fl-has-background-danger-light |
hsl(347, 90%, 96%)
| Hello Flexi |
fl-has-background-primary-dark |
hsl(171, 100%, 29%)
| Hello Flexi |
fl-has-background-link-dark |
hsl(217, 71%, 45%)
| Hello Flexi |
fl-has-background-info-dark |
hsl(204, 71%, 39%)
| Hello Flexi |
fl-has-background-success-dark |
hsl(141, 53%, 31%)
| Hello Flexi |
fl-has-background-warning-dark |
hsl(48, 100%, 29%)
| Hello Flexi |
fl-has-background-danger-dark |
hsl(348, 86%, 43%)
| Hello Flexi |
| Class | Font-size | Size |
|---|---|---|
fl-is-size-1 |
3rem |
Example |
fl-is-size-2 |
2.5rem |
Example |
fl-is-size-3 |
2rem |
Example |
fl-is-size-4 |
1.5rem |
Example |
fl-is-size-5 |
1.25rem |
Example |
fl-is-size-6 |
1rem |
Example |
fl-is-size-7 |
0.75rem |
Example |
| Property | Shortcut | Classes ↓ | ||||||
|---|---|---|---|---|---|---|---|---|
| Values → | 0 |
0.25rem |
0.5rem |
0.75rem |
1rem |
1.5rem |
3rem |
|
fl-margin |
fl-m |
fl-m-0 |
fl-m-1 |
fl-m-2 |
fl-m-3 |
fl-m-4 |
fl-m-5 |
fl-m-6 |
fl-margin-top |
fl-mt |
fl-mt-0 |
fl-mt-1 |
fl-mt-2 |
fl-mt-3 |
fl-mt-4 |
fl-mt-5 |
fl-mt-6 |
fl-margin-right |
fl-mr |
fl-mr-0 |
fl-mr-1 |
fl-mr-2 |
fl-mr-3 |
fl-mr-4 |
fl-mr-5 |
fl-mr-6 |
fl-margin-bottom |
fl-mb |
fl-mb-0 |
fl-mb-1 |
fl-mb-2 |
fl-mb-3 |
fl-mb-4 |
fl-mb-5 |
fl-mb-6 |
fl-margin-left |
fl-ml |
fl-ml-0 |
fl-ml-1 |
fl-ml-2 |
fl-ml-3 |
fl-ml-4 |
fl-ml-5 |
fl-ml-6 |
fl-margin-left and fl-margin-right
|
fl-mx |
fl-mx-0 |
fl-mx-1 |
fl-mx-2 |
fl-mx-3 |
fl-mx-4 |
fl-mx-5 |
fl-mx-6 |
fl-margin-top and fl-margin-bottom
|
fl-my |
fl-my-0 |
fl-my-1 |
fl-my-2 |
fl-my-3 |
fl-my-4 |
fl-my-5 |
fl-my-6 |
fl-padding |
fl-p |
fl-p-0 |
fl-p-1 |
fl-p-2 |
fl-p-3 |
fl-p-4 |
fl-p-5 |
fl-p-6 |
fl-padding-top |
fl-pt |
fl-pt-0 |
fl-pt-1 |
fl-pt-2 |
fl-pt-3 |
fl-pt-4 |
fl-pt-5 |
fl-pt-6 |
fl-padding-right |
fl-pr |
fl-pr-0 |
fl-pr-1 |
fl-pr-2 |
fl-pr-3 |
fl-pr-4 |
fl-pr-5 |
fl-pr-6 |
fl-padding-bottom |
fl-pb |
fl-pb-0 |
fl-pb-1 |
fl-pb-2 |
fl-pb-3 |
fl-pb-4 |
fl-pb-5 |
fl-pb-6 |
fl-padding-left |
fl-pl |
fl-pl-0 |
fl-pl-1 |
fl-pl-2 |
fl-pl-3 |
fl-pl-4 |
fl-pl-5 |
fl-pl-6 |
fl-padding-left and fl-padding-right
|
fl-px |
fl-px-0 |
fl-px-1 |
fl-px-2 |
fl-px-3 |
fl-px-4 |
fl-px-5 |
fl-px-6 |
fl-padding-top and fl-padding-bottom
|
fl-py |
fl-py-0 |
fl-py-1 |
fl-py-2 |
fl-py-3 |
fl-py-4 |
fl-py-5 |
fl-py-6 |