CORE
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
.jtbEmph is a class that helps to make a text emphasised.
This text has an emphasised item.
Copy
<p>This text has an <b class='jtbEmph'>emphasised</b> item.</p>
<code>
Using <code> tag with class jtbCode class makes the code more understandable.
Make this code <code> as code
Copy
<p>Make this code <code class='jtbCode'><code></code> as code</p>
.jtbImg
.jtbImg is a class that gives the desired image an uniqe style.
There are also 3 different modes .jtbImg | .jtbImgCircle | .jtbImgRounded
Copy
<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.