PHP-SDK - CSS, LESS and SCSS¶

The App-Manager SDK provides a helper to enable you to compile, concatenate and minify all your CSS and Less-Files. As well config values (type CSS) can be included in the process. The output file will be automatically saved to your file cache to keep your app fast. The App-Manager SDK uses the great PHP Less compiler by Josh Schmidt and the PHP SCSS compiler by Leaf Corcoran.

The CSS-Helper Class provides the following functions:

Compile Less and SCSS files (including @imports), CSS Files and Config value (CSS)
Compiles Bootstrap CSS :-)
Dynamically replace Variables with values you submit
Search and Replace strings

Getting started¶

To request compiled CSS files, you need to tell the SDK, what files to include in your compiled files. Your “input” is defined in an array:

// And here is your initialization code:
define("ROOT_PATH", realpath(dirname(__FILE__)));
$am = new \AppManager\AppManager(
   $m_id,
   array(
        "root_path" => ROOT_PATH,
        "cache_dir" => "/var/cache"
    )
);

/**
 * This example config files will return 2 compiled css files: file1 and file2
 * array(
 *      files         -> Array list of files (using an absolute path) to include in the compilation
 *      config_values -> App-Manager config values of type CSS to include in the compilation
 *      variables     -> Less or Scss Variables which will be replaced in all files
 *      replacements  -> String replacements in all files (e.g. to fix a relative filepath')
 * )
 */
$css_config = array(
    'file1' => array(
        'files' => array(
            ROOT_PATH . '/css/less/bootstrap-custom.less',
            ROOT_PATH . '/css/scss/bootstrap-social.scss',
            ROOT_PATH . '/js/vendor_bower/font-awesome/css/font-awesome.min.css'
        ),
        'config_values' => array(),
        'variables' => array(
            'brand-primary' => $am->getConfig('color_primary'), // Use a config value to set a color
            'border-radius-base' => '0px',
            'border-radius-large' => '0px',
            'border-radius-small' => '0px',
        ),
        'replacements' => array(
            '../fonts/fontawesome' => '../../js/vendor_bower/font-awesome/fonts/fontawesome'
        ),
    ),
    'file2' => array(
        'files' => array(
            ROOT_PATH . '/css/style.css'
            ROOT_PATH . '/css/less/app.less',
        ),
        'config_values' => array( 'css_app', 'css_user' ), // A list of config value IDs to include in the CSS
        'variables' => array(
            'primary' => '#478AB8',
            'secondary' => '#2D343D',
            'highlight' => '#efefef',
        ),
        'replacements' => array()
    ),
);

$css_files = $am->getCssFiles($css_config);

Now you got an array containing two CSS file path’s. To use them in your app just print them in your HTML head section:

<head>
...
<?php
foreach ($css_files as $css_file) {
    ?>
    <link type="text/css" rel="stylesheet" href="<?php echo $css_file ?>" />
    <?php
}
?>
...
</head>

Note

Test all available requests in our API-Explorer_.

Overwriting variables using SCSS¶

In you CSS-Config file you can set variables, which will be set before your source files are being compiled. When you use SCSS source files, please assure, that all variables you want to overwrite are flagged with !default

$primary: #112233 !default;

h1 {
    color: $primary;
}

With the above configuration for ‘file2’, the compiled CSS would look like this:

h1 {
    color: #478AB8;
}