Styling: ResponsiveSpacing

Oracle® JavaScript Extension Toolkit (JET)
16.1.0
F92239-01

Version:
  • 16.1.0
Responsive Spacing Style classes

Category: margin with multiplier by screen size

Add some margin with a multiplier to an element based upon a certain screen size.
  • oj-sm-only* applies only to a small screen.
  • oj-md-only* applies only to a medium screen.
  • oj-lg-only* applies only to a large screen.
There is no oj-xl-only-*, use oj-xl-* instead.
In Redwood these classes use the !important rule.
Here are some examples:
  • oj-md-only-margin-2x: two unit of margin on all sides on a medium width screen.
  • oj-md-only-margin-4x-top: four units of margin on the top on on a medium width screen.
  • oj-lg-only-margin-1x-start: one unit of margin on the start side on a large width screen

Class template:

.oj-[size-only]-margin-[multiplier](-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size-only]

Value (required) Name Description
sm-only Small Small screen size range only
md-only Medium Medium screen size range only
lg-only Large Large screen size range only

Values for [multiplier]

Value (required) Name Description
0 0 zero(no) unit of spacing
1x 1x Single unit of spacing
2x 2x Two times the single unit of spacing
3x 3x Three times the single unit of spacing
4x 4x Four times the single unit of spacing
5x 5x Five times the 1x unit of spacing
6x 6x Six times the 1x unit of spacing
7x 7x Seven times the 1x unit of spacing
8x 8x Eight times the 1x unit of spacing
9x 9x Nine times the 1x unit of spacing
10x 10x Ten times the 1x unit of spacing
11x 11x Eleven times the 1x unit of spacing
12x 12x Tweleve times the 1x unit of spacing

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Example
<div class="oj-md-only-margin-2x-vertical oj-lg-only-margin-3x-vertical">
   <!-- content -->
</div>

Category: Padding with multiplier by screen size

Add some padding with a multiplier to an element based upon a certain screen size.
  • oj-sm-only* applies only to a small screen.
  • oj-md-only* applies only to a medium screen.
  • oj-lg-only* applies only to a large screen.
There is no oj-xl-only-*, use oj-xl-* instead.
In Redwood these classes use the !important rule.
Here are some examples:
  • oj-md-only-padding-2x: two unit of padding on all sides on a medium width screen.
  • oj-md-only-padding-4x-top: four units of padding on the top on on a medium width screen.
  • oj-lg-only-padding-1x-start: one unit of padding on the start sideon a large width screen

Class template:

.oj-[size-only]-padding-[multiplier](-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size-only]

Value (required) Name Description
sm-only Small Small screen size range only
md-only Medium Medium screen size range only
lg-only Large Large screen size range only

Values for [multiplier]

Value (required) Name Description
0 0 zero(no) unit of spacing
1x 1x Single unit of spacing
2x 2x Two times the single unit of spacing
3x 3x Three times the single unit of spacing
4x 4x Four times the single unit of spacing
5x 5x Five times the 1x unit of spacing
6x 6x Six times the 1x unit of spacing
7x 7x Seven times the 1x unit of spacing
8x 8x Eight times the 1x unit of spacing
9x 9x Nine times the 1x unit of spacing
10x 10x Ten times the 1x unit of spacing
11x 11x Eleven times the 1x unit of spacing
12x 12x Tweleve times the 1x unit of spacing

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Example
<div class="oj-md-only-padding-2x-vertical oj-lg-only-padding-3x-vertical">
   <!-- content -->
</div>

Category: margin with multiplier by minimum screen size

Add some margin with a multiplier to an element based upon a minimum screen size.
  • oj-sm-* applies to small width and up screens.
  • oj-md-* applies to medium width and up screens.
  • oj-lg-* applies to large width and up screens.
  • oj-xl-* applies to extra large screens only.
In Redwood these classes use the !important rule.
Here are some examples:
  • oj-md-margin-2x: two unit of margin on all sides on medium width and wider screens
  • oj-md-margin-4x-top: four units of margin on the top on medium width and wider screens
  • oj-lg-margin-1x-start: one unit of margin on the start side on large width and wider screens

Class template:

.oj-[size]-margin-[multiplier](-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for [multiplier]

Value (required) Name Description
0 0 zero(no) unit of spacing
1x 1x Single unit of spacing
2x 2x Two times the single unit of spacing
3x 3x Three times the single unit of spacing
4x 4x Four times the single unit of spacing
5x 5x Five times the 1x unit of spacing
6x 6x Six times the 1x unit of spacing
7x 7x Seven times the 1x unit of spacing
8x 8x Eight times the 1x unit of spacing
9x 9x Nine times the 1x unit of spacing
10x 10x Ten times the 1x unit of spacing
11x 11x Eleven times the 1x unit of spacing
12x 12x Tweleve times the 1x unit of spacing

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Example
<div class="oj-md-margin-2x-vertical oj-lg-margin-3x-vertical">
   <!-- content -->
</div>

Category: Padding with multiplier by minimum screen size

Add some padding with a multiplier to an element based upon a minimum screen size.
  • oj-sm-* applies to small width and up screens.
  • oj-md-* applies to medium width and up screens.
  • oj-lg-* applies to large width and up screens.
  • oj-xl-* applies to extra large screens only.
In Redwood these classes use the !important rule.
Here are some examples:
  • oj-md-padding-2x: two unit of padding on all sides on medium width and wider screens
  • oj-md-padding-4x-top: four units of padding on the top on medium width and wider screens
  • oj-lg-padding-1x-start: one unit of padding on the start side on large width and wider screens

Class template:

.oj-[size]-padding-[multiplier](-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for [multiplier]

Value (required) Name Description
0 0 zero(no) unit of spacing
1x 1x Single unit of spacing
2x 2x Two times the single unit of spacing
3x 3x Three times the single unit of spacing
4x 4x Four times the single unit of spacing
5x 5x Five times the 1x unit of spacing
6x 6x Six times the 1x unit of spacing
7x 7x Seven times the 1x unit of spacing
8x 8x Eight times the 1x unit of spacing
9x 9x Nine times the 1x unit of spacing
10x 10x Ten times the 1x unit of spacing
11x 11x Eleven times the 1x unit of spacing
12x 12x Tweleve times the 1x unit of spacing

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Example
<div class="oj-md-padding-2x-vertical oj-lg-padding-3x-vertical">
   <!-- content -->
</div>

Category: Margin

Add some margin

Class template:

.oj-margin(-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Category: Margin

Add some margin

Class template:

.oj-margin-lg(-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Category: Padding

Add some padding

Class template:

.oj-padding(-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Category: Padding

Add some padding

Class template:

.oj-padding-lg(-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges