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

List Item 1
List Item 2
1. List Item 1
2. List Item 2
3. List Item 3
4. 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 Heading: List Item 1; List Item 2; List Item 3

TABLE

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

FORMS

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

‹
1
2
3
4
…
7
8
9
10
›

‹
1
2
3
4
…
7
8
9
10
›

TOGGLE SWITCH

ON OFF

ON OFF

ON OFF

TOOLTIP

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

BREADCRUMB

TABS

Tab 1

Tab1 - Lorem ipsum dolor sit amet. Nues conos grom bosic illes tren. Wilias tos serum kai pen da vatre. Da last der Mullah nicht mit sich scherzen. Zues ter pa beten karl tos serum ka vatre.

Tab 2

Tab2 - 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.Lorem ipsum dolor sit amet. Nues conos grom bosic illes tren. Wilias tos serum kai pen da vatre. Da last der Mullah nicht mit sich scherzen. Zues ter pa beten karl tos serum ka vatre.

Tab 3

Tab3 - Lorem ipsum dolor sit amet. Wilias tos serum kai pen da vatre. Da last der Mullah nicht mit sich scherzen. Nues conos grom bosic illes tren. Zues ter pa beten karl tos serum ka vatre.

Tab 4

Tab4 - Duto sem iskar sit amet. Nues conos grom bosic illes tren. Wilias tos serum kai pen da vatre. Da last der Mullah nicht mit sich scherzen. Zues ter pa beten karl tos serum ka vatre.

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.

Developed by Lakshmikanth Vallampati at WEICE SOFTSYSTEMS

Free to use Under License GPLv2