With resources, you can specify when your resources should be included and where in the page's head area they should be included.
When - CSS classes and dependencies
Rather than serve resources all the time, Metrici provides very fine control to tailor exactly which resources are included in the head area of the page. Removing little-used resources from most pages improves the user experience, while still allowing specialist resources to be brought in on the pages that need them.
Where - ordering rules
To achieve this, each resource can provide one or more follows statements. These list resources that, if present, this resource must follow. Note that the follows statement does not imply dependency. If you need Resource A prior to Resource B in your head area, then you have to say both that Resource B requires Resource A and that Resource B follows Resource A.
You can also use the precedes statement to ensure that your resource should precede another one. So "B follows A" has exactly the same effect as "A precedes B". Precedes is useful because it allows you to place your resource in front of resources that you don't want to change, such as standard resources.
Resource ordering can get a bit difficult to understand. To make things simpler, the head area is split into a number of sections, and you can place your resources in a specific section. These are
- css-framework – CSS frameworks, such as Bootstrap, which should go first.
- css-standard – standard CSS components, such as Metrici's own CSS.
- css-theme – CSS that is specific to this theme.
Specifying a section is the same as specifying that your resource depends on section-start and section-end, follows section-start and precedes section-end.
You can use the sections as follows:
Use the Resource (library.theme.ThemeResourceType) type to define resources, and then include them in the Resources list on your theme.
Resources allow you to enter:
- A reference for the the resource.
- A section for the resource.
- Requires, follows and precedes rules.
- Content for the resource. This is optional - some resources only existing to manage dependencies and ordering.
To illustrate this, consider the following requirement:
- Across the entire theme, turn the text fuchsia.
- If there are any mybox components, put a black border around them and show their text when clicked.
The resources you need are as follows:
|custom||mytheme-css||Override the standad custom resource to require mytheme-css.|
|Provides additional CSS that is always brought in.|
|Translates the mybox class into two separate resources.|
Provides styling for mybox.
The style will be inserted after the standard Metrici styling, but before the custom theme styling.
Provides behaviour for mybox.
Like the styling, this will be inserted after the standard styling but before the custom theme behaviour (if there was any).
This requires the jquery library, which is a standard resource.
See Advanced theme configuration for more details of overriding the standard theme components and applying filters for even finer control.
You can effectively delete a resource brought in from another theme by defining it again, but without any requires, section, follows, precedes or content.