Layout Management & CSS Classes with Oracle JET

Oracle JET provides automatic responsive layout using CSS classes. So that, from large screens to small screens the application fits itself the best possible way.

JET’s layout management are based on 2 types of CSS classes “Responsive Grid” and “Flex”.

Responsive grid classes which deals with size, number of columns and functions of a particular <div>. Naming convention of these classes are

oj-size-function-columns

sizes can be: sm, md, lg, xl

functions can be: hide, only-hide

columns can be: any number between 1 to 12.

 

Just like Bootstrap, JET also divides the width of the available space into 12 columns, so for example, if you want a section of your page should take up atleast 5 columns if you divide the available screen into 12 columns, you need use : oj-size-5.

Now comes the size part, you need to define that for each size of the screen, from hand-held mobile devices to large or extra large desktop screens.

With combination with theses grid classes, we can easily stretch, hide, wrap contents within the Flex layouts.

So, for example, I want to achieve the following layout in desktops and portrait mode of iPads.

And, for mobile devices

The div class structure of the above implementation is

<div class="oj-hybrid-padding">

    <h1>Home Page Layout</h1>

    <div class="oj-flex">

    <div class="oj-flex-item oj-margin oj-panel oj-xl-2 oj-lg-2 oj-md-only-hide oj-sm-only-hide">

        first column which will be hidden in small screens(iPad onwards)

    </div>

    <div class="oj-flex-item oj-margin oj-panel oj-xl-6 oj-lg-6 oj-md-8">

        second column always displayed and top section of the page in small screens

    </div>

    <div class="oj-flex-item oj-margin oj-panel oj-xl-2 oj-lg-2 oj-md-4">

        third column, never hidden

    </div>

    </div>

</div>

 

Let me explain, each classes I have used in the above code snippet.

oj-flex: Defines the container for all 3 inner sections of the page.

oj-flex-item: Defines the children in the flex container.

oj-md-only-hide & oj-sm-only-hide: Defines that this <div> should be hidden for iPad and hand-held mobile devices.

oj-lg-[2/6]: Defines the grid width of the <div> for larger screen sizes.

oj-xl-[2/6]: Defines the grid width of the <div> for extra large screen sizes.

 

If you notice, I have not defined the grid width for medium or small screens, because I want both the sections to have same width on those devices.