Documentation

This is Jikan documentation. It can be a tutorial for who haven't used CSS frameworks yet.
First, You should put these codes in Head tag to urge different devices to accept "Responsiveness" rules.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Grid


Jikan uses 5 media queries to handle better view specially for small sizes.
The table below shows the media queries sizes :
Class Name Size
LG > 87.5em
MD 64em To 87.5em
SM 45em To 64em
MI 25em To 45em
XS < 25em
Media Queries Sizes

So, Let say about grid classes, First you should know that Jikan has container if you want, A container fills the 85% width of page and you can use .ctr class. Other container classes like .ctrFull (Full page container) and .ctrRect (The 70vw and 70vh of page) can be used too.
You can put 12 grid in a row. You should use .row for defining a row. Then, You can put how many grids do you want in a row.
Every grid starts with a .cln and after this word, You put media query size like LG and then number of that like 6.

In the example below, We have created 2 grid in a row :
<div class="row">
    <div class="clnLG6 clnMD6 clnSM6 clnMI6 clnXS6"></div>
    <div class="clnLG6 clnMD6 clnSM6 clnMI6 clnXS6"></div>
</div>

Actually, In Jikan you can use offsets. How to use a offset class? So first you write .cln, Then you media query like SM, For defining offset, Write offset after that and finally write the number of grids you want to make offset like 4. For example :
<div class="clnLG6"></div>
<div class="clnLG4 clnLGOffset2"></div>

Headings


<h1>Jikan Framework</h1>
<h2>Jikan Framework</h2>
<h3>Jikan Framework</h3>
<h4>Jikan Framework</h4>
<h5>Jikan Framework</h5>
<h6>Jikan Framework</h6>

Jikan Framework

Jikan Framework

Jikan Framework

Jikan Framework

Jikan Framework
Jikan Framework

Paragraph


<p>
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.
</p>

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.

Preformatted Text


<a href="#" class="lnk">Link To An Address !</a>
Use Mark Tag To <mark>Highlight</mark> Text.
<del>This Is A Deleted Text.</del>
<s>Not Accurate Text.</s>
<ins>It Is An Addition To Document.</ins>
<u>Underlined Text.</u>
<small>This Is A Small Text.</small>
<strong>This Is A Bold Text.</strong>
<em>This Line Rendered As Italicized Text.</em>
<abbr title="Lorem Ipsum">This Is An Abbreviation.</abbr>
<cite>It's Cite.</cite>
<blockquote>
    Don't Waste The Water Even You Are Near A River.
    <div class="bkqCaption">Prophet Muhammed (PBUH)</div>
</blockquote>
You Can Use Code Tag To <code>Code</code> Text.
<pre>This Is Pre Tag.</pre>
Link To An Address !

Use Mark Tag To Highlight Text.

This Is A Deleted Text.

Not Accurate Text.

It Is An Addition To Document.

Underlined Text.

This Is A Small Text.

This Is A Bold Text.

This Line Rendered As Italicized Text.

This Is An Abbreviation.

It's Cite.

Don't Waste The Water Even You Are Near A River.
Prophet Muhammed (PBUH)


You Can Use Code Tag To Code Text.

This Is Pre Tag.

Buttons


Simple Buttons

<button class="btn btnPrimary">Jikan</button>
<button class="btn btnSecondary">Jikan</button>
<button class="btn btnSuccess">Jikan</button>
<button class="btn btnDanger">Jikan</button>
<button class="btn btnWarning">Jikan</button>
<button class="btn btnInfo">Jikan</button>

<button class="btn btnPrimary btnBordered">Jikan</button>
<button class="btn btnSecondary btnBordered">Jikan</button>
<button class="btn btnSuccess btnBordered">Jikan</button>
<button class="btn btnDanger btnBordered">Jikan</button>
<button class="btn btnWarning btnBordered">Jikan</button>
<button class="btn btnInfo btnBordered">Jikan</button>



Outline Buttons

<button class="btn btnPrimary btnOutline">Jikan</button>
<button class="btn btnSecondary btnOutline">Jikan</button>
<button class="btn btnSuccess btnOutline">Jikan</button>
<button class="btn btnDanger btnOutline">Jikan</button>
<button class="btn btnWarning btnOutline">Jikan</button>
<button class="btn btnInfo btnOutline">Jikan</button>

<button class="btn btnPrimary btnOutline btnBordered">Jikan</button>
<button class="btn btnSecondary btnOutline btnBordered">Jikan</button>
<button class="btn btnSuccess btnOutline btnBordered">Jikan</button>
<button class="btn btnDanger btnOutline btnBordered">Jikan</button>
<button class="btn btnWarning btnOutline btnBordered">Jikan</button>
<button class="btn btnInfo btnOutline btnBordered">Jikan</button>



Other Buttons

<button class="btn btnPrimary btnLong">Jikan</button>

<button class="btn btnPrimary btnLarge">Jikan</button>
<button class="btn btnPrimary btnSmall">Jikan</button>

<button class="btn btnPrimary btnBlock">Jikan Framework</button>

<button class="btn btnInfo" disabled>Jikan</button>

<button class="btn btnInfo btnActive">Jikan</button>

<button class="btn btnDanger btnRotateLeft">Jikan Framework</button>
<button class="btn btnDanger btnRotateRight">Jikan Framework</button>


















Images


<figure class="dspInlineBlock">
    <img src="Images/JikanTestImage.png" alt="Windows" class="imgResponsive imgTest">
    <figcaption>Caption For Image</figcaption>
</figure>

<img src="Images/JikanTestImage.png" alt="Jikan Logo" class="imgResponsive imgThumbnail">

<img src="Images/JikanTestImage.png" alt="Jikan Logo" class="imgResponsive imgThumbnail imgRounded">
<img src="Images/JikanTestImage.png" alt="Jikan Logo" class="imgResponsive imgThumbnail imgRounded imgCenter">
Windows
Caption For Image

Jikan Logo
Jikan Logo Jikan Logo

Tables


Default Table

<div class="tblResponsive">
    <table class="tbl">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@None</td>
            </tr>
        </tbody>
    </table>
</div>
# First Name Last Name Username
1 Mark Otto @None
2 Jacob Thornton @None
3 Larry The Bird @None

Stripped Table

<div class="tblResponsive">
    <table class="tbl tblStriped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@None</td>
            </tr>
        </tbody>
    </table>
</div>
# First Name Last Name Username
1 Mark Otto @None
2 Jacob Thornton @None
3 Larry The Bird @None

Hover Table

<div class="tblResponsive">
    <table class="tbl tblStriped tblHover">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@None</td>
            </tr>
        </tbody>
    </table>
</div>
# First Name Last Name Username
1 Mark Otto @None
2 Jacob Thornton @None
3 Larry The Bird @None

Bordered Table

<div class="tblResponsive">
    <table class="tbl tblStriped tblHover tblBordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@None</td>
            </tr>
        </tbody>
    </table>
</div>
# First Name Last Name Username
1 Mark Otto @None
2 Jacob Thornton @None
3 Larry The Bird @None

Small Table

<div class="tblResponsive">
    <table class="tbl tblStriped tblHover tblBordered tblSmall">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@None</td>
            </tr>
        </tbody>
    </table>
</div>
# First Name Last Name Username
1 Mark Otto @None
2 Jacob Thornton @None
3 Larry The Bird @None

No Border Table

<div class="tblResponsive">
    <table class="tbl tblHover tblNoBorder">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@None</td>
            </tr>
        </tbody>
    </table>
</div>
# First Name Last Name Username
1 Mark Otto @None
2 Jacob Thornton @None
3 Larry The Bird @None

Responsive Table & Caption

