EBONY: IVORY FRAMEWORK MODIFIED

Ebony is a web page stylesheets collection, based on ivory, designed originally for ZJU's forum CC98.org(only vaild in ZJU campus).

Ebony is composed of:

A responsive grid framework modified from ivory;
A CSS normalization forked from normalize.css;
A newly developed Markup Language;
A syntax highlighter from highlight.js
A MVVC library from knockout
A evented js library from Sammy.js
An icon font type from glyphicons provided as a part of bootstrap
An emoji font type from emoji symbols
Color themes of a white and black style.更换主题

FLUID GRID LAYOUT
WIDTH 960PX DEFAULT FOR 1280PX SCREEN

12 columns

1 column

11 columns

2 columns

10 columns

3 columns

9 columns

4 columns

8 columns

5 columns

7 columns

6 columns

7 columns

5 columns

8 columns

4 columns

9 columns

3 columns

10 columns

2 columns

11 columns

1 column

golden-small column

golden-large column

golden-small column

GRID SPLITATION

One

Two

One

Two

One

Offset by 1/4

Two

One

Offset by 2/5

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

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

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 with class: pull-quote.

Lakshmikanth Vallampati

CODE


var map;
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

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

Input

Select List

Textarea

Checkboxes Checkbox1 Checkbox2

Radio Buttons Radio1 Radio2

Prepended input $

Appended input .com

combined input $.00

Input Select List Textarea

Checkboxes Checkbox1 Checkbox2

Radio Buttons Radio1 Radio2

Prepended input $

Appended input .com

combined input $.00

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

TOOLTIP

This is a simple tooltipThis is sample 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.

EMOJI

CARET AND GLYPHINCONS

Caret:

