How to install asset manager for UserFrosting login system?

I use userFrosting for my login system, i have problem to include css files. I used this code

{% block stylesheets %}
{{ parent() }}

<link href="{{ asset('css/style.css') }}" rel="stylesheet">
{% endblock %}

or this one;

{% block stylesheets %}
{{ parent() }}

{{ asset('css/style.css') }}
{% endblock %}

or this one;

{% block stylesheets %}
{{ parent() }}

<link href="css/style.css" rel="stylesheet">
{% endblock %}

but i could not include css and page shows Error500 The localhost page isn’t working. How can i figure out whats the problem? And how can i install asset manager, where is console in userfrosting to install asset manager?

Solution

You'll want to add the relative paths to your CSS files in initialize.php. UserFrosting 0.3.1 has a basic asset management system that lets you group assets based on what types of pages they will appear on.

For example, suppose you want to load some CSS and Javascript libraries for rendering charts on all of your "analytics" pages. To assign a page to the "analytics" group, you would add {% set page_group = "analytics" %} to the top of the page's Twig template.

Then, you can register CSS and JS assets for the "analytics" group in initialize.php:

$app->hook('includes.css.register', function () use ($app){

    ...

    $app->schema->registerCSS("analytics", "supercharts/supercharts.css");
    $app->schema->registerCSS("analytics", "supercharts-custom.css");
});

$app->hook('includes.js.register', function () use ($app){

    ...

    $app->schema->registerJS("analytics", "supercharts/supercharts.js");
});

A few things worth noting:

All CSS assets must be placed in public/css, and all JS assets in public/js.
Assets in the common group will be loaded with every page.
You can use the build tool in site settings to minify and concatenate assets within each page group. This will help your site to load more quickly and result in a better user experience. You can learn more about optimizing client-side resources at Google Developers.

Please note that all of this will be changing in UF4, where we will be using a new asset management library, along with Node.js and Gulp to perform asset compilation/optimization.