Styling: ResponsiveGrid

Oracle® JavaScript Extension Toolkit (JET)
9.0.0

F24343-01

Version:
  • 9.0.0
Responsive Grid Style classes.
.deprecated-col-default-width
Deprecated class meant to help transition to the current responsive grid
Deprecated:
Since Description
3.0.0 use the new responsive grid classes.

Category: Number of Columns by screen size

Set the number of grid columns, with a maximum of 12. Start by coding for small screens, then customize for larger screens as necessary. Here are some examples:
  • oj-sm-6 works on all screen sizes
  • oj-lg-3 works on large and extra-large screens. It has no effect on small and medium screens.
  • oj-sm-6 and oj-lg-3 on the same column will be 6 columns wide on small and medium screens and 3 columns wide on large and extra-large screens.
Note that grids use percentage widths, and margins cannot be counted in those widths (this is a limitation of CSS), so you cannot combine grid classes with margins. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Class template:

.oj-[size]-[1-12]

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 [1-12]

Value (required) Name Description
1 1 column 1 column wide
2 2 columns 2 columns wide
3 3 columns 3 columns wide
4 4 columns 4 columns wide
5 5 columns 5 columns wide
6 6 columns 6 columns wide
7 7 columns 7 columns wide
8 8 columns 8 columns wide
9 9 columns 9 columns wide
10 10 columns 10 columns wide
11 11 columns 11 columns wide
12 12 columns 12 columns wide

Example
<div class="oj-flex">
   <div class="oj-flex-item oj-sm-6 oj-md-9">col 1</div>
   <div class="oj-flex-item oj-sm-6 oj-md-3">col 2</div>
</div>

Category: Number of Columns in 4 column layout by screen size

Use in a 4-column layout. In this layout, you must use both the odd-cols class to control the width of odd-numbered columns and the even-cols class to control the width of the even columns. For example, setting oj-md-odd-cols-2 and oj-md-even-cols-4 on the flex parent has the effect of setting the first and third column widths to 2, and the second and fourth column widths to 4 on a medium and up screen. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Class template:

.oj-[size]-even-cols-[1-5]

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 [1-5]

Value (required) Name Description
1 1 column 1 column wide
2 2 columns 2 columns wide
3 3 columns 3 columns wide
4 4 columns 4 columns wide
5 5 columns 5 columns wide

Example
<div class="oj-md-odd-cols-2 oj-md-even-cols-4">
 <div class="oj-flex">
   <div class="oj-flex-item">col 1</div>
   <div class="oj-flex-item">col 2</div>
   <div class="oj-flex-item">col 3</div>
   <div class="oj-flex-item">col 4</div>
 </div>
</div>

Category: Number of Columns in 2 column layout by screen size

Use this in a 2-column layout. Instead of putting sizing classes on every child, you can put a single class on the flex parent. The number of columns specifies how many of the 12 columns the odd-numbered columns can use. In a 2-column layout, the even-numbered columns will take up the remainder of the columns. For example, setting oj-md-odd-cols-4 on the flex parent will have the effect of setting the odd column (col1) width to 4 and the even column (col2) width to 8 for all rows in the grid on a medium and up screen. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Class template:

.oj-[size]-odd-cols-[1-12]

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 [1-12]

Value (required) Name Description
1 1 column 1 column wide
2 2 columns 2 columns wide
3 3 columns 3 columns wide
4 4 columns 4 columns wide
5 5 columns 5 columns wide
6 6 columns 6 columns wide
7 7 columns 7 columns wide
8 8 columns 8 columns wide
9 9 columns 9 columns wide
10 10 columns 10 columns wide
11 11 columns 11 columns wide
12 12 columns 12 columns wide

Example
<div class="oj-md-odd-cols-4">
   <div class="oj-flex">
     <div class="oj-flex-item">col 1</div>
     <div class="oj-flex-item">col 2</div>
   </div>
</div>