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.

Page defaults

To prevent the design problems we changed some of the defaults of the browsers:

  • We've set box-sizing on every element—including *::before and *::after, to border-box.
  • We've set background color of body & html as jtbWhite.

Misc elements

There are some miscellaneous classes that can be callable while designing with JTB_MD.


Using <code> tag with class jtbCode class makes the code more understandable with changing its font-family to monospace and color to jtbRed.

Make this <code> as code

			<!-- Highlighting '<code>' tag -->
<p>Make this <code>&lt;code&gt;</code> as code</p>


.jtbImg is a class that gives the desired image an uniqe style.

There are 3 different modes of it: .jtbImg | .jtbImgCircle | .jtbImgRounded

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

Resizing classes

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.