Oracle JET and Responsive Design

Responsive design describes a design concept that uses fluid grids, scalable images, and media queries to present alternative layouts based on the media type. With responsive design, you can configure Oracle JET applications to be visually appealing on a wide range of devices, ranging from small phones to wide-screen desktops.

The Oracle JET framework includes classes that support a flexible box layout. In a flex layout, you can lay out the children of a flex container in any direction, and the children will grow to fill unused space or shrink to avoid overflowing the parent. You can also nest boxes (for example, horizontal inside vertical or vertical inside horizontal) to build layouts in two dimensions.

Oracle JET also provides a 12-column grid system and form layout classes that include styles for small, medium, large, and extra large screens or devices that you can use in conjunction with the flex layout classes to achieve finer control of your application’s layout. The grid system and form classes use media queries to set the style based on the width 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 width. They are also the basis for responsive JavaScript that loads content conditionally or sets a component's option based on screen width.