Sizing

Adjust the widths and heights of elements effortlessly to achieve the perfect layout for your project.

About

The Sizing utilities class group is designed to streamline the adjustment of element sizes. With its customizable and responsive structure, it aims to fulfill all your additional sizing needs in projects through simple class assignments.

In JTB_MD, there are two fundamental approaches for adjusting element dimensions:

• Relative to viewport, which allows users to define the size of an element relative to viewport, uses .jtbW and .jtbH classbases for width and height adjustments respectively,
• Relative to parent, which allows users to define the size of an element relative to its parent element, uses .jtbWV and .jtbHV classbases for width and height adjustments respectively

Core Usage

To adjust the heights and widths of elements in your project relative to their parents, you can use the following utility classes of JTB_MD:

.jtbH-[ 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 ]

.jtbW-[ 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 ]

                            <!-- 55% width -->
<div class='jtbW-55'>...</div>

<!-- 55% height -->
<div class='jtbH-55'>...</div>
                        

                                <!-- Unset width -->
<div class='jtbW-unset' style='width:10%;'></div>
                            

Responsiveness

You can make your elements' sizes change basing on screen dimentions of clients. Activate this utility by adding the corresponding screen breakpoint (defined in Breakpoints seciton) at the end of the class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers: