To prevent the design problems, we have done some css tricks in JTB_MD. Before going deep; you need to be aware of them too.

Normalizing design

  • The box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.
  • Font size is declared on the html, body elements as 12px + 0.2% of screen width.
  • Font family also added to the body, html tags as 'Roboto', sans-serif.
  • To avoid any visual problems, we've add background-color as jtbWhite to our body & html tags.
  • Device handling

    To lower the designing problems, we are strongly recommending to add following code, inside your head element. This allows to JTB_MD detect the device dimentions properly. (You can follow the starting template from Download > Basic template )

    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    Excluding icons

    JTB_MD has its own icon library. If you want to exclude it from your project; you can simply remove the @import 'jtb_icons.css' part in your jtb_md.css file.