Styling: Responsive Prefixes

In the jet sass files there are variables for responsive screen widths, these look something like

• $screenSmallRange: 0, 767px;
• $screenMediumRange: 768px, 1023px;
• $screenLargeRange: 1024px, 1280px;
• $screenXlargeRange: 1281px, null;

In this documentation you will see responsive classes that map to these ranges, these look like

1. oj-[size]-[xyz], where [size] can be sm, md, lg, xl, or print. The style applies to the screen width range specified and and wider screens. For example oj-md-hide hides content on medium, large, and extra-large width screens.
2. oj-[size]-only-[xyz], where [size] can be sm, md, lg, or print. The style applies only when the width of the screen is in the pecified range, for example oj-md-only-hide hides content when the width of the screen is in the medium range only. For xl just use the size class described above, for example oj-xl-hide.
3. oj-[size]-down-[xyz], where [size] can be md, lg, or print. The style applies to the screen width range specified and any smaller widths, for example oj-md-down-hide hides content on screens in the small and medium width range. For sm use the sm-only class described above, for example oj-sm-only-hide.