This entire chapter refers to a feature that was added in version 4.18.1

The CSS File Folder asset allows you to create a folder of CSS File and CSS Design File assets that can be merged, minified and served as a single, packaged file.

Once created, you can configure the settings of the CSS File Folder on its associated asset screens. These screens are often the same or similar to those for a Standard Page and are described in the Asset Screens manual. In this chapter, we will describe the Details screen, which is different for a CSS File Folder.

Details Screen

The Details screen for a CSS File Folder allows you to configure the general settings of the asset and link associate CSS File assets. For more information about the Status, Future Status and Thumbnail sections of this screen, refer to the Details chapter in the Asset Screens manual.

Details

The Details section of the Details screen allows you to configure the general settings of the CSS File Folder asset. The Details section is shown in the figure below.

The Details section of the Details screen

The fields available in this section are as follows:

• Title: the friendly name for the CSS File Folder. By default, this will be the Title that was specified when the CSS File Folder was first created. You can change the Title by entering a new value in this field and clicking Commit.
• File Name: the file name of the CSS File Folder. By default, this will be the Title that was specified when the asset was first created, along with the file extension, for example, CSS_File_Folder.min.css. You can change the name of the file by entering a new value in this field and clicking Commit.
• Last Updated: the date that the contents of the CSS File Folder was last updated, i.e. when the merged file was last regenerated.
• Allow Unrestricted Access: depending on what this setting is, the Status of the CSS File Folder and whether or not Public Read access has been granted, Squiz Matrix will use different style URLs.
  • Yes: if the Status of the CSS File Folder is Under Construction and Public Read access has been granted then a human readable URL will be used, for example, http://www.example.com/CSS_File_Folder.min.css. This means that it is served dynamically from the Squiz Matrix repository and hence is not optimal in terms of performance.
    
    If the Status of the File is Live and Public Read access has been granted then a static URL will be used, for example http://www.example.com/__data/assets/image/100/CSS_File_Folder.min.css, where 100 is the asset ID of the CSS File Folder. The static URL gives optimal performance as it is served directly by the web server.
  • No: if this setting is No, then the human readable URL will be used. This may be required if an external system is referencing the file and needs to use the dynamic human readable URL.
  The default setting of the Allow Unrestricted Access field is Yes.

Linked Files

Once you have created a CSS File Folder asset, you can select its associated CSS File and CSS Design File assets in the Linking section of the Details screen. The Linking section is shown in the figure below.

The Linked Files section of the Details screen

In the Linked Files field, select the CSS File assets to link to the CSS File Folder. To select additional CSS File and CSS Design File assets, click the More... button; new fields will be displayed on the screen. Once you have selected the CSS Files to link, click Commit.

The files selected in this section will be linked to the CSS File Folder as NOTICE links and will not be displayed in the Asset Map.

You can use the  keyword replacement %asset_file_list% to print the content of the CSS File Folder's linked file. This keyword can also be used in a global context with the following format: %globals_asset_file_list:[ASSETID]%.

Minification

The Minification settings of the Details screen allow you to determine how the linked CSS File and CSS Design File assets are merged and whether or not the code will be minified. The Minification section is shown in the figure below.

The Minification section of the Details screen

The fields available are as follows:

• Compiler: select the compiler to use for the merging and minification of linked CSS File assets. The options available include:
  • Merge Without Minification: the linked CSS File assets will be merged without minification.
  • Basic Minification: the linked CSS File and CSS Design File assets will be merged using basic minification.
• Auto Regenerate File: this field allows you to specify whether or not the CSS File Folder's merged file will be automatically regenerated when any of the linked files have been modified.
• Regenerate File: this field allows you to manually regenerate the CSS File Folder's merged file, for example, if the content of a linked CSS File asset has been modified. To regenerate the CSS File Folder's merged file, select this checkbox and click Commit.

Example

The following example shows the merging of two CSS Files using the Basic Minification option on the CSS File Folder asset.

CSS File 1:

/* Set body style */
body {
    color: purple;
    background-color: #d8da3d 
} 

CSS File 2:

/* Set header style */
h1 {
    font-family: Helvetica, Geneva, Arial,
    SunSans-Regular, sans-serif 
} 

CSS File Folder:

body{color:purple;background-color:#d8da3d}
h1{font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif}