Front End Resources
If your plugin has any CSS, JavaScript, images, or other front-end resources, you can place them in a resources/ subfolder within your plugin’s folder.
Craft provides a helper function, UrlHelper::getResourceUrl('path/to/file.ext'), which returns the URL to a resource file. Templates have a similar function: {{ resourceUrl('path/to/file.ext') }}. The URL returned by these functions will work even if the craft/ folder is placed above the web root.
By default, Craft will search for the resource file in its own craft/app/resources/ folder. If it can’t find the file there, it will check if the first segment of the resource path is set to a plugin handle. If it is, Craft will look for the resource file within that plugin’s resources/ folder.
So if an image were located at craft/plugins/cocktailrecipes/resources/images/gin.png, it would be accessible via UrlHelper::getResourceUrl('cocktailrecipes/images/gin.png') and {{ resourceUrl('cocktailrecipes/images/gin.png') }}.
Craft\TemplatesService (opens new window) also provides the handy functions, includeCssResource('path/to/file.css') and includeJsResource('path/to/file.js'), which queue up CSS and JS files to be included in the template within <link> and <script> tags. These functions also have template tag counterparts, {% includeCssResource "path/to/file.css" %} and {% includeJsResource "path/to/file.js" %}.