We designed JTB_MD as a library that is usable in any cases. To do this, we override the general items inside the browsers to make them better-looking.
To prevent the design problems we changed some of the defaults of the browsers:
There are some miscellaneous classes that can be callable while designing with JTB_MD.
<code> tag with class jtbCode class makes the code more understandable with changing its
<code> as code
<!-- Highlighting '<code>' tag --> <p>Make this <code><code></code> as code</p>
.jtbImg is a class that gives the desired image an uniqe style.
There are 3 different modes of it:
<!-- Square Image --> <img class='jtbImg' src='...'> <!-- Circle Image --> <img class='jtbImgCircle' src='...'> <!-- Square Image With Rounded Corners --> <img class='jtbImgRounded' src='...'>
To create an item with hover effect, you can add
.hoverable class to it. With this option, when someone hovers or focuses the element, the element will be 0.2 less opaque and the cursor becomes pointer.
This text is not hoverable.
This text is hoverable.
<!-- Not Hoverable --> <p>This text is not hoverable.</p> <!-- Hoverable --> <p class='hoverable'>This text is hoverable.</p>
To resize the elements in design; there are several defined classes in JTB_MD.
.jtbFullPage: Makes the element's height and width equals to screen height and width.
.jtbFullWidth: Makes the element's width equals to screen width.
.jtbFullHeight: Makes the element's height equals to screen height.
.jtb100Width: Makes the element's width equals to its parent's height.
.jtb100Height: Makes the element's height equals to its parent's height.