RESPONSIVENESS

Even the JTB_MD flex system allows its users to make their layout with no effort, there are several touch up options available too for making the design more powerful in all devices.

Break points & screen types

JTB_MD handles the screens in four different categories:

Extra small screens Small screens Medium screens Large screens
Breaker _xs _sm _md _lg
Scales (Width) <768px ≥768px & <992px ≥992px & <1200px ≥1200px

One-for-all

If you do not use the screen breakers in your classes while creating flex layout; the layout will be applied in all types of screen. With this possibility, JTB_MD allows you to create projects easy and powerful.

			Copy
			<!-- Makes your div flex in all devices -->
<div class='jtbFlex'>...</div>
		

Using break points

If making a design which is same in all devices & screens not enough for you, and need to create much more specialized, powerful designs; you can simply call all the flex classes (you have learned on previous parts) with the desired screen break core. (Format: class + _breaker => class_breaker)

			Copy
			<!-- As an example this class makes the div flex only in extra small screen devices -->
<div class='jtbFlex_xs'>...</div>