Heading

Use the <h1> to <h6> elements to define your headings.

Example

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

You can add the .eli-h1, .eli-h2, .eli-h3, .eli-h4, .eli-h5 or .eli-h6 class to change size of your headings.

Classes

Class	Description
`.eli-h1`	font-size: 38px
`.eli-h2`	font-size: 26px
`.eli-h3`	font-size: 20px
`.eli-h4`	font-size: 18px
`.eli-h5`	font-size: 16px
`.eli-h6`	font-size: 14px

Top

Grid System

usage

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Rows must be placed within a .eli-container (fixed-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.

Example

eli-size-1-1

eli-size-1-2

eli-size-1-3

eli-size-1-4

eli-size-1-5

eli-size-1-6

eli-size-1-10

Classes

Class	Description
`.eli-container`	Wrapper all content
`.eli-row`	Create Rows in `.eli-container` class

Top

Paragraph

Written by Amir Aghahadi on 02 Sep 2014

CSS allows you to separate presentation from content when building a Web site. Put another way, HTML itself is rather limited in what it can effectively display.

With HTML, you often can’t find an easy way — or any way at all — to display the content so that it looks really good when someone views it in a browser. Using CSS techniques, you can often make your site much more attractive, and at the same time, enforce style rules that help unify the entire site’s appearance across all its pages.

Class	Description
`.eli-paragraph`	Add this class to define the Paragraph component
`.eli-paragraph-title`	Add this class to a heading to create an Paragraph title.
`.eli-paragraph-desc`	Add this class to a paragraph which contains meta data about your paragraph.
`eli-paragraph-lead`	Add this class to the opening paragraph of your article to highlight it.

Top

Text

Text Left

CSS allows you to separate presentation from content when building a Web site

Text Right

CSS allows you to separate presentation from content when building a Web site

Text Center

CSS allows you to separate presentation from content when building a Web site

Text Justify

CSS allows you to separate presentation from content when building a Web site

Classes

Class	Description
`.eli-text-left`	Aligns text to the left.
`.eli-text-right`	Aligns text to the right.
`.eli-text-center`	Centers text horizontally.
`.eli-text-justify`	Justifies text.
`.eli-text-small`	Add this class to decrease the font size.
`.eli-text-large`	Add this class to increase the font size.
`.eli-text-bold`	Add this class to create bold text.

Top

List

Easily create nicely looking lists, which come in different styles.

usage

To apply this component, add the .eli-list class to an unordered or ordered list. The list will now display without any spacing or list-style.

Example

List item 1
List item 2
List item 3

Brindle Rows

Example

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

Classes

Class	Description
`.eli-list`	General List
`.eli-list-brindle`	Striped List

Top

Form

Easily create nicely looking forms with different styles and layouts.

example

Classes

Class	Description
`.eli-form`	Be added to the `form` tag
`.eli-form-row`	every `input` inside a new row

Form Inline

Form-Inline not need to .eli-form-row class for every input .

example

Top

Table

Easily create nicely looking tables, which come in different styles.

usage

To apply this component, add the .eli-table class to a table. The table rows will be separated by lines.

example

Table caption
Table Heading	Table Heading	Table Heading
Table Footer	Table Footer	Table Footer
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

Top

Button

Easily create nicely looking buttons, which come in different styles.

usage

To apply this component, add the .eli-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

example

Link

Color Scheme

There are several color scheme available.

Example	Class	Description
	`.eli-button-primary`	Emphasizes to identify the primary action in a set of buttons.
	`.eli-button-success`	Indicates a successful or positive action.
	`.eli-button-danger`	Indicates a dangerous or negative action.
Link	`.eli-button-link`	Deemphasizes to look like a link while maintaining button behavior.

Size

Add the .eli-button-mini, .eli-button-small or .eli-button-large class to a button to make it smaller or larger.

Classes

Class	Description
`.eli-button-mini`	Mini Buttom
`.eli-button-small`	Small Buttom
`.eli-button-large`	Large Button

Top

Thumbnail

Create different thumbnail images, which come in various styles and sizes.

usage

To apply this component, just add the .eli-thumbnail class to an <img>, <a> or <figure> element.

example

Thumbnail with caption

Add the .eli-thumbnail-caption class to a <div> element to apply a text caption under the image.

example

Caption <div>

Caption <a>

Caption <figure>

Top

Panel

Create layout boxes with different styles.

example

Title

It’s not surprising that designers, not to mention marketing people, want to build attractive Web pages. .eli-panel

Title

It’s not surprising that designers, not to mention marketing people, want to build attractive Web pages. .eli-panel

Title

It’s not surprising that designers, not to mention marketing people, want to build attractive Web pages. .eli-panel

Classes

Class	Description
`.eli-panel`	Add this class to a `<div>` element to define the Panel component.
`.eli-panel-title`	Add this class to a heading to create the panel title.

Top