Oracle JET Flex, Grid, Form, and Responsive Helper Class Naming Convention

The Oracle JET flex, form, grid, and responsive style classes use the same naming convention which can help you identify the style size, function, and number of columns the class represents.

Each class follows the same format as shown below:

oj-size-function-[1-12]columns

Size can be one of sm, md, lg, xl, and print and are based on the media queries described in Media Queries. Oracle JET will apply the style to the size specified and any larger sizes unless function is defined as only. For example:

  • oj-lg-hide hides content on large and extra-large screens.

  • oj-md-only-hide hides content on medium screens. The style has no effect on other screen sizes.

You can find a summary of the classes available to you for responsive design in Oracle JET in the Oracle® JavaScript Extension Toolkit (JET) Styling Reference.