Help Center

Menu

CSS file folder asset

Learn how to create a folder of CSS file and CSS design file assets that you can merge, minify, and serve 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 as (or similar to) those for a standard page. Read the Asset screens documentation for more information about the different common screens in this asset.

This chapter describes the Details screen, which is different for a CSS file folder.

Details screen

The Details screen for a CSS file folder lets you configure the general settings of the asset and link associate CSS file assets.

Read the Asset details screen documentation for general information about the status, future status, and thumbnail sections of this screen.

The details section of the Details screen lets you configure the CSS file folder asset’s general settings.

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 created.

To change the title:

  1. Enter a new value in this field.

  2. Select Save.

File name

The name of the CSS file folder. By default, this will be the title that was specified when the asset was first created. It includes the file extension.

To change the name of the file:

  1. Enter a new value in this field.

  2. Select Save.

Last updated

The date that the contents of the CSS file folder were last updated (when the merged file was last regenerated).

Allow unrestricted access

The default setting of this field is Yes.

Matrix will use different URL styles depending various settings. The following table shows some combinations:

CSS file folder status Public read access Allow unrestricted access setting Result

Under construction

Yes

Yes

A human-readable URL will be used.

For example, http://www.example.com/css_file_folder.min.css This format is served dynamically from the Matrix repository and is not recommended for a performant site.

Live

Yes

Yes

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 webserver.

Not applicable

Not applicable

No

A human-readable URL will be used.

This setting may be required if an external system is referencing the file and needs to use the dynamic human-readable URL.

Linked files

You can select the associated CSS file and CSS design file assets the CSS file folder asset in the linking 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 files and CSS design file assets:

  1. Click the More… button.

  2. Select more CSS files.

  3. Select Save.

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 tree. 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 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 lets you specify whether the CSS file folder’s merged file will be automatically regenerated when any of the linked files are modified.

Regenerate file

This field lets you regenerate the CSS file folder’s merged file manually. For example, if the content of a linked CSS file asset has been modified.

To regenerate the CSS file folder’s merged file:

  1. Select this checkbox.

  2. Select Save.

Example

The following example shows merging 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}