This is a template utilizing the F3 Sugar Assets plugin for the PHP Fat-Free Framework.
It offers simple management and control about your frontend CSS and JS file dependencies.
<link rel="stylesheet" type="text/css" href="ui/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="ui/css/font-awesome.css" /> <link rel="stylesheet" type="text/css" href="ui/css/main.css" />
Every file is loaded with an additional HTTP request, which could lead to a huge amount of requests the client needs to load the page. Many requests makes the website load longer and increases its rendering time. This plugin helps you to combine and minified them all, which makes your frontend smaller and load faster:
<link rel="stylesheet" type="text/css" href="ui/compressed/3fgbrj1ikdusk.min.css" />
It fully supports the F3-Template engine, but also works with raw php templates or within your controller. To add an assets from the inside of your template, you can use the fancy new asset tag.
<F3:asset src="js/vendor/bootstrap.min.js" priority="10" />
This way, you can also add CSS/JS files to the
<head> section for your template, from the inside of included sub-templates. See the
widget page for a demo.
You can also enable the
greedy mode and let this plugin handle all of your existing tags, like:
<link rel="stylesheet" type="text/css" href="ui/css/font-awesome.css" /> <script src="ui/js/main.js"></script>
All assets that were added to template are collected into groups for being displayed in your HTML document. These can then be combined to a single file and stripped of superfluous whitespaces and comments. With additional attributes and configuration, you can control the load order and what to skip, minify or merge together.
Just download the package and register it to
AUTOLOAD, or require it with composer:
composer require ikkez/f3-assets:dev-master
Initialize the asset manager with a simple
\Assets::instance(); call in your index.php file or controller.
Add this sample configuration (or load the sample ini file):
[ASSETS] auto_include = true greedy = true filter.js = minify,combine filter.css = minify,combine public_path = compressed/
and have a look at the configuration details.
public_path writable and clear the template files in your
tmp/ [TEMP] folder.
Done. Enjoy a cold beer and maybe donate another one to me. Cheers.