Oracle JET includes CSS files designed for display on web browsers and hybrid mobile applications. Each theme includes minified and readable versions of the CSS and source maps.
Oracle JET themes are based on Oracle Alta UI, a mobile and browser application design system. There are two types of themes included in Oracle JET, both based on Oracle Alta UI:
alta web theme
Web themes are designed to be used in a browser on all platforms, and the same theme can be used regardless of whether you are looking at a web page on a desktop Firefox, Android Chrome, or iOS Safari browser.
windows hybrid mobile themes for Android, iOS, and Windows
Hybrid themes are designed to be used with Cordova to create a hybrid mobile application. The colors use Oracle's Alta look and feel, but otherwise these themes try to match the look and feel of a native mobile application.
The Alta CSS included with the Oracle JET distribution are generated by the Sass preprocessor and include the following files:
oj-alta*.css: Readable version of the CSS
oj-alta*-min.css: Minified version of the CSS
oj-alta*.css.map: CSS source map
In addition, the Alta web theme includes the following generated CSS:
oj-alta-notag.css: Readable version of the CSS generated without tag selectors
For additional details about Oracle JET theming and tag selectors, see Using Tag Selectors or Classes.
oj-alta-notag-min.css: Minified version of the CSS generated without tag selectors
If, however, you want to use a different theme or make more substantial modifications, then you can use the Oracle JET tooling framework to generate your own CSS. For instructions, see Customizing Themes Using the Tooling Framework.
In order for Oracle JET's theming to work properly, you must include the following line at the top of all HTML5 pages:
If you don't include this line, the CSS in your application may not function as expected. For example, you may notice that some elements aren't properly aligned.
Tip:If you create an Oracle JET application using the framework or one of the sample applications, this line is already added for you, and you do not need to add it yourself.
The Oracle JET framework provides the
oj.ThemeUtils class that you can use to obtain information about the current theme and use that information to generate and apply a class.
oj.ThemeUtils class provides the following services:
Return the name of the current theme.
Return the target platform of the current theme, usually
Parse JSON data to use as the font family.
For an example that shows how to vary background color based on the current theme’s name and target platform, see Theme Info. For information about the specific services that the
oj.ThemeUtils class provides, see oj.ThemeUtils.
If the language you specify uses a right-to-left (RTL) direction instead of the default left-to-right (LTR) direction, such as Arabic and Hebrew, you must specify the
dir attribute on the
<html lang=name dir="rtl">.
For example, the following code specifies the Hebrew Israel (he-IL) locale with right-to-left direction enabled:
<html lang=he-IL dir="rtl">
You can find out more about localizing your application and adding bidirectional support in Internationalizing and Localizing Oracle JET Applications.