Adding Responsive Design to Your Application

To create your responsive application using Oracle JET, 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 Oracle JET 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.
   For help, see Oracle JET Flex Layouts
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.
   For help, see Responsive Form Layouts
5. Customize your design as needed.
   For additional information, see:

   • Using Responsive JavaScript

   • Using the Responsive Helper Classes

   • Creating Responsive Images

   • Changing Default Font Size

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:

• Application Patterns

• Flex Layouts

• Responsive Grids

• Form Layouts

• Responsive Helpers

• Responsive JavaScript Framework Queries