Unveil the secrets of JTB_MD's breakpoints, your toolkit for responsive design mastery. Understand their codes, related pixels & screens, and unleash seamless adaptability for your projects!
JTB_MD Breakpoints tailor your web designs to different screen sizes effortlessly. These intuitive codes allow for responsive layouts, ensuring optimal display across various devices, from small screens to large ones, without compromising design integrity.
With the code coverage, these breakpoints can be used in all parts of the library as simple class affixes.
To use breakpoints in JTB_MD, there's no need for any extra steps. Simply append the code of breakpoint of the desired screen range to the end of the relevant class with a hyphen (-). This method works with all the classes defined in library.
To make things more clear, as an example, if you want to make your flex container aligns items as centered only in screens bigger than 1920px, you can add its code (xxl) into your alignment class .jtbF-align-center and append it to your item as .jtbF-align-center-xxl.
In this version of JTB_MD, there are 6 defined breakpoints available. Which are:
| Code | xs | sm | md | lg | xl | xxl |
| Screen size | >576px | >768px | >992px | >1200px | >1400px | >1920px |
As you can see in the table, to make the library codes more lightweight, all breakpoints are set to work on the specified screen size and above. This method allows the library to facilitate your development process by enabling you to think from small to large screens, with minimal class additions, making it easy to embrace all screen sizes effortlessly.
As an example example, if you want to use a vertical layout in your flex container on screens that are smaller than 1920px and a horizontal layout on screens are bigger than 1920px, you can easily achieve this by adding just two classes: .jtbF-column .jtbF-row-xxl.
Copyright © 2024 JTBLabs - All rights reserved.