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">
Class Name | Size |
---|---|
LG | > 87.5rem |
MD | 64rem To 87.5rem |
SM | 45rem To 64rem |
MI | 25rem To 45rem |
XS | < 25rem |
.ctr
class.
<div class="ctr"></div>
.row
for defining a row. Then, you can put how many grids do you want in a row.
.cln
and after that, you put media query size like LG
and then number of the columns wants to occupy like 6
.
<div class="row">
<div class="clnLG6 clnMD6 clnSM6 clnMI6 clnXS6"></div>
<div class="clnLG6 clnMD6 clnSM6 clnMI6 clnXS6"></div>
</div>
Offset
. For example:
<div class="clnLG6"></div>
<div class="clnLG4 clnLGOffset2"></div>
<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>
<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.
<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>
Don't Waste The Water Even You Are Near A River.Prophet Muhammed (PBUH)
Code
Text.
This Is Pre Tag.
<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>
<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>
<button class="btn btnPrimary btnBlock">Jikan Framework</button>
<button class="btn btnInfo" disabled>Jikan</button>
<button class="btn btnInfo btnActive">Jikan</button>
<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">
<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 |
<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 |
<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 |
<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 |
<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 |
<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 |
<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 |
<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>
<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)">❮</div>
<div class="sldNext" onclick="changeSlide(1)">❯</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.
<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.
<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>
<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>
<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>
<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.
<div class="jmb">
<div class="jmbTitle">
Hello World !
</div>
<hr class="jmbLine">
<p class="jmbText">
Lorem ipsum dolor sit amet, consectetuer adipiscing ...
</p>
</div>
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 ...
<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>
<ul class="mnu">
<img src="Jikan.jpg" alt="Avatar" class="mnuAvatar">
<li class="mnuActive"><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
for fixed positions in top and bottom of the page.
<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>
<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.
<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.
<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>
<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>
<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>
<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>
<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>
<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.
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>