Documentaion

Agile CSS Framework, the small CSS file that makes wonders. 100's of UI elements to build light-weight HTML pages fast and for free

Quick Start

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

Downlaod
Please click the link to download the CSS file
CDN

Or use or CDN link, copy-paste the stylesheet into your head before all other stylesheets to load our CSS.

Start Page

Use this code to start a page from scarch

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.

bg-color-1
bg-color-2
bg-color-gradient
bg-danger
bg-success
bg-info
bg-grey
bg-dark
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.
Margin and Padding

Add margin and padding classes to set the required space between elements, please note that numbers are refering to rem which is the default font size.

  • Add the classes m0, m1, m2 , m4 to any element to increase or remove margin
  • Add the classes m-v-1, m-v-2, m-v-3, m-v-4, m-v-10 to any element to increase top and bottom margin
  • Add the classes m-h-1, m-h-2, m-h-3, m-h-4 to any element to increase left and right margin
  • Add the classes m-d-1, m-d-2 to any element to increase margin on desctop devices only
  • Add the classes p0, p1, p2 , p4 to any element to increase or remove padding
  • Add the classes p-v-1, p-v-2, p-v-3, p-v-4, p-v-10 to any element to increase top and bottom padding
  • Add the classes p-h-1, p-h-2, p-h-3, p-h-4 to any element to increase left and right padding
  • Add the classes p-d-1, p-d-2 to any element to increase padding on desctop devices only
Styles

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

rounded

alt text

circle

alt text

img-thumnail

alt text

rounded bordered

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

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

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-gradient This text is important.

Grid

Agile CSS Framework has mobile-first flexbox grid, twelve column system.

  • Create a div and add the class row.
  • Inside this div, create divisions and add the class col
1 of 2 .col
2 of 2 .col
Setting columns width

add col- with a number from 1 to 12 to set the size

1 of 2 .col-8
2 of 2 .col-4
Setting columns different width for different devices

Use col-sm- col-md- col-lg- col-xl- with any number from 1 to

The sum in each row must be 12,
  • -12 will make a single column
  • -6 -6 a rwo of two equal columns
  • -3 -6 -3 a row of three columns not equal in size

Example:
col-sm-12 shows a full width column on small devices, col-md-6 shows 2 columns on tablets, col-lg-3 shows 4 columns on desktop
Please, resize the window to see the chanages on all devices.

1 of 4 col-sm-12 col-md-6 col-lg-4
2 of 4 col-sm-12 col-md-6 col-lg-4
3 of 4 col-sm-12 col-md-6 col-lg-4
4 of 4 col-sm-12 col-md-6 col-lg-4
Reorder columns on different devices

In smoe cases we need to show a column first on large devices but last on small devices or visa versa

  • lg-order-first will show a column first on large devices
  • lg-order-last will show a column last on large devices
1 of 2 col-sm-12 col-lg-8
1 of 2 first on large devices 2nd on small devices

Layouts

  • Add the class container to get boxed division
  • Add the class container-fluid to get wide division
  • Add no classes to get full width division

Use the code below to get a page layout suits your needs

Typography

  • Changing the variables color-1 will change the colors of all Heading elements
  • You can color texts using the ready classes color-1, color-2, info, success, danger, dark, black, white
  • You can highlight text using the ready classes color-1, color-2, bg-color-gradient, bg-success, bg-info, bg-danger, bg-dark, bg-light-grey
  • You can outine text using the ready classes outline-color-1, outline-color-2, outline-color-dark, outline-color-grey, outline-color-info, outline-color-success, outline-color-danger, outline-light-grey
  • Add the classes font-weight-200, font-weight-400, bold to change font weight
Headings

You use the elemnts h1-h6 or uses there classes any apply on any other text elementh1, h2, h3, h4, h5, h6

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Bordered Title

Top Bordered Title

Bottom Bordered Title

Fancy Title

Short line

Display

You display classes for bigger text without giving semantic meaning display-1, display-2, display-3, display-4, display-5, display-6

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

gradient effect

Contextual Backgrounds

You can color texts using the ready classes color-1, color-2, info, success, danger, dark, black, white. You can add the class d-inline-block to make text display inline block

bg-color-1 This text is important.

