1. Developing Applications with Oracle JET
  2. Theming Applications
  3. CSS Files Included With Oracle JET

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 add a few application-specific styles, you may find that adding the classes to app.css in your application’s src/css folder will meet your needs.

If, however, you want to use a different theme or add more than a few application-specific classes, then you can use the Oracle JET tooling to generate your own CSS. For instructions, see Customizing Themes Using the Tooling.

Use the recommended standards to generate your CSS and Themes. For more information, see Best Practices for Using CSS and Themes.

Important:

Do not override Oracle JET CSS. Oracle JET’s CSS is considered private and can change at any time.

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 tooling or one of the sample applications, this line is already added for you, and you do not need to add it yourself.

ThemeUtils

Oracle JET 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.

Understanding the Color Palette

Oracle JET defines four sets of colors including branding ramps, neutral ramps, text colors, and accent colors. Each set supports the Alta look and feel, but you can customize them for your needs.

The four color sets include:

  • Branding ramp: a progressive set of colors generated by tinting (mixture of a color with white) and shading (mixture of a color with black) a primary brand color ($brandColor).

    In the Oracle look and feel the branding colors are blue.

  • Neutral ramp: a progressive set of neutral colors based on the same hue ($neutralHue) and saturation ($neutralSaturation), but with varied levels of lightness.

    In the Oracle look and feel the neutral colors are gray.

  • Text colors: text colors created from a base color of #000 with various opacities.

    Text with opacity looks better on colored backgrounds.

  • Accent colors: special colors that are used in things like messaging, drag and drop, and data visualization components.

To look at examples of the different color sets and associated variables, see Theme Builder.

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.