CSS Files Included With Oracle JET

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.

  • android , ios, and 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 the CSS files provided by Oracle JET with your application are sufficient and you only want to change or add a few styles, you may find that adding a CSS file for styling specific to your application will meet your needs. You can find a list of Oracle JET style classes in the Oracle® JavaScript Extension Toolkit (JET) Styling Reference.

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.

DOCTYPE Requirement

In order for Oracle JET's theming to work properly, you must include the following line at the top of all HTML5 pages:

<!DOCTYPE html>

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.

ThemeUtils

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.

The oj.ThemeUtils class provides the following services:

  • Return the name of the current theme.

  • Return the target platform of the current theme, usually web, ios, android, or windows.

  • 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.

Setting Text Direction

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 tag: <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.