IVORY FRAMEWORK

FLUID GRID LAYOUT - WIDTH 1200PX

12 columns

1 column

11 columns

2 columns

10 columns

3 columns

9 columns

4 columns

8 columns

5 columns

7 columns

6 columns

6 columns

7 columns

5 columns

8 columns

4 columns

9 columns

3 columns

10 columns

2 columns

11 columns

1 column


FLUID GRID LAYOUT - WIDTH 1140PX

12 columns

column

11 columns

2 columns

10 columns

3 columns

9 columns

4 columns

8 columns

5 columns

7 columns

6 columns

6 columns

7 columns

5 columns

8 columns

4 columns

9 columns

3 columns

10 columns

2 columns

11 columns

column


FLUID GRID LAYOUT - WIDTH 1024PX

12 columns

column

11 columns

2 columns

10 columns

3 columns

9 columns

4 columns

8 columns

5 columns

7 columns

6 columns

6 columns

7 columns

5 columns

8 columns

4 columns

9 columns

3 columns

10 columns

2 columns

11 columns

column


FLUID GRID LAYOUT - WIDTH 960PX

12 columns

column

11 columns

2 columns

10 columns

3 columns

9 columns

4 columns

8 columns

5 columns

7 columns

6 columns

6 columns

7 columns

5 columns

8 columns

4 columns

9 columns

3 columns

10 columns

2 columns

11 columns

column


GRID SPLITATION

One

One

Two

One

Two

Three

One

Two

Three

Four

One

Two

Three

Four

Five

One

Two

Three

Four

Five

Six

One

Two

Three

Four

Five

Six

Seven

Eight

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve


NESTED GRID

 
 
nested grid
 
 

nested column

nested column

nested column

nested column

nested column


CENTERED COLUMNS

twelve

eleven

ten

nine

eight

seven

six

five

four

three

two

One

TYPOGRAPHY

HEADERS

Header h1 Sub header h1

Header h2 Sub header h2

Header h3 Sub header h3

Header h4 Sub header h4

Header h5 Sub header h5
Header h6 Sub header h6

PARAGRAPH

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical alignment.

BLOCKQUOTE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. This is a blockquote text. Lakshmikanth Vallampati

LISTS

  • List Item 1
  • List Item 2
    • List Item 1
    • List Item 2
    • List Item 3
    • List Item 4
  • List Item 3
  • List Item 4
  • List Item 1
  • List Item 2
    • List Item 1
    • List Item 2
    • List Item 3
    • List Item 4
  • List Item 3
  • List Item 4
  • List Item 1
  • List Item 2
    • List Item 1
    • List Item 2
    • List Item 3
    • List Item 4
  • List Item 3
  • List Item 4
  1. List Item 1
  2. List Item 2
    1. List Item 1
    2. List Item 2
    3. List Item 3
    4. List Item 4
  3. List Item 3
  4. List Item 4
  • List Item 1
  • List Item 2
    • List Item 1
    • List Item 2
    • List Item 3
    • List Item 4
  • List Item 3
  • List Item 4
List Heading
List Item 1
List Item 2
List Item 3

TABLE

#Highest grossing bollywood filmsGross
13 Idiots$ 70.07 million
2Bodyguard$ 41.86 million
3My name is khan$ 36.4 million
4Om Shanti Om$ 27.12 million
5Singh is king$ 22.75 million
6Ra. One$ 20.93 million
7Jodhaa Akbar$ 20.38 million
8Don 2$ 19.29 million
9Dhoom 2$ 14.56 million
10Housefull$ 13.1 million

FORMS

$
.com
$.00
Search
Search
Checkbox1 Checkbox2
Radio1 Radio2
$
.com
$.00
Search
Search

BUTTONS


              

              

              

              

ALERTS


Example of an alert box.
Example of the successful alert box
Example of the error alert box
Example of the information alert box

PAGINATION



TOGGLE SWITCH


TOOLTIP

This is a simple tooltip developed by using pure CSS3 only.

BREADCRUMB


TABS

ACCORDION

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.

Accordion 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.

Accordion 3

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.


Free to use Under License GPLv2