Styling: Responsive Spacing

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.0

See Responsive Prefixes for information on what [size] means

[multiplier] is one of:
  • 1x: single unit of spacing
  • 2x: two times the 1x unit of spacing
  • 3x: three times the 1x unit of spacing
  • 4x: four times the 1x unit of spacing
[edge] is optional, if you leave it off the margin or padding applies in all four directions :
  • start: applies to start edge (left edge in ltr mode, right edge in rtl mode)
  • end: applies to end edge (right edge in ltr mode, left edge in rtl mode)
  • top: applies to top edge
  • bottom: applies to bottom edge
  • horizontal: applies to start and end edges
  • vertical: applies to top and and bottom edges
Class(es) Description Example Usage
oj-[size](-only)-padding-[multiplier](-[edge])
 add some padding to an element, here's some example class names
  1. oj-md-padding-2x: two unit of padding on all sides on medium width and wider screens
  2. oj-md-padding-4x-top: four units of padding on the top on medium width and wider screens
  3. oj-lg-only-padding-1x: one unit of padding on all sides, applies when the screen width is in the large range only
 
<div class="oj-md-padding-2x-vertical oj-lg-padding-3x-vertical">
  // content
</div>
oj-[size](-only)-margin-[multiplier](-[edge])
 add some margin to an element, here's some example class names
  1. oj-md-margin-2x: two unit of margin on all sides on medium width and wider screens
  2. oj-md-margin-4x-top: four units of margin on the top on medium width and wider screens
  3. oj-lg-only-margin-1x: one unit of margin on all sides, applies when the screen width is in the large range only
 
<div class="oj-panel oj-sm-margin-2x-horizontal oj-lg-margin-4x-horizontal">
  // content
</div>