Controlling CSS Content

The Oracle JET theming framework provides methods for controlling the partials used in your application.

Topics:

Using Variables to Control CSS Content

You can use the $includeAllClasses variable in your SCSS settings file to control content for the entire application. By default, the variable is set to true as shown below.

// by default everything is included, but you can also start by setting
// $includeAllClasses to false and then just add in what you want.
$includeAllClasses: true !default;

Some partials also allow you to control their content with a variable near the top of the partial file. For example, the ojButton component has the $includeButtonClasses variable near the top of the _oj.alta.button.scss file.

$includeButtonClasses: $includeAllClasses !default;

To exclude the ojButton style classes, you can set $includeButtonClasses to false as shown below.

$includeButtonClasses: false;

Oracle JET also uses several higher level groupings that let you control the CSS for a logical group of components. The table lists the groups that are available for your use.

Group SCSS Variable File Names

Group	SCSS Variable	File Names
Tags (headers, links, and so on)	`$includeTagClasses: $includeAllClasses !default;`	Files with `tag` in name, as in: `_oj.alta.tags.typography`
Data visualizations (charts, gauges, and so on)	`$includeDvtClasses: $includeAllClasses !default;`	Files with `dvt` in name, as in: `_oj.alta.dvt.char`t
Form controls (labels, combo box, and so on)	`$includeFormControlClasses: $includeAllClasses !default;`	Files with `formcontrol` in name, as in: `_oj.alta.formcontrol.label`

Tags (headers, links, and so on)

$includeTagClasses: $includeAllClasses !default;

Files with tag in name, as in:

_oj.alta.tags.typography

Data visualizations (charts, gauges, and so on)

$includeDvtClasses: $includeAllClasses !default;

Files with dvt in name, as in:

_oj.alta.dvt.chart

Form controls (labels, combo box, and so on)

$includeFormControlClasses: $includeAllClasses !default;

Files with formcontrol in name, as in:

_oj.alta.formcontrol.label

You can include or exclude classes and groups as shown in the following examples.

// Example: Exclude the dvt classes
$includeDvtClasses: false;

// Example: Include only the dvt classes, exclude everything else
$includeAllClasses: false;
$includeDvtClasses: true;

// Example: Include the chart and sunburst classes, exclude everything else
$includeAllClasses:      false;
$includeChartClasses:    true;
$includeSunburstClasses: true;

Note:

Some components depend on others. For example, the ojInputNumber uses ojButton internally, so if you include the ojInputNumber classes, you will also get the ojButton classes automatically.

Using Import Control to Define CSS Content

You can use imports in your aggregating SCSS file to control the CSS content as shown in the following custom SCSS file:

@import "../oj/alta/oj.alta.variables";
 
@import "../oj/3rdparty/normalize/normalize";
 
// instead of importing all the widgets, just import the widget files you actually want
@import "../oj/alta/widgets/oj.alta.widgetone";
@import "../oj/alta/widgets/oj.alta.widgettwo";