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

Misc elements

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


.jtbEmph is a class that helps to make a text emphasised.

This text has an emphasised item.

			<p>This text has an <b class='jtbEmph'>emphasised</b> item.</p>


Using <code> tag with class jtbCode class makes the code more understandable.

Make this code <code> as code

			<p>Make this code <code class='jtbCode'>&lt;code&gt;</code> as code</p>


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

There are also 3 different modes .jtbImg | .jtbImgCircle | .jtbImgRounded

			<img class='jtbImg' src='...'>
<img class='jtbImgCircle' src='...'>
<img class='jtbImgRounded' src='...'>

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 height equals to its parent's height.

.jtb100Height: Makes the element's height equals to its parent's height.