Classes that empower you to effortlessly change the display property of elements, enabling flexible and responsive layouts in your web projects.
Display utilities of JTB_MD is a class group designed to update the display values of elements. With its customizable and responsive structure, it aims to fulfill all the display requirements for your projects through simple class assignments.
In JTB_MD, the assigned classbase for all display classes is .jtbD
.
display
attribute.
To assign any element a display attribute, you can simply add related JTB_MD class into it:
.jtbD-[ inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial,inherit ]
This item has "inline" as display value.
<!-- display:inline example -->
<p class='jtbD-inline'>...</p>
You can make your element's display value change basing on screen sizes 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:
Part of group | Responsiveness | Example class |
---|---|---|
All classes | Active | .jtbD-inline-xxl |
Copyright © 2024 JTBLabs - All rights reserved.