1. Home
  2. Docs
  3. Flexi Gallery
  4. Tutorial
  5. Appearance CSS Style

Appearance CSS Style

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%)
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%)
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%)
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-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-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-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-py fl-py-0 fl-py-1 fl-py-2 fl-py-3 fl-py-4 fl-py-5 fl-py-6

Leave a Reply