Pinion: perch_get_css()

The perch_get_css() function insert links to your CSS files into your documents.

Default

perch_get_css();

By default it inserts links to all the CSS files that are placed in the folder you have defined with PIPIT_PINION_ASSETS_DIR in your perch/addons/feathers/pipit_pinion/config.php. This includes files that are placed in sub-folders.

If you have PERCH_PRODUCTION_MODE set to PERCH_DEVELOPMENT in the Perch config file, the function inserts links to all the CSS files that are placed in the folder you have defined with PIPIT_PINION_ASSETS_DEV_DIR instead.

Parameters

Type Description
Array Options array, see table below

Options Array

Name Value
dir The name of a directory from which to link CSS files. Includes files in sub-directories. Path is relative to root.
files An array. Paths of one or more CSS files to link. Paths are relative to root.
pre An array that specifies which files are added first.
exclude An array that specifies files to be excluded.
cache-bust Boolean or Array. Set to true to apply to all files, or specify specific files in an array
fonts A link for external fonts e.g. Google Fonts
dev Set to true to only link files if PERCH_PRODUCTION_MODE set to PERCH_DEVELOPMENT

Usage examples

Adding one or more specific files

perch_get_css([
    'files' => ['src/vendor/prism/prism.css'],
]);

This is useful if you want to add some files on specific pages only:

// get all files in src/css (assuming you defined it in your pipit_pinion/config.php), but exclude docs.css
perch_get_css([
    'exclude' => ['src/css/docs.css']
]);

// add docs.css and other files conditionally
if(condition) {
    perch_get_css([
        'files' => ['src/vendor/prism/prism.css', 'src/css/docs.css']
    ]);
}

Adding all CSS files in a directory (and sub-directories)

If you have a folder that has a mix of file types in different sub-folders, but you only want to add the (keep explaining).

perch_get_css([
    'dir' => 'src/vendor',
]);

Order control

You can control which files are added first to your document with the pre option. Note that files in sub-folders need to include the folder name.

 .
 ├── src
 │   ├── normalize.css
 │   └── prism
 │      ├── prism.css
 │      └── prism.js
 │   
 └── perch
perch_get_css([
    'dir' => 'assets/vendor',
    'pre' => ['normalize.css', 'prism/prism.css'],
]);

Adding fonts

The following links your fonts as well as your CSS files in the folder defined with PIPIT_PINION_ASSETS_DIR in your config.

perch_get_css([
    'fonts' => 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Rozha+One',
]);

Adding files for development only

Only add debug_styles.css when PERCH_PRODUCTION_MODE set to PERCH_DEVELOPMENT.

perch_get_css([
    'files' => ['src/debug_styles.css'],
    'dev' => true,
]);

Cache Busting

To cache-bust all included files, use 'cache-bust' => true:

perch_get_css([
    'cache-bust' => true,
]);
perch_get_css([
    'dir' => 'assets/css',
    'cache-bust' => true,
]);

Or you can specify files in an array:

perch_get_css([
    'files' => ['assets/vendor/css/one.css', 'assets/css/two.css', 'assets/css/three.css'],
    'cache-bust' => ['assets/css/two.css', 'assets/css/three.css'],
]);
perch_get_css([
    'dir' => 'assets/vendor',
    'cache-bust' => ['prism/prism.min.css'],
]);
link