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.

zitix
  • 2,192
  • 7
  • 32
  • 48

2 Answers2

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

Community
  • 1
Raphael at Digital Pianism
  • 70,385
  • 34
  • 188
  • 352
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.

Alex
  • 489
  • 3
  • 6