bg-color-2 This text is important.

bg-color-gradient This text is important.

bg-success This text indicates success.

bg-info This text represents some information.

bg-danger This text represents danger with d-inline-block.

bg-grey black on grey with d-inline-block.

bg-dark white on dark with d-inline-block.

Contextual text

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.

Outlined text

You can outine text using the ready classes outline-color-1, outline-color-2, outline-color-dark, outline-color-grey, outline-color-info, outline-color-success, outline-color-danger, outline-light-grey. You can add the class d-inline-block to make text display inline block.

outline-color-1

outline-color-1 with class d-inline-block

outline-color-2 with class d-inline-block

outline-color-success with class d-inline-block

outline-color-info with class d-inline-block

outline-color-danger with class d-inline-block

outline-color-dark with class d-inline-block

Text Formatting and Transformation

Add the following classes on any text element

  • text-lowercase Lowercased text.
  • text-uppercase Uppercased text.
  • text-capitalize Capitalized text.
  • old-info to get line through text.
  • overline to get line over text.
  • underline to get line under text.
  • italic to get the text italic.
  • Add the classes font-weight-200, font-weight-400, bold to change font weight
  • Add classes letter-spacing-0, letter-spacing-1, letter-spacing-2 to add and remove letter spacing.
  • left left aligned text.
  • center centered text.
  • right right aligned text.
Code Block

p { color: red; }
body { background-color: #eee; }

Quote

Great things in business are never done by one person. They're done by a team of people.

Steve Jobs, Apple Inc.

Why Us

Add the class vertical-rl


Our Mission

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quidem minus id omnis, nam expedita, ea fuga commodi voluptas iusto, hic autem deleniti dolores explicabo labore enim repellat earum perspiciatis. consectetur adipisicing elit. Quasi quidem minus id omnis, nam expedita, ea fuga commodi voluptas iusto, hic autem deleniti dolores explicabo labore enim repellat earum perspiciatis.

Ladd the class drop-caps then add you color and font weight eg: color-1 font-weight-400 ipsum dolor sit amet, consectetur adipisicing elit. Quasi quidem minus id omnis, nam expedita, ea fuga commodi voluptas iusto, hic autem deleniti dolores explicabo labore enim repellat earum perspiciatis. consectetur adipisicing elit. Quasi quidem minus id omnis, nam expedita, ea fuga commodi voluptat earum perspiciatis.

Paragraphs 3 columns & Rules
Paragraphs with columns: add classes to any p element to set the number of comuns par-2-cols or par-3-cols or par-4-cols set the size of gap between the colomns add no classes or par-cols-gap-2 or par-cols-gap-3 and if you want to set rules add this class par-cols-rule consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Paragraphs 4 columns No Rules
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Positions and Displays

Positions CSS Classes

Add these classes to change div position position-static, position-fixed, position-absolute, position-relative, position-sticky
What are CSS Positions?

  • To make fixed elements to the top of page add the classes position-fixed top-0
  • To make fixed elements to the bottom of page add the classes position-fixed bottom-0
  • To make fixed elements to the right or left of page add the classes left-0 right-0
  • To make fixed elements (sticky) inside a dev position-sticky
Display CSS Classes

Add these classes to change div Display d-none, d-inline, d-inline-block, d-block, d-table, d-table-row, d-table-cell, d-flex, d-inline-flex
What are CSS display types?

Flex CSS Classes

Add these classes to change flex div behaviour d-none, d-inline, d-inline-block, d-block, d-table, d-table-row, d-table-cell, d-flex, d-inline-flex
What are CSS display types?

  • Container Behaviour add these classes flex-row, flex-column, flex-row-reverse, flex-column-revers, flex-wrap, flex-nowrap, flex-wrap-reverse, flex-fill
  • Justify contents horizantaly add these classes justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
  • Align items verticaly (horizantaly if flex-colomn) add these classes align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch, align-items-stretch
  • Align content verticaly (of item) add these classes align-content-start, align-content-end, align-content-center, align-content-between, align-content-around, align-content-stretch
  • Align self verticaly (of item) add these classes align-self-auto, align-self-start, align-self-end, align-self-center, align-self-baseline, align-self-stretch

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