[wiki] How to organize Design "things" in Yii 2 (themes and layout)

1. Via "theming"
2. Using layouts
3. Both
4. UseCase one
5. UseCase two

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. In this article I provide tips for handling multiple "Designs". I use these three features:

• AssetBundle
• Layouts
• Themes

What do you need for desingning your website:

• CSS files
• JS files
• some Images or other media.

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 these and where is the best place to put them in your application directory?

Via "theming" ¶

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

Using layouts ¶

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

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.