Controllers: Asset Management

In the initial state you will find a folder within the controllers-folder named "assets". There are some controllers placed for processing assets like images, stylesheets, javascripts and other binaries used for the layout.

All the assets of your web-application can be placed inside of your application folder. There you will find a folder named "assets". In there you will find subfolders named img, css, js and etc. The names are self-explanatory. You can put your assets in there and use any deep hierarchy of subfolders. Assets will be compiled or otherwise modified. The result will be saved into the folder "application/compiled". You can Removing all the contents inside of this folder safely. The controllers will build the cache automatically again. In the most cases you do not have to delete the compiled assets. The controller will recognize a new version of the origin asset, and will delete the cached one by itself.

For now the following assets will be processed as follows:

Images

Images placed inside the folder "img" will be resized accordingly to the users viewport size. High density displays like retina displays will be detected and small mobile devices. For this reason you should use high resolution images from the beginning. The controller will serve the client an image with an optimized size automazically. The only thing you have to pay attention to, is the correct marking of the used <img>-Tags.

Used library: http://adaptive-images.com/

An example

Acoording to the given design you have to place an image of 150x50 pixels onto the page. In this case you will save a double-sized image into the img folder with 300x100 pixels. The most important thing now, is to write your <img>-Tag with the correct sizes: <img width="150" height="50" src="..." />. That's all. Everything else will be done by the img-controller. Retina-displays will show a sharp image and mobile browsers will get a downsized image.

How do i point to an image?

Pointing to an image from an <img>-tag out is always src="assets/img/...". Pointing to an image from a stylesheet is always url(../img/...).

What image types are supported?

PNG, GIF and JPG

What if i don't want to use this feature?

You should nevertheless use the same place to save your images and avoid spreading your assets around. The only thing you have to change is the pointing url to the images by adding a "fix/" to the url. Pointing to an image from an <img>-tag without processing is src="assets/img/fix/...". Pointing to an image from a stylesheet is url(../img/fix/...).

Stylesheets

Sometimes everyone miss features that don't exist in CSS yet like variables, nesting, mixins, inheritance. This is now possible by using SASS (Syntactically Awesome StyleSheets). To learn more about this CSS-Extension read the basic introduction here: http://sass-lang.com/guide

Used library: https://github.com/richthegeek/phpsass

Do i have to use SASS?

Probably the most frequently question: Do i have to use SASS? No, you can use it, but do not have to! If you dont want or need it, just use simple CSS as always.

What extensions should i use

You can use every extension you want, you are not limited to ".css".

Further Optimizations

The controller do also something else: Depending on the constant "ENVIRONMENT" the served stylesheet will be compressed if it was set to "testing" or "production". If set to "development" it will be only normalized.

JavaScript

For now no special processing will be done for JavaScript-Files. Just put your files inside of the folder "assets/js" being prepared for future enhancements.

Other Binaries

Except of images can be other binary files part of your website. For example pdf-files for download. For these files the folder "etc" was scheduled. For now no special processing will be done for these files. Just put your files inside of the folder "assets/etc" being prepared for future enhancements.