.glyphicon .glyphicon-adjust
.glyphicon .glyphicon-align-center
.glyphicon .glyphicon-align-justify
.glyphicon .glyphicon-align-left
.glyphicon .glyphicon-align-right
.glyphicon .glyphicon-arrow-down
.glyphicon .glyphicon-arrow-left
.glyphicon .glyphicon-arrow-right
.glyphicon .glyphicon-arrow-up
.glyphicon .glyphicon-asterisk
.glyphicon .glyphicon-backward
.glyphicon .glyphicon-ban-circle
.glyphicon .glyphicon-barcode
.glyphicon .glyphicon-bell
.glyphicon .glyphicon-bold
.glyphicon .glyphicon-book
.glyphicon .glyphicon-bookmark
.glyphicon .glyphicon-briefcase
.glyphicon .glyphicon-bullhorn
.glyphicon .glyphicon-calendar
.glyphicon .glyphicon-camera
.glyphicon .glyphicon-certificate
.glyphicon .glyphicon-check
.glyphicon .glyphicon-chevron-down
.glyphicon .glyphicon-chevron-left
.glyphicon .glyphicon-chevron-right
.glyphicon .glyphicon-chevron-up
.glyphicon .glyphicon-circle-arrow-down
.glyphicon .glyphicon-circle-arrow-left
.glyphicon .glyphicon-circle-arrow-right
.glyphicon .glyphicon-circle-arrow-up
.glyphicon .glyphicon-cloud
.glyphicon .glyphicon-cloud-download
.glyphicon .glyphicon-cloud-upload
.glyphicon .glyphicon-cog
.glyphicon .glyphicon-collapse-down
.glyphicon .glyphicon-collapse-up
.glyphicon .glyphicon-comment
.glyphicon .glyphicon-compressed
.glyphicon .glyphicon-copyright-mark
.glyphicon .glyphicon-credit-card
.glyphicon .glyphicon-cutlery
.glyphicon .glyphicon-dashboard
.glyphicon .glyphicon-download
.glyphicon .glyphicon-download-alt
.glyphicon .glyphicon-earphone
.glyphicon .glyphicon-edit
.glyphicon .glyphicon-eject
.glyphicon .glyphicon-envelope
.glyphicon .glyphicon-euro
.glyphicon .glyphicon-exclamation-sign
.glyphicon .glyphicon-expand
.glyphicon .glyphicon-export
.glyphicon .glyphicon-eye-close
.glyphicon .glyphicon-eye-open
.glyphicon .glyphicon-facetime-video
.glyphicon .glyphicon-fast-backward
.glyphicon .glyphicon-fast-forward
.glyphicon .glyphicon-file
.glyphicon .glyphicon-film
.glyphicon .glyphicon-filter
.glyphicon .glyphicon-fire
.glyphicon .glyphicon-flag
.glyphicon .glyphicon-flash
.glyphicon .glyphicon-floppy-disk
.glyphicon .glyphicon-floppy-open
.glyphicon .glyphicon-floppy-remove
.glyphicon .glyphicon-floppy-save
.glyphicon .glyphicon-floppy-saved
.glyphicon .glyphicon-folder-close
.glyphicon .glyphicon-folder-open
.glyphicon .glyphicon-font
.glyphicon .glyphicon-forward
.glyphicon .glyphicon-fullscreen
.glyphicon .glyphicon-gbp
.glyphicon .glyphicon-gift
.glyphicon .glyphicon-glass
.glyphicon .glyphicon-globe
.glyphicon .glyphicon-hand-down
.glyphicon .glyphicon-hand-left
.glyphicon .glyphicon-hand-right
.glyphicon .glyphicon-hand-up
.glyphicon .glyphicon-hd-video
.glyphicon .glyphicon-hdd
.glyphicon .glyphicon-header
.glyphicon .glyphicon-headphones
.glyphicon .glyphicon-heart
.glyphicon .glyphicon-heart-empty
.glyphicon .glyphicon-home
.glyphicon .glyphicon-import
.glyphicon .glyphicon-inbox
.glyphicon .glyphicon-indent-left
.glyphicon .glyphicon-indent-right
.glyphicon .glyphicon-info-sign
.glyphicon .glyphicon-italic
.glyphicon .glyphicon-leaf
.glyphicon .glyphicon-link
.glyphicon .glyphicon-list
.glyphicon .glyphicon-list-alt
.glyphicon .glyphicon-lock
.glyphicon .glyphicon-log-in
.glyphicon .glyphicon-log-out
.glyphicon .glyphicon-magnet
.glyphicon .glyphicon-map-marker
.glyphicon .glyphicon-minus
.glyphicon .glyphicon-minus-sign
.glyphicon .glyphicon-move
.glyphicon .glyphicon-music
.glyphicon .glyphicon-new-window
.glyphicon .glyphicon-off
.glyphicon .glyphicon-ok
.glyphicon .glyphicon-ok-circle
.glyphicon .glyphicon-ok-sign
.glyphicon .glyphicon-open
.glyphicon .glyphicon-paperclip
.glyphicon .glyphicon-pause
.glyphicon .glyphicon-pencil
.glyphicon .glyphicon-phone
.glyphicon .glyphicon-phone-alt
.glyphicon .glyphicon-picture
.glyphicon .glyphicon-plane
.glyphicon .glyphicon-play
.glyphicon .glyphicon-play-circle
.glyphicon .glyphicon-plus
.glyphicon .glyphicon-plus-sign
.glyphicon .glyphicon-print
.glyphicon .glyphicon-pushpin
.glyphicon .glyphicon-qrcode
.glyphicon .glyphicon-question-sign
.glyphicon .glyphicon-random
.glyphicon .glyphicon-record
.glyphicon .glyphicon-refresh
.glyphicon .glyphicon-registration-mark
.glyphicon .glyphicon-remove
.glyphicon .glyphicon-remove-circle
.glyphicon .glyphicon-remove-sign
.glyphicon .glyphicon-repeat
.glyphicon .glyphicon-resize-full
.glyphicon .glyphicon-resize-horizontal
.glyphicon .glyphicon-resize-small
.glyphicon .glyphicon-resize-vertical
.glyphicon .glyphicon-retweet
.glyphicon .glyphicon-road
.glyphicon .glyphicon-save
.glyphicon .glyphicon-saved
.glyphicon .glyphicon-screenshot
.glyphicon .glyphicon-sd-video
.glyphicon .glyphicon-search
.glyphicon .glyphicon-send
.glyphicon .glyphicon-share
.glyphicon .glyphicon-share-alt
.glyphicon .glyphicon-shopping-cart
.glyphicon .glyphicon-signal
.glyphicon .glyphicon-sort
.glyphicon .glyphicon-sort-by-alphabet
.glyphicon .glyphicon-sort-by-alphabet-alt
.glyphicon .glyphicon-sort-by-attributes
.glyphicon .glyphicon-sort-by-attributes-alt
.glyphicon .glyphicon-sort-by-order
.glyphicon .glyphicon-sort-by-order-alt
.glyphicon .glyphicon-sound-5-1
.glyphicon .glyphicon-sound-6-1
.glyphicon .glyphicon-sound-7-1
.glyphicon .glyphicon-sound-dolby
.glyphicon .glyphicon-sound-stereo
.glyphicon .glyphicon-star
.glyphicon .glyphicon-star-empty
.glyphicon .glyphicon-stats
.glyphicon .glyphicon-step-backward
.glyphicon .glyphicon-step-forward
.glyphicon .glyphicon-stop
.glyphicon .glyphicon-subtitles
.glyphicon .glyphicon-tag
.glyphicon .glyphicon-tags
.glyphicon .glyphicon-tasks
.glyphicon .glyphicon-text-height
.glyphicon .glyphicon-text-width
.glyphicon .glyphicon-th
.glyphicon .glyphicon-th-large
.glyphicon .glyphicon-th-list
.glyphicon .glyphicon-thumbs-down
.glyphicon .glyphicon-thumbs-up
.glyphicon .glyphicon-time
.glyphicon .glyphicon-tint
.glyphicon .glyphicon-tower
.glyphicon .glyphicon-transfer
.glyphicon .glyphicon-trash
.glyphicon .glyphicon-tree-conifer
.glyphicon .glyphicon-tree-deciduous
.glyphicon .glyphicon-unchecked
.glyphicon .glyphicon-upload
.glyphicon .glyphicon-usd
.glyphicon .glyphicon-user
.glyphicon .glyphicon-volume-down
.glyphicon .glyphicon-volume-off
.glyphicon .glyphicon-volume-up
.glyphicon .glyphicon-warning-sign
.glyphicon .glyphicon-wrench
.glyphicon .glyphicon-zoom-in
.glyphicon .glyphicon-zoom-out

EBONY: IVORY FRAMEWORK MODIFIED

FLUID GRID LAYOUT WIDTH 960PX DEFAULT FOR 1280PX SCREEN

GRID SPLITATION

NESTED GRID

CENTERED COLUMNS

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

BLOCKQUOTE

CODE

LISTS

TABLE

FORMS

BUTTONS

ALERTS

PAGINATION

TOOLTIP

BREADCRUMB

TABS

ACCORDION

EMOJI

CARET AND GLYPHINCONS

FLUID GRID LAYOUT
WIDTH 960PX DEFAULT FOR 1280PX SCREEN