8

I need to create my own UI library (mostly .less files, but also images and .js) which will be used in multiple custom modules and themes. I thought I will just add my files to Magento UI library which is located under /lib/web.

  1. But first of all, is it allowed (and is it a good practice) to add custom files in /lib/web?

  2. If I add there custom files, should I create there my own folder (e.g. with my company name) such as /lib/web/company to keep all my custom files separated from Magento default files?

For example:

lib/
├── web/
│   ├── css/
│   │   ├── source/
│   ├── fonts/
│   ├── jquery/
│   ├── company/
│   │   ├── css/
│   │   │   ├── source/
│   │   ├── fonts/
│   │   ├── jquery/

Or should I create custom folder inside each of the default folders? Like this:

lib/
├── web/
│   ├── css/
│   │   ├── source/
│   │   ├── company/
│   │   │   ├── source/
│   ├── fonts/
│   │   ├── company/
│   ├── jquery/
│   │   ├── company/

Documentation

I've checked documentation about UI library, but it's not clear to me where custom files should be placed: https://github.com/magento/magento2/blob/2.0/lib/web/css/docs/source/README.md

Example 1 (link):

Global variables

If variables are common for couple themes it should be located in global lib in _variables.less file

I assume we should never edit the default the core files. So do they mean that I should create my own folder for the file with custom variables? Where exactly?

/lib/web/company/css/source/lib/_variables.less

/lib/web/css/company/source/lib/_variables.less

/lib/web/css/source/company/lib/_variables.less

/lib/web/css/source/lib/company/_variables.less

Example 2 (link):

Extends that used in more than one theme should be saved in lib lib/source/utilities.less (will be separated into utilities folder)

This suggests that custom mixins should be placed in a new file utilities.less inside a new sub-directory /lib/web/css/source/lib/source. Is that correct?

But they don't say if I should create my own folder there.

2 Answers 2

2

My answer might be opinion based but I'm applying the Magento 1 module development best practice to Magento 2

As statement in the linked answer:

Put your static resources (js, css, images) in a folder named with the company name to make it easier to isolate them

So I don't think there is one right answer but based on what I just posted I'd say I'd go for your first option:

Create there my own folder (e.g. with my company name) such as /lib/web/company to keep all my custom files separated from Magento default files

1

Currently Magento 2 does not provide any recommended way to extend the library globally. The intended way is adding all your styles in custom themes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.