Adding Responsive Design to Your Application

To create your responsive application using the Oracle JET framework, design for the smallest device first and then customize as needed for larger devices. Add the applicable application, flex, grid, form, and responsive classes to implement the design.

To design a responsive application using the Oracle JET framework classes:

  1. Determine whether you want to use the Oracle JET Responsive Layout and Content Design Patterns or provide your own to lay out your page.
  2. Design the application content’s flex layout.
  3. If the flex layout defaults are not sufficient and you need to specify column widths when the screen size increases, add the appropriate responsive grid classes to your flex items.
    For help, see Oracle JET Grids.
  4. If you’re adding a form to your page, add the appropriate form style classes.
  5. Customize your design as needed.

For the list of responsive design classes and their behavior, see the Responsive* classes listed in the Oracle® JavaScript Extension Toolkit (JET) Styling Reference.

For Oracle JET Cookbook examples that implement responsive design, see: