Home Documents Blog

Foundations

Discover the essential settings and key configurations that lay the groundwork for JTB_MD.

About

To facilitate a smooth navigation and usage experience in JTB_MD, we've fine-tuned some settings as a ground work. These adjustments are designed to enhance usability, particularly in more complex scenarios. You can explore the core changes below for an enhanced and efficient experience with the library:

Page Defaults

  • The margins and paddings of all elements are set to zero by default.
  • The backgrounds of <html> and <body> tags are set to var(--jtbWhite-1).
  • The default font color of all elements is set to var(--jtbNeutral-12).
  • Base font size is set to 16px, with a default line height of 1.5.
  • The font-weight of all elements is set to 400.
  • All elements' font families initially set to Default group.
  • The outline of all elements is set as none!important.

In addition to these, for preventing the declared width of an element from being exceeded due to padding or border, we've set the box-sizing of every element, including :before and :after, as border-box.

Font-families

In JTB_MD, we distinguish between computer-based text and regular text by defining two distinct font-family groups.

Default Group

This is the default font-family group used by all elements. The basic structure of the group is as follows:

-apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji

Monospace Group

To differentiate computer-based outputs from regular text, we've introduced a new group called 'monospace' with the following value:

SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Copyright © 2024 JTBLabs - All rights reserved.