Sugar Assets

Sugar CSS/JS Assets. Yummy!

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.

Automatic merge and minify

The front-end templates we build today, are mostly full of additional css and javascript libraries from frameworks, plugins or just visual candy. Those front-ends could have a set of multiple files you include in your global layout file, like this: 


<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" />

Simply add files

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.

View details »

Easy installation, you could even do it while you're drunk.

  1. Just download the package and register it to AUTOLOAD, or require it with composer:
    composer require ikkez/f3-assets:dev-master

  2. Initialize the asset manager with a simple \Assets::instance(); call in your index.php file or controller.

  3. 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.

  4. Make the public_path writable and clear the template files in your tmp/ [TEMP] folder.

  5. Done. Enjoy a cold beer and maybe donate another one to me. Cheers.

Lots of goodies included

  • Supports UI split var / array for easy theming
  • Checks for modified files and only recompile if needed
  • Configurable filters, paths and excludes
  • Customizable with own type formatter and group filters
  • Keeps your CSS file paths working
  • Can also collect on-page styles and scripts
  • Tastes good!

download github