Responsive web design describes a design concept that uses fluid grids, scalable images, and media queries to present alternative layouts conditionally based on the media type. With responsive web design, you can configure your application to be visually appealing on a wide range of devices, ranging from small phones to widescreen desktops.
Oracle JET provides a 12-column grid system and form layout classes that include styles for small, medium, large, and extra large screens or devices. The grid system and form classes use media queries to set the style based on the size of the screen or device, and you can use them to customize your page layout based on your users' needs.
In addition, media queries form the basis for responsive helper classes that show or hide content, align text, or float content based on screen size. They are also the basis for responsive JavaScript that loads content conditionally or sets a component's option based on screen size.
The Oracle JET form, grid, and responsive style classes use the same naming convention that helps identify which style size, function, and number of columns the class represents:
oj-size-function-numberofcolumns
When you use the style classes in your responsive application, apply the classes for small screens first, and then customize for larger screens as needed. The following list shows some examples.
oj-sm-6 applies to all screen sizes.
oj-lg-3 applies to large and extra large screens. The style has no effect on medium or small screens.
oj-sm-6 and oj-lg-3 placed on the same column will be 6 columns wide on small and medium screens and 3 columns wide on large and extra large screens.
Oracle JET also provides style classes that apply to only one screen size. These style classes use the naming convention: oj-size-only-function. For example, the oj-md-only-hide class hides content only at the medium screen size.
You can find a summary of the classes available to you for responsive design in Oracle JET in the Styling Doc.