Jikan Documentation

This is Jikan documentation. It can be a tutorial for someone 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">

Grids

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.5rem
MD	64rem To 87.5rem
SM	45rem To 64rem
MI	25rem To 45rem
XS	< 25rem

Media Queries Sizes

If you want a distance between your layout and browser, you can use .ctr class.

<div class="ctr"></div>

You can put 12 grids 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 that, you put media query size like LG and then number of the columns wants to occupy like 6.

In the example below, I have created 2 grids in a row:

<div class="row">
    <div class="clnLG6 clnMD6 clnSM6 clnMI6 clnXS6"></div>
    <div class="clnLG6 clnMD6 clnSM6 clnMI6 clnXS6"></div>
</div>

You can use offsets. Just like columns but before the number, write Offset. For example:

<div class="clnLG6"></div>
<div class="clnLG4 clnLGOffset2"></div>

Headings

<h1>Jikan Framework <small>Test It Now!</small></h1>
<h2>Jikan Framework <small>Test It Now!</small></h2>
<h3>Jikan Framework <small>Test It Now!</small></h3>
<h4>Jikan Framework <small>Test It Now!</small></h4>
<h5>Jikan Framework <small>Test It Now!</small></h5>
<h6>Jikan Framework <small>Test It Now!</small></h6>

Jikan Framework Test It Now!

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 Texts

<a href="#" class="lnk">Link To An Address !</a>
Use Mark Tag To <mark>Highlight</mark> Text.
<del>This Is A Deleted Text.</del>
<span> class="txtMuted"This Is A Muted Text.</span>
<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.~~

This Is A Muted 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 btnBlock">Jikan Framework</button>

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

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

Images

<figure>
    <img src="Jikan.png" alt="Jikan Logo" class="imgResponsive">
    <figcaption>Caption For Image</figcaption>
</figure>

<img src="Jikan.png" alt="Jikan Logo" class="imgResponsive imgThumbnail">
<img src="Jikan.png" alt="Jikan Logo" class="imgResponsive imgThumbnail imgRounded">
<img src="Jikan.png" alt="Jikan Logo" class="imgResponsive imgThumbnail imgCircle">
<img src="Jikan.png" alt="Jikan Logo" class="imgResponsive imgThumbnail imgRounded imgCenter">

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>

Home
Category
Product
Mac Book Pro

Slider

<div class="sld">
    <div class="sldItem">
        <img src="Jikan.jpg" alt="Random Image">
        <div class="sldText centerBottom">Lorem Ipsum</div>
    </div>
    <div class="sldItem">
        <img src="Jikan.jpg" alt="Random Image">
        <div class="sldText leftTop">Lorem Ipsum</div>
    </div>
    <div class="sldItem">
        <img src="Jikan.jpg" alt="Random Image">
        <div class="sldText centerCenter">Lorem Ipsum</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>

You can use .LeftTop, .LeftCenter, .LeftBottom, .CenterTop, .CenterCenter, .CenterBottom, .RightTop, .RightCenter and .RightBottom for the text different positions.

Lorem Ipsum

❮

❯

Navbar

<div class="nav">
    <div class="navToggle" onclick="toggleNavbar('toggleNavbar')"></div>
    <ul id="toggleNavbar">
        <li class="navActive"><a href="#">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 and .navFixedBottom for fixed positions in top and bottom of the page.

List

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>
</ul>

Home
Messages23
Disabled
Lorem Ipsum

Pagination

<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="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>Finished</li>
</ul>

Previous
1
2
3
4
5
Finished

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>

You can use .tlpLeft, .tlpRight, .tlpTop 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 !

Modal

<button onclick="openModal('modal')" class="btn  btnInfo btnBordered">Open Modal</button>

<div id="modal" class="mdl">
    <div class="mdlHeader">
        <span class="mdlClose" onclick="closeModal('modal')">✖</span>
        Header
    </div>
    <div class="mdlBody">
        Lorem ipsum dolor sit amet consectetur ...
    </div>
    <div class="mdlFooter">
        Footer
    </div>
</div>

Tabs

<div class="tab">
    <ul>
        <li onclick="openTab(event, 'firstTab')" class="tabActive" id="defaultTabOpen">Tab 1</li>
        <li onclick="openTab(event, 'secondTab')">Tab 2</li>
        <li onclick="openTab(event, 'thirdTab')">Tab 3</li>
        <li class="tabDisabled">Disabled</li>
    </ul>
    <div class="tabContainer">
        <div id="firstTab">Lorem ipsum...</div>
        <div id="secondTab">Lorem ipsum...</div>
        <div id="thirdTab">Lorem ipsum...</div>
    </div>
</div>

Tab 1
Tab 2
Tab 3
Disabled

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit, commodi reiciendis officia ullam architecto, modi cupiditate neque mollitia ab ad accusantium temporibus optio quae ipsa repellat quas inventore voluptatibus fuga.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At esse facilis quis culpa neque repellat, recusandae aliquid illum ipsum fugiat quisquam tempore earum illo veniam nesciunt! Facilis repellat asperiores facere.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus a ab facere neque? Necessitatibus, optio alias repellat vero consequatur, rem doloribus officiis earum cupiditate, quae eveniet iusto. Aspernatur, dolorem?

Progress Bars

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

You can change width of .prgBar easily.

50%

Loaders

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

Use .ldrAnimation for animating the loaders.

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.

Panels

<div class="pnl pnlPrimary">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlSecondary">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlSuccess">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlDanger">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlWarning">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum...
    <div class="pnlFooter">
        Footer
    </div>
</div>

<div class="pnl pnlInfo">
    <div class="pnlHeader">
        Header
    </div>
    <div class="pnlBody">
        Lorem ipsum...
    </div>
    <div class="pnlFooter">
        Footer
    </div>
</div>

Header

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia voluptas aliquam, dignissimos blanditiis error voluptatem earum repellat natus ex illo unde consequuntur, sed perferendis mollitia libero obcaecati! Delectus, ea ducimus!

Footer

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia deleniti optio dolores adipisci assumenda ipsa cum omnis. Minus sequi ipsam, asperiores consectetur delectus laboriosam recusandae provident voluptates fugiat iure!

Footer

Header

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis, quisquam adipisci. Molestias eius voluptatum accusamus iusto labore obcaecati nostrum dolore deserunt non vel eligendi, fuga, saepe, reiciendis dolores pariatur praesentium.

Footer

Header

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit voluptatum quis itaque quo voluptatibus a? Magni laboriosam esse inventore quas corporis fugiat ab, rem eligendi hic, modi, tempore suscipit ipsa.

Footer

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quam dolor dicta repellendus provident cum at qui illo soluta eligendi quidem, perspiciatis, nemo maxime. Est illum accusamus soluta suscipit at?

Footer

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi natus eligendi laboriosam expedita magni animi vitae facilis, earum fugiat quibusdam exercitationem corrupti consequuntur aliquam assumenda ipsam voluptatibus voluptatem nobis beatae.

Footer

Form

Text Inputs

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

<div class="frmGroup">
    <input type="text" value="Read-Only" readonly>
</div>

<div class="frmGroup">
    <input type="text" value="Disabled" disabled>
</div>

<div class="frmGroup frmSuccess">
    <input type="text">
    <div class="frmCaption">Success</div>
</div>
<div class="frmGroup frmWarning">
    <input type="text">
    <div class="frmCaption">Warning</div>
</div>
<div class="frmGroup frmDanger">
    <input type="text">
    <div class="frmCaption">Danger</div>
</div>

Please Enter Your Name :

Please Use Only Characters.

Success

Warning

Danger

Textareas

<div class="frmGroup">
    <label for="textArea">Tell Me Your Opinion :</label>
    <textarea id="textArea"></textarea>
</div>

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

Tell Me Your Opinion :

Read-Only

Alignments

You can allign your elements easily.

<p class="algRight">Right Alignment</p>
<p class="algLeft">Left Alignment</p>
<p class="algCenter">Center Alignment</p>
<p class="algJustify">Justify Alignment</p>

<div class="dirRTL">RTL Direction</div>
<div class="dirLTR">LTR Direction</div>
<div class="fltRight">Float Right</div>
<div class="fltLeft">Float Left</div>

<div class="dspBlock">Block Display</div>
<div class="dspInline">Inline Display</div>
<div class="dspInlineBlock">Inline-Block Display</div>

<div class="vsbShow">Visibile</div>
<div class="vsbHidden">Invisible</div>

<div class="mrgAuto">Margin Left & Right Auto</div>

Helpers

You can use helpers to show or hide a specefic class or ID in different media queries.

<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 set (LG, MD, SM, MI, XS) instead of "XS" above.

For print media type, you 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>

Fonts

Jikan uses "Vazir".
It has been designed in 2015 by Saber Rastikerdar and agrees OFL terms.

Jikan Documentation

Grids

Headings

Jikan Framework Test It Now!

Jikan Framework Test It Now!

Jikan Framework Test It Now!

Jikan Framework Test It Now!

Jikan Framework Test It Now!

Jikan Framework Test It Now!

Paragraph

Preformatted Texts

Buttons

Simple Buttons

Outline Buttons

Other Buttons

Images

Tables

Default Table

Stripped Table

Hover Table

Bordered Table

Small Table

No Border Table

Responsive Table & Caption

Breadcrumb

Slider

Navbar

List

Simple List

List Group

Pagination

ToolTips

Jumbotron

Modal

Menu

Tabs

Progress Bars

Loaders

Alerts

Panels

Form

Text Inputs

Textareas

Alignments

Helpers

Fonts