Reorganize Scss folder structure

[MartijnCuppens]

Our current scss file and folder architecture is a bit unclear. We have a _variables.scss file on the same level as the components. There's also a _mixins.scss file which includes the mixins in another folder. There might be some room for reorganisation.

We could come up with our own folder structure but it might be interesting to have a look at existing solutions. Maybe ITCSS could help us out.

ITCSS has been discussed already in #18233 but this was also about splitting our variables file, I wouldn't do that for now. Just reorganising the files into folders would be a great start.

Feel free to spread your thoughts on this here

/CC @twbs/css-review

[mdo]

With the forms redux, I already want to move all that into a new subfolder. What other changes would you be interested in making?

[MartijnCuppens]

I guess a folder structure like this would be the result in the end:

bootstrap/
└── scss/
    ├── settings/
    │   └── variables.scss
    ├── tools/
    │   ├── functions.scss
    │   └── mixins
    │       └── ... All mixin files here
    ├── generic/
    │   ├── reboot.scss
    │   └── root.scss
    ├── elements/
    │   └── type.scss
    ├── objects/
    │   ├── images.scss
    │   ├── code.scss
    │   ├── grid.scss
    │   └── transitions.scss
    ├── components/
    │   ├── tables.scss
    │   ├── forms.scss
    │   ├── buttons.scss
    │   ├── dropdown.scss
    │   ├── button-group.scss
    │   ├── input-group.scss
    │   ├── custom-forms.scss
    │   ├── nav.scss
    │   ├── navbar.scss
    │   ├── card.scss
    │   ├── breadcrumb.scss
    │   ├── pagination.scss
    │   ├── badge.scss
    │   ├── alert.scss
    │   ├── progress.scss
    │   ├── list-group.scss
    │   ├── close.scss
    │   ├── toasts.scss
    │   ├── modal.scss
    │   ├── tooltip.scss
    │   ├── popover.scss
    │   ├── carousel.scss
    │   └── spinners.scss
    ├── utilities/
    │   └── utilities.scss
    ├── bootstrap.scss
    ├── bootstrap-grid.scss
    └── bootstrap-reboot.scss

In each folder some files could be grouped into folders if needed (like the form stuff).

[GeoSot]

@mdo @MartijnCuppens

May I propose and a split on the variables.scss?

It has being too big... Or Maybe One main File with the main variables and a second which will have all the inherited variables

[MartijnCuppens]

Splitting the variables.scss file is something we could look in to, imo that something we can do after cleaning up the folder structure.

[tomhrtly]

I agree with @GeoSot, it would be handy to have two separate variable files, one for the initial variables and another for derived ones. It would save having to redeclare some variables such as colors as this is usually the file that is imported first in the SCSS setup.

[inwardmovement]

That will be awesome if V5 adopts ITCSS architecture.

[ffoodd]

FWIW I got used to @hugogiraudel's 7-1 pattern which would be very consistent with our current namings:

• base/
• components/
• layout/
• pages/
• themes/
• abstracts/
• vendors/

Except for pages and themes (that could be used in our docs, eg. for the Examples section) I think that could be a good candidate :)

[k-utsumi]

7-1 pattern

I think Magical Number helps Information Architecture.
https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two

I like setting it to 3-4, but I don't think it must set maximum to 7.

[ffoodd]

In fact it does, since it's not magical but describes the number of folders. You may think of .col-2 as a reference.

And at least, this pattern has a name, is documented and pretty common.

[mdo]

Punting to v6 for future discussion.

[willfaught]

Note that if the scss directory is put into a Hugo module/theme repo, "vendor" directories are omitted from that module when imported, which breaks the module. Currently, every time I update the copy of Bootstrap in my Hugo module, I have to manually patch it to rename the vendor directory to _vendor. It would be great if "vendor" directory names are avoided in the future. :)