UI Elements

Pure HTML CSS elements with Agile CSS framework

Agile CSS Framework provides 100's of free UI elemnts you can use in your project

Backgrounds

The best way to add Agile CSS Framework to your project is to download the css file and link to it in your HTML page header

Colored

Please add the CSS classes in the boxes

bg-color-1
bg-color-2
bg-color-gradient
bg-danger
bg-success
bg-info
bg-grey
bg-dark
Outlined

Please add the CSS classes in the boxes

outline-color-1
outline-color-2
outline-color-info
outline-color-success
outline-color-dark
outline-light-grey
Brightened

Please add the CSS classes in the boxes

bg-color-1 brightness-150
bg-color-1
bg-color-1 brightness-66
bg-color-1 brightness-33

Buttons

Add the element button or the class button apply the classes below

Sizes
Outlined
Width



Badges

Add a span element with the class badge apply the classes below

bg-color-1 bg-color-2 bg-grey bg-info bg-success bg-danger

outline-color-1 outline-color-2 outline-color-dark outline-color-success outline-color-info outline-color-danger

Alerts

Add a div element with the class msg apply the classes below

msg bg-color-1 Note! A meesgae with your brand color.
msg bg-color-2 Note! A meesgae with your second brand color.
msg bg-grey You successfully read this important alert message.
msg bg-info You can change the setting to meet your needs.
msg bg-success You successfully read this important alert message. x
msg bg-danger Please be carefull. x

Icons

Styling icons
  • To fill add bg-color- classes like bg-color-1
  • To outline add outline-color- classes like outline-color-1
  • add rounded or circle
Icons sizes

Add the classes icon-xs icon-s icon-m icon-ml icon-lg icon-xl

Social Media Icons

Dividers

1. no style


2. add the class width-50 to the element hr


3. add the class width-short to the element hr


Pagination

Designed and built with love by Kim Majali, maintained by Europe IT Outsourcing Company Developers.