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 to none.

    // 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

    For additional information about using the $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 false to generation of a particular type of class.

    Variable Description

    $responsiveGenerateHide

    Generate hide classes like .oj-md-hide.

    $responsiveGenerateTextAlignEnd

    Generate text-align end classes like .oj-md-text-align-end.

    $responsiveGenerateFloatStart

    Generate float start classes like .oj-md-float-start.

    $responsiveGenerateFloatEnd

    Generate float end classes like .oj-md-float-end.