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-color-gradient
bg-danger
bg-success
bg-info
bg-grey
bg-dark
bga-color-1
bga-color-2
bg-light-grey
bga-danger
bga-success
bga-info
bga-grey
bga-dark
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.

color-2 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 deafult font weight of h1-h6 elements and classes.
Styles

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

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.