Form field type structure

Question

In a Joomla 3.x plugin I need to create several new form field type and in some cases extend already existing core form fields. I know how to do it, but I have some doubts how to structure this files when they also have some css and js files.

Should I create individual directories for each element and put all related files inside those directories or should I have only one directory and put all css and js files from all the elements inside?

When needed, should I have one css file for each element or only one css file with all elements styles?

plugin_name_dir
|
|__elements_dir
        |    |__element_a.php
        |    |__element_b.php
        |
        |__element_a_dir
        |       |__css_dir
        |       |    |__element_a.css
        |       |
        |       |__js_dir
        |           |__element_a.js
        |
        |__element_b_dir
        |       |__css_dir
        |       |    |__element_b.css
        |       |
        |       |__js_dir
        |           |__element_b.js
...

or

plugin_name_dir
|
|__elements_dir
|    |__element_a.php
|    |__element_b.php
|
|__css_dir
|    |__element_a.css
|    |__element_b.css
|
|__js_dir
|    |__element_a.js
|    |__element_b.js
...

Answer 1

According to default structure of components, modules, templates and plugin.. I'll suggest you to have only one folder for css files and one for js files.

Anyway I think is better to have also only one css file to style everything, because for browsers is better to load one single css file, even if is bigger than two different files, and reuse the cached version on every page instead of loading different resources.

Answer 2

plugin_name_dir
|
|__element_a.php
|__element_b.php
|
|__assets_dir
     |
     |__css_dir
     |    |__style_a.css
     |    |__style_b.css
     |
     |__js_dir
     |    |__script_class_a.js
     |    |__script_class_b.js

Assets can be included in the plugin folder, but should be in the Joomla media folder.

• See Creating a Plugin for Joomla 3.x
• See Plugin Developer Overview