<div class="tblResponsive">
    <table class="tbl tblHover">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@None</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>The Bird</td>
                <td>@None</td>
            </tr>
        </tbody>
    </table>
    <div class="tblCaption">My Caption For Table</div>
</div>
# First Name Last Name Username
1 Mark Otto @None
2 Jacob Thornton @None
3 Larry The Bird @None
My Caption For Table

Breadcrumb


<ul class="bcu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Product</a></li>
    <li>Mac Book Pro</li>
</ul>

Slider


<div class="sld">
    <div class="sldItem">
        <img src="Images/Slider-1.jpg" alt="Slider - 1">
        <div class="sldText CenterBottom">My First Caption ...</div>
    </div>
    <div class="sldItem">
        <img src="Images/Slider-2.jpg" alt="Slider - 2">
        <div class="sldText CenterTop">My Second Caption ...</div>
    </div>
    <div class="sldItem">
        <img src="Images/Slider-3.jpg" alt="Slider - 3">
        <div class="sldText CenterCenter">My Third Caption ...</div>
    </div>

    <div class="sldPre" onclick="changeSlide(-1)">&#10094;</div>
    <div class="sldNext" onclick="changeSlide(1)">&#10095;</div>
</div>
<div class="sldDot">
    <span onclick="currentSlide(1)"></span>
    <span onclick="currentSlide(2)"></span>
    <span onclick="currentSlide(3)"></span>
</div>

By adding .sldFullScreen class, You will have a full screen slider.
Note : Put .sldDot element & children inside .sld element for full screen slider.
Also you can use .LeftTop, .LeftCenter, .LeftBottom, .CenterTop, .CenterCenter, .CenterBottom, .RightTop, .RightCenter & .RightBottom.
Slider - 1
My First Caption ...
Slider - 2
My Second Caption ...
Slider - 3
My Third Caption ...

Navbar


<div class="nav">
    <div class="navToggle" onclick="toggleNavbar('Navbar')"></div>
    <ul id="Navbar">
        <li class="navActive"><a href="#"><span class="fa fa-home"></span> Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Advertisements</a></li>
        <li><a href="#">Shopping</a></li>
    </ul>
</div>

You can use .navFixedTop or .navFixedBottom for fixed positions.

Lists


Simple List

<ul class="lst">
    <li><a href="#">Lorem Ipsum</a></li>
    <li>Lorem Ipsum
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact
                <ul>
                    <li>Lorem Ipsum</li>
                    <li>Lorem Ipsum</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
</ul>
  • Lorem Ipsum
  • Lorem Ipsum
    • Home
    • About
    • Contact
      • Lorem Ipsum
      • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

List Group

<ul class="lstGroup">
    <li class="lstActive">Home</li>
    <li>Messages<span class="lstBadge">23</span></li>
    <li class="lstDisabled">Disabled</li>
    <li class="lstHover">Lorem Ipsum</li>
    <a href="#">Log Out</a>
</ul>
  • Home
  • Messages23
  • Disabled
  • Lorem Ipsum
  • Log Out

Paginations


<ul class="pgt">
    <li class="pgtActive"><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
</ul>

<ul class="pgt pgtSmall">
    <li><a href="#">Previous</a></li>
    <li class="pgtActive"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
</ul>

<ul class="pgt pgtLarge">
    <li class="pgtDisabled">Previous</li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="pgtActive"><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
</ul>

ToolTips


Top ToolTip I'm A Top ToolTip ...
Bottom ToolTip I'm A Bottom ToolTip ...
Right ToolTip I'm A Right ToolTip ...
Left ToolTip I'm A Left ToolTip ...
<div class="tlp tlpTop">
    Top ToolTip
    <span>I'm A Top ToolTip ...</span>
</div>

Instead of .tlpTop, You can use .tlpLeft, .tlpRight and .tlpBottom for different positions.

Jumbotron


<div class="jmb">
    <div class="jmbTitle">
        Hello World !
    </div>
    <hr class="jmbLine">
    <p class="jmbText">
        Lorem ipsum dolor sit amet, consectetuer adipiscing ...
    </p>
</div>
Hello World !

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 ...

Modal


<button onclick="openModal('Modal')" class="btn btnPrimary">Open Modal</button>

<div id="Modal" class="mdl">
    <div class="mdlHeader">
        <span class="mdlClose" onclick="closeModal('Modal')">Close</span>
        Header
    </div>
    <div class="mdlBody">
        Lorem ipsum dolor sit amet, consectetuer adipiscing ...
    </div>
    <div class="mdlFooter">
        Footer
    </div>
</div>

Menu


<ul class="mnu">
    <div class="algCenter">
        <img src="Images/JikanTestImage.png" alt="Avatar" class="mnuAvatar">
    </div>
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
</ul>

You can use .mnuFixedLeft and .mnuFixedRight to make your menu to have fixed positions in left or right.

Tabs


<div class="tab">
    <ul>
        <li onclick="openTab(event, 'First')" class="tabActive" id="defaultTabOpen">#1 Tab</li>
        <li onclick="openTab(event, 'Second')">#2 Tab</li>
        <li onclick="openTab(event, 'Third')">#3 Tab</li>
        <li class="tabDisabled">Disabled</li>
    </ul>
    <div class="tabContainer">
        <div id="First">Let's Talk About Jikan CSS Framework.</div>
        <div id="Second">Let's Talk About Jikan CSS Framework.</div>
        <div id="Third">Let's Talk About Jikan CSS Framework.</div>
    </div>
</div>
  • #1 Tab
  • #2 Tab
  • #3 Tab
  • Disabled
Let's Talk About Jikan CSS Framework.
Let's Talk About Jikan CSS Framework.
Let's Talk About Jikan CSS Framework.

Icon Menus


Horizontal Icon Menu

<div class="icnMenuHorizontal">
    <a href="#" class="icnMenuActive">
        <span class="fa fa-home"></span>
        <span class="icnMenuText">Home</span>
    </a>
    <a href="#">
        <span class="fa fa-podcast"></span>
        <span class="icnMenuText">PodCast</span>
    </a>
    <a href="#">
        <span class="fa fa-paypal"></span>
        <span class="icnMenuText">PayPal</span>
    </a>
    <a href="#">
        <span class="fa fa-cloud"></span>
        <span class="icnMenuText">Cloud</span>
    </a>
    <a href="#">
        <span class="fa fa-maxcdn"></span>
        <span class="icnMenuText">MaxCDN</span>
    </a>
</div>

Vertical Icon Menu

<div class="icnMenuVertical">
    <a href="#" class="icnMenuActive">
        <span class="fa fa-home"></span>
        <span class="icnMenuText">Home</span>
    </a>
    <a href="#">
        <span class="fa fa-podcast"></span>
        <span class="icnMenuText">PodCast</span>
    </a>
    <a href="#">
        <span class="fa fa-paypal"></span>
        <span class="icnMenuText">PayPal</span>
    </a>
    <a href="#">
        <span class="fa fa-cloud"></span>
        <span class="icnMenuText">Cloud</span>
    </a>
    <a href="#">
        <span class="fa fa-maxcdn"></span>
        <span class="icnMenuText">MaxCDN</span>
    </a>
</div>

You can add .icnMenuVerticalFixedLeft or icnMenuVerticalFixedRight to give your vertical icon menu fixed position in left or right side with the height that is equal to window page, Default It has height: auto; & It depends on parent element like column classes.

Progress Bars


<div class="prg">
    <div class="prgBar prgPrimary">40%</div>
</div>
<div class="prg">
    <div class="prgBar prgSecondary">40%</div>
</div>
<div class="prg">
    <div class="prgBar prgSuccess">40%</div>
</div>
<div class="prg">
    <div class="prgBar prgDanger">40%</div>
</div>
<div class="prg">
    <div class="prgBar prgWarning">40%</div>
</div>
<div class="prg">
    <div class="prgBar prgInfo">40%</div>
</div>
40%
40%
40%
40%
40%
40%

Loaders


<div class="ldr ldrPrimary ldrAnimation dspInlineBlock"></div>
<div class="ldr ldrSmall ldrSecondary dspInlineBlock"></div>
<div class="ldr ldrLarge ldrSuccess dspInlineBlock"></div>
<div class="ldr ldrDanger dspInlineBlock"></div>
<div class="ldr ldrWarning dspInlineBlock"></div>
<div class="ldr ldrInfo dspInlineBlock"></div>

Alerts


<div class="alt altPrimary">
    This Is An Alert & A <a href="#">Link</a>.
</div>
<div class="alt altSecondary">
    This Is An Alert & A <a href="#">Link</a>.
</div>
<div class="alt altSuccess">
    This Is An Alert & A <a href="#">Link</a>.
</div>
<div class="alt altDanger">
    This Is An Alert & A <a href="#">Link</a>.
</div>
<div class="alt altWarning">
    This Is An Alert & A <a href="#">Link</a>.
</div>
<div class="alt altInfo">
    This Is An Alert & A <a href="#">Link</a>.
</div>
This Is An Alert & A Link.
This Is An Alert & A Link.
This Is An Alert & A Link.
This Is An Alert & A Link.
This Is An Alert & A Link.
This Is An Alert & A Link.

Panels


<div class="pnl pnlPrimary">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlSecondary">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlSuccess">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlDanger">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlWarning">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ...
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlInfo">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed ...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>
Header
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.
Footer
Header
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.
Footer
Header
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.
Footer
Header
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.
Footer
Header
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.
Footer
Header
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.
Footer

Button Groups


Horizontal Buttons

<div class="btnHorizontalGroup btnHorizontalJustify">
    <div><button class="btn btnPrimary">Jikan Framework</button></div>
    <div><button class="btn btnPrimary">Jikan Framework</button></div>
    <div><button class="btn btnPrimary">Jikan Framework</button></div>
</div>

<div class="btnHorizontalGroup btnGroupSmall">
    <button class="btn btnInfo">Jikan Framework</button>
    <button class="btn btnInfo">Jikan Framework</button>
    <button class="btn btnInfo">Jikan Framework</button>
</div>

<div class="btnHorizontalGroup">
    <button class="btn btnDanger">Jikan Framework</button>
    <button class="btn btnDanger">Jikan Framework</button>
    <button class="btn btnDanger">Jikan Framework</button>
</div>

<div class="btnHorizontalGroup btnGroupLarge">
    <button class="btn btnSuccess">Jikan Framework</button>
    <button class="btn btnSuccess">Jikan Framework</button>
    <button class="btn btnSuccess">Jikan Framework</button>
</div>




Horizontal Buttons

<div class="btnVerticalGroup btnVerticalBlock">
    <button class="btn btnPrimary">Jikan Framework</button>
    <button class="btn btnPrimary">Jikan Framework</button>
    <button class="btn btnPrimary">Jikan Framework</button>
</div>

<div class="btnVerticalGroup btnGroupSmall">
    <button class="btn btnInfo">Jikan Framework</button>
    <button class="btn btnInfo">Jikan Framework</button>
    <button class="btn btnInfo">Jikan Framework</button>
</div>

<div class="btnVerticalGroup btnGroup">
    <button class="btn btnDanger">Jikan Framework</button>
    <button class="btn btnDanger">Jikan Framework</button>
    <button class="btn btnDanger">Jikan Framework</button>
</div>

<div class="btnVerticalGroup btnGroupLarge">
    <button class="btn btnSuccess">Jikan Framework</button>
    <button class="btn btnSuccess">Jikan Framework</button>
    <button class="btn btnSuccess">Jikan Framework</button>
</div>



Forms


Text Inputs

<div class="frmGroup">
    <label for="Text">Please Enter Your Name :</label>
    <input type="text" id="Text" class="frmSmall">
</div>
<div class="frmGroup">
    <input type="text" id="Text">
</div>
<div class="frmGroup">
    <input type="text" id="Text" class="frmLarge">
    <div class="frmCaption">Please Use Only Characters ...</div>
</div>

<div class="frmGroup">
    <input type="text" id="Text" value="Jikan Framework ..." readonly>
</div>
<div class="frmGroup">
    <input type="text" id="Text" value="Jikan Framework ..." disabled>
</div>

<div class="frmGroup frmSuccess">
    <input type="text" id="Text">
    <div class="frmCaption">Please Use Only Characters ...</div>
</div>
<div class="frmGroup frmWarning">
    <input type="text" id="Text">
    <div class="frmCaption">Please Use Only Characters ...</div>
</div>
<div class="frmGroup frmDanger">
    <input type="text" id="Text">
    <div class="frmCaption">Please Use Only Characters ...</div>
</div>

<div class="frmCaptcha">
    <div class="frmCaptchaImg"><img src="Images/Captcha.png"></div>
    <div class="frmCaptchaArea"><input type="text"></div>
</div>
Please Use Only Characters ...


Please Use Only Characters ...
Please Use Only Characters ...
Please Use Only Characters ...


Select, Option Tags

<div class="frmGroup">
    <label for="SelectBox">Please Select A Name :</label>
    <select id="SelectBox" class="frmSmall">
        <option>John Doe</option>
        <option>Jane Doe</option>
        <option>John Roe</option>
        <option>Jane Roe</option>
    </select>
</div>
<div class="frmGroup">
    <select id="SelectBox">
        <option>John Doe</option>
        <option>Jane Doe</option>
        <option>John Roe</option>
        <option>Jane Roe</option>
    </select>
</div>
<div class="frmGroup">
    <select id="SelectBox" class="frmLarge">
        <option>John Doe</option>
        <option>Jane Doe</option>
        <option>John Roe</option>
        <option>Jane Roe</option>
    </select>
</div>

<div class="frmGroup">
    <select id="SelectBox" disabled>
        <option>John Doe</option>
        <option>Jane Doe</option>
        <option>John Roe</option>
        <option>Jane Roe</option>
    </select>
</div>

<div class="frmGroup frmSelect">
    <span></span>
    <select id="SelectBox">
        <option>John Doe</option>
        <option>Jane Doe</option>
        <option>John Roe</option>
        <option>Jane Roe</option>
    </select>
</div>

<div class="frmGroup">
    <label for="SelectBox">Please Select A Name :</label>
    <select multiple id="SelectBox">
        <option>John Doe</option>
        <option>Jane Doe</option>
        <option>John Roe</option>
        <option>Jane Roe</option>
    </select>
</div>




Textarea

<div class="frmGroup">
    <label for="TextArea">Please Type Something :</label>
    <textarea id="TextArea"></textarea>
</div>

<div class="frmGroup">
    <textarea id="TextArea" class="noResize" disabled>Disabled ...</textarea>
</div>
<div class="frmGroup">
    <textarea id="TextArea" class="noResize" readonly>Read-Only ...</textarea>
</div>


File Inputs

<div class="frmGroup">
    <label for="TextArea">Please Select A File :</label>
    <input type="file" disabled>
</div>

<div class="frmGroup">
    <div class="frmFile">
        <span>Upload</span>
        <input type="file">
    </div>
</div>
<div class="frmGroup">
    <div class="frmFile">
        <span class="fa fa-cloud"></span>
        <input type="file">
    </div>
</div>

Upload

CheckBoxes & Radios

<div class="frmGroup frmInline">
    <input type="checkbox" id="CheckBox1">
    <label for="CheckBox1">Remember Me !</label>
</div>
<div class="frmGroup frmInline">
    <input type="radio" id="Radio1">
    <label for="Radio1">Yes Or Not ?</label>
</div>
<div class="frmGroup">
    <input type="checkbox" id="CheckBox2" disabled>
    <label for="CheckBox2">Disabled ...</label>
</div>
<div class="frmGroup">
    <input type="radio" id="Radio2" disabled>
    <label for="Radio2">Disabled ...</label>
</div>

<label class="frmGroup frmCheckBox">Remember Me !
    <input type="checkbox" checked="checked">
    <span class="frmCheckMark"></span>
</label>
<label class="frmGroup frmRadio">Yes Or Not ?
    <input type="radio">
    <span class="frmCheckMark"></span>
</label>
<label class="frmGroup frmCheckBox">Disabled ...
    <input type="checkbox" checked="checked" disabled>
    <span class="frmCheckMark"></span>
</label>
<label class="frmGroup frmRadio">Disabled ...
    <input type="radio" disabled>
    <span class="frmCheckMark"></span>
</label>

Arrangement


Jikan has provided some classes in order to help you to arrange your elements easily.
<p class="algRight">This Is A Right Alignment Text.</p>
<p class="algLeft">This Is A Left Alignment Text.</p>
<p class="algCenter">This Is A Center Alignment Text.</p>
<p class="algJustify">This Is A Justify Alignment Text.</p>

<div class="dirRTL">This Is A RTL Direction Text.</div>
<div class="dirLTR">This Is A LTR Direction Text.</div>
<div class="fltRight">This Is A Float Right Text.</div>
<div class="fltLeft">This Is A Float Left Text.</div>

<div class="dspBlock">This Is A Block Display Text.</div>
<div class="dspInline">This Is A Inline Display Text.</div>
<div class="dspInlineBlock">This Is A Inline-Block Display Text.</div>

<div class="vsbShow">This Is A Visibile Text.</div>
<div class="vsbHidden">This Is A Invisible Alignment Text.</div>

<div class="mrgAuto">This Is A Margin Left & Right Auto Text.</div>

Fonts


We have added "Sahel" font in "Regular" & "Bold" For Persian & "Robot" font in "Light", "Regular" & "Bold" versions for Latin alphabet languages to have a better view.
"Sahel" font has been designed by "Saber RastiKerdar" with "OFL" license which says you can use the font for personal or commercial use. "Robot" font has been designed by "Christian Robertson" with "Apache" license.

Helpers


Jikan has some classes called "Helpers" which used to "Show" or "Hide" an element or a specefic class or ID.
Use this rule :
<div class="XSBlock">Will Be Block In That Resolution.</div>
<div class="XSInline">Will Be Inline In That Resolution.</div>
<div class="XSInlineBlock">Will Be Inline-Block In That Resolution.</div>
<div class="XSNone">Will Be Shown In That Resolution.</div>
<div class="XSVisible">Will Be Visible In That Resolution.</div>
<div class="XSInvisible">Will Be Invisible In That Resolution.</div>

Just use (LG,MD,SM,MI,XS) instead of "XS" above.
Fortunately we have not forgotten "Print" view. Use can use these :
<div class="prtBlock">Will Be Block In Print View.</div>
<div class="prtInline">Will Be Inline In Print View.</div>
<div class="prtInlineBlock">Will Be Inline-Block In Print View.</div>
<div class="prtInlineBlock">Will Not Be Shown In Print View.</div>
<div class="prtInlineBlock">Will Be Visible In Print View.</div>
<div class="prtInlineBlock">Will Be Invisible In Print View.</div>

Icon Fonts


Finally, We have added "FontAwesome" for icon fonts, You can use them to beautify your pages.
For more detail, Please visit this site : FontAwesome.io

home

times

podcast

bug

check

code-fork

eyedropper

eye

flag

heart

globe

image

music

paper-plane

rocket

truck

tint

thumbs-up

thumbs-down

user

plane

file

paypal

bar-chart

bitcoin


<span class="fa fa-IconName"></span>