Theming

Agile CSS Framework comes a basic set of CSS variables:

Colors

Change the colors variables to match your brand color, color-1 is the primary color. You might need to add the class white to make the text in white color

bg-color-1
bg-color-2
bg-luxury
bg-color-gradient
bg-info
bg-success
bg-warning
bg-danger
bga-color-1
bga-color-2
bga-luxury
bg-light-grey
bga-info
bga-success
bga-warning
bga-danger
bg-dark
bg-grey
bga-dark
bga-grey
Background Colors on Hover
Background Color: bg-color-1-hover bg-color-2-hover bg-black-hover bg-white-hover bg-dark-hover bg-danger-hover bg-success-hover bg-info-hover
Color & Background Color: bga-color-1-hover bga-color-2-hover bga-black-hover bga-white-hover bga-dark-hover bga-danger-hover bga-success-hover bga-info-hover
Contextual Text

Use the contextual text classes to provide "meaning through colors":

You can color texts using the ready classes color-1, color-2, info, success, danger, dark, black, white

color-1 This text is important.

color-2 This text is important.

success This text indicates success.

info This text represents some information.

danger This text represents danger.

warning This text represents danger.

luxury This text represents danger.

color-gradien This text is important.

dark This text represents normal text.


Contextual text classes on hover

You can add color-hover classes to change the color on hover, try hovering on the classes below
color-1-hover color-2-hover success-hover info-hover danger-hover dark-hover white-hover color-gradient-hover

Sizes
  • Changing the values of --font-size-mobile and --font-size-desktop will change the font sizes of all text elements.
  • That also will change margin and padding values.
  • Changing the values of --fontweight will set font weight of most of text elements.
  • Changing the values of --fontweight-heading will set default font weight of h1-h6 elements and classes.
Styles

Change the website style by applying the most popular styles using ready CSS classes.

rounded

alt text

img-thumnail

alt text

circle

alt text

top-circle

alt text

circle bordered

alt text

img-thumnail bordered

alt text
outline-color-1
outline-color-2
outline-color-info
outline-color-success
outline-color-dark
outline-light-grey
← Previous Next →

Designed and built with love in Europe by Europe IT Outsourcing Company Developers.

We stand with Ukraine