Controlling the Size and Generation of the CSS
You can change the size of the CSS content automatically generated by Oracle JET so that unused classes or particular types of classes are compressed, removed, excluded, or not generated.
When you use the responsive framework classes, Oracle JET generates a large number of classes that you may not need. Here are some steps you can take to control the size and generation of the CSS.
-
Use compression.
The responsive classes are often repetitive and compress well. For details about compressing your CSS, see Optimizing Performance.
-
Remove unused classes.
By default, Oracle JET generates responsive classes small, medium, large, and xlarge screens. If you know that your application will not use some of these classes, you can set the associated
$responsiveQuery*variables tonone.// If you don't want xlarge classes, you could set: $screenXlargeRange: none; $responsiveQueryLargeOnly: none; $responsiveQueryXlargeUp: none;
-
Exclude unused classes from the application layout, flex, grid, form layout, and responsive helper groups.
You can use the following variables to exclude classes from these groups altogether:-
$includeAppLayoutClasses -
$includeAppLayoutWebClasses -
$includeFlexClasses -
$includeGridClasses -
$includeFormLayoutClasses -
$includeResponsiveHelperClasses
$include*variables, see Using Variables to Control CSS Content. -
-
Stop generation of a particular responsive helper class.
For finer-grained control, there are additional variables that you can set to
falseto generation of a particular type of class.Variable Description $responsiveGenerateHideGenerate hide classes like
.oj-md-hide.$responsiveGenerateTextAlignEndGenerate text-align end classes like
.oj-md-text-align-end.$responsiveGenerateFloatStartGenerate float start classes like
.oj-md-float-start.$responsiveGenerateFloatEndGenerate float end classes like
.oj-md-float-end.