Styling: Responsive Prefixes

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01


Version:
  • 7.1.0

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.