Why is theming so complicated

[s-devaney]

I just want to modify a few variables like primary colour to better match my brand

1. Why do I have to run gulp install and have hundreds of generated fomantic source code files (src/definitions etc) polluting my project when all I need to change is a site.variables file to change some colours?
2. Why are the files I need to customise buried 3 levels deep inside the semantic/ folder making it impossible to .gitignore the generated files I don't need?
3. When I clone my repo again why does gulp install ask me AGAIN if it wants me to customise the install when there is already a semantic.json file at the project root
4. How do I update the files in semantic/ when a new version of fomantic-ui is released???

This page here has to be the most useless page of documentation in the ENTIRE project: https://fomantic-ui.com/usage/theming.html

[lubber-de]

1. Why do I have to run gulp install and have hundreds of generated fomantic source code files (src/definitions etc) polluting my project when all I need to change is a site.variables file to change some colours?

Because:

• the LESS files need to be compiled into CSS files and just changing the site.variables alone won't do anything unless you are using LESS.js directly in your browser instead of using the generated semantic.css file
• variables inside site.variables are consumed in several other ui elements less files. For example changing the primary color needs to generate a class for each possible colorable element as the color is used as background, color, border-color, box-shadow, hover-color .... depending on the ui element.

You might take a look / use the https://github.com/fomantic/Fomantic-UI-LESS repo instead, which does not use gulp at all. However you would need your own LESS compilation somewhere inside your build stack (or, as said above, use in-browser-on-the-fly-compilation via https://lesscss.org/usage/#using-less-in-the-browser )

A future version of fomantic will completely switch to CSS variables so you would only need to change one line of your code and dont need gulp at all. But this takes time.
Fomantic is currently being refactored at several places step by step to achieve this goal eventually but staying compatible.

2. Why are the files I need to customise buried 3 levels deep inside the semantic/ folder making it impossible to .gitignore the generated files I don't need?

You should be able to declare a nested folder and wildcard like /semantic/**/*.variables inside .gitignore according to your needs.
See https://git-scm.com/docs/gitignore

3. When I clone my repo again why does gulp install ask me AGAIN if it wants me to customise the install when there is already a semantic.json file at the project root

Try to add "autoInstall": true, to your semantic.json. See https://fomantic-ui.com/introduction/build-tools.html#auto-install--continuous-integration

4. How do I update the files in semantic/ when a new version of fomantic-ui is released???

By again running gulp install, it should detect the upgraded FUI version and rebuild the files accordingly

This page here has to be the most useless page of documentation in the ENTIRE project: fomantic-ui.com/usage/theming.html

You are welcome contributing to the project according to your experience to improve the docs by providing proper PRs inside the Docs repo