[wiki] How to organize Design "things" in YII2

Hello,

after working with YII2 for serveral Years and doing creating systems sharing Information over the web. I'm not a designer, so my look and feel is more functional :).

Sometimes the App needs a nicer look & feel, so its necessary to organize the assets for this and yii can help a lot to make it easy.

Here my tipps for special purposes for handling multiple "Designs".

I use these three features, AssetBundle, Layouts, Themes.

What do you need for desingning your website:

• CSS files,
• JS files and
• some Images or other medias. lets call it "DesignAssets"

What Yii needs:

• one or more Layout files
• the view files
• AssetBundle set in the layout-file lets call it "DesignTemplates"

So how to bundle and where is the best place to put which item?

in your yii app directory

method "theming"

• myYiiApp
  • ...
  • designs
    • myDesign1
      • put here all your "DesignTemplates" (AssetBundle,layout, and view folder/files, when using themes)

OR method "using layouts"

• myYiiApp
  • ...
  • views
    • layouts
      • myDesign1.php (layout file)
    • ...

and for both

• myYiiApp

  • ...

  • web

    • designs
      • myDesign1
        • put here all your "DesignAssets" (css, js, img, etc.)

  • ...

So you can work with the default security file-rights for the correct purpose.

UseCase one: Write an App and distribute it to some Customer. Here can it be necessary that every customer wants a personal design.

Solution: Using themes

you config in your web.php or main.php (advanced template) whats documented here

if you need special "DesignAssets"

put your "DesignAssets" und the web directory myYiiApp/web/designs/myDesign1/css and js and img folders

customize your myYiiApp/designs/myDesign1/assets/MyDesignAsset.php

and your layout file myYiiApp/designs/myDesign1/layout/main.php

thats it.

UseCase two: you need several designs for e.g. controllers. so my remmmendation is using layouts, because easy switching in controller action.

Solution with layouts

there is no need to configure anything in the config files

if you need special "DesignAssets"

put your "DesignAssets" und the web directory myYiiApp/web/designs/myDesign1/css and js and img folders

create and customize your myYiiApp/assets/MyDesignAsset.php

and your layout file myYiiApp/views/layout/mydesign1.php

in your controller action set your layout.

public function actionIndex() {
    $this->layout = 'mydesign1';
}

may it helps your start with designing yii.