The Oracle JET framework provides the Alta theme that you can use or customize in your Oracle JET applications, or you can provide our own themes for integration into an Oracle JET application. The Alta theme is based on Oracle Alta UI, a mobile and browser application design system.
The CSS files included with Oracle JET are generated by the Sass preprocessor. The Oracle JET distribution includes the SCSS configuration files used to generate the CSS files which are also included in the Oracle JET distribution.
Topics:
For information about Sass, see http://sass-lang.com. For additional information about Oracle Alta UI, see http://www.oracle.com/webfolder/ux/middleware/alta/index.html.
Oracle JET includes the following generated CSS files for the Alta theme:
oj-alta.css: Readable version of the CSS for the Alta theme
oj-alta-min.css: Minified version of the CSS for the Alta theme
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
You can find the Alta CSS files in the css/libs/oj/1.1.0/alta directory.
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.
The SCSS files that Oracle JET uses to preprocess the CSS files are included in the Oracle JET distribution. The following table lists the directory structure for the SCSS files.
| Directory | Description |
|---|---|
|
|
Contains files for the Alta theme. |
|
|
Contains files shared by both themes. These files should not be referenced directly for imports. |
|
|
Sass mixins and functions used by Oracle JET. |
|
|
Contains Oracle JET's version of third party files, such as normalize. |
Oracle JET follows the Sass underscore naming convention. Files that start with an underscore are called partials and are not compiled independently with Sass. Instead, the partials are imported into an aggregating file. There is one partial file per module, for example, _oj.table.scss, _oj.formcontrol.inputnumber.scss, and so on.
The following table lists the directory structure for the files contained within the alta directory.
| Directory | Files | Description |
|---|---|---|
|
|
_ etc. |
Alta widget partial files |
|
|
|
Contains the SCSS variables Contains a commented version of the variables file that you can remove the comments from and modify Imports widget partial files Generates the |
Sass supports source maps which can make it easier to work with a large number of partial files, as in Oracle JET. Oracle JET includes source maps for the default and no tag selector versions of the generated CSS for the Alta theme: oj-alta.css.map, and oj-alta-notag.css.map.
For additional information about source maps, see https://developers.google.com/chrome-developer-tools/docs/css-preprocessors.