How are you supposed to use it as dependency e. G. via NPM?

[akomm]

Quote from readme:

Before using source files you will need to create a theme.config by renaming theme.config.example, and a site folder by renaming _site/ to site/

So when I install it as dependency e. G. via NPM, you want me to make changes in vendor directory? The components all import theme.config from the repositories own source location, which is as dependency a vendor directory.

Normally you have:

1. Variables configuration file
2. Separate component files
3. Root file, which bundles the separate components
4. Root file, which imports 1. and then 3.

This way, you can: simply use 4. or, in my case: copy 1. in my Project folder, modify it. Import it, then import 3. - voilà. A common approach for an easy task.

My first thoughts after finding this was: Okay, maybe wrong repo which is not intended for this type of usage, but:

I'v looked through all semantic repos and could not find any repo which is themable via variables and does not introduce vendor hacking.

Sure I can just grab all the stuff and copy it into my project, or do other possible dirty things. But I work with dozens of other modules using webpack and all deps are resolved properly. I do not have vendor in VCS and if I update deps, everything is fine resolved and rebuild. Why must this repo be handled as an outsider with manual handling and dirty hacks?

Is there a reason, why the approach I'v mentioned above is not possible or used here? I assume a reason is there I'm not aware of, or its maybe planed change?

[hoverboardreviews]

I just tried installing this myself and the instruction about renaming the src and theme.config seem to be wrong. They were already changed to the proper name.

Here's my steps I took:

npm install semantic-ui-less
npm install gulp
gulp install --save-dev

Then when I tried to run gulp anything I was getting an error message about running gulp install. I then had to manually run the npm install gulp-install at this point, I can now run gulp watch and it builds it when I make changes.

This is my first project that I'm using any of these tools, (You know the scene in Zoolander where they try to use a computer? That's about what i feel like.) so I'm sure I'm not doing it the most effective or even correct way. Hope this helps you out.

[hoverboardreviews]

Also from http://learnsemantic.com/developing/customizing.html you should change the site.variables file to customize the theme. It's located at src\site\globals\site.variables . Correction, the site.variables file in that location is completely empty. I guess you're supposed to put your overrides there. The actual file with the items that you can change depends on the theme.config file. It's the one that has each element and then the theme for that element. This way you could have flat buttons and github theme for most other stuff. They start off all being set to default which makes the path to the default global variables is src\themes\default\globals\site.variables

[akomm]

Hello, thank you for a reply.

I'v read the documentation and especially the customizing page, you'v linked. The problem is, that dependend on the semantic-ui repository I use, I have to either modify vendor files or have vendor sources in my VCS and a separate "build" flow to build the actual dist files to use.

The most appropriate approach I'v picked now is using the "semantic-ui" repository with following setup:

project-root (only important stuff)

• src: js/html/scss (app)
• semantic-ui (src files, installed by semantic-ui install script)
  • dist (built output with site overrides, actually used by app)
• semantic.json

Now you see the problem? I have lot of SRC (532 objects) from semantic-ui in my app's VCS, which should be in vendor. semantic-ui/dist is in .gitignore, btw.

Additionally, I'm using webpack, which watches, builds, etc. Building stuff with gulp now outside the actuall flow now introduces separate subsystem with lots of obstacles, which could be totally avoided by the approach I'm explained in my first post.

That is why I'v tried it with semantic-ui-less, but here the access to include components and override configs is not possible, without modifying vendor files.

[subarroca]

I think this really should be adressed. It's not a valid package if config must be done inside the package.

[subarroca]

I've come with a temporary workaround

"scripts": {
    "postinstall": "npm run updatesemantic",
    "updatesemantic": "cp ./src/assets/theme.config ./node_modules/semantic-ui-less/theme.config;rm -R ./node_modules/semantic-ui-less/themes/<name>/;cp -R ./src/assets/themes/bw/ ./node_modules/semantic-ui-less/themes/<name>/",

This assumes you have:

1. Copied theme.config.example to your src/assets as them.config
2. Updated @siteFolderto 'site'
3. Copied themes/default to your src/assets/themes/<name>

With this postinstall, you're copying it to semantic and also a personalized theme so when updating packages your config will be yours again.

Also, after changing theme.config or theme/ you must run npm run updatesemantic

[nblackburn]

@jlukic Can we take a look at this is it's a major headache to work with at the moment?.

[mathieucivel]

I've come across the same issues, and used the workaround proposed by @subarroca along with some additional fixes. Everything works fine for me now, with the 2.2.3 version. Here is the full process.

1. Run npm install --save semantic-ui-less jquery
2. Copy /node_modules/semantic-ui-less/themes/default to <your_style_dir>/themes/<your_theme_name>
3. Copy /node_modules/semantic-ui-less/theme.config.example to <your_style_dir>/theme.config

4. Add @subarroca script in package.json (I adapted it to work on my side, and made it not fail if the theme folder do not exist)

   "scripts": {  
    "postinstall": "npm run updatesemantic",
    "updatesemantic": "cp <your_style_dir>/theme.config ./node_modules/semantic-ui-less/theme.config; rm -Rf ./node_modules/semantic-ui-less/themes/<your_theme_name>; cp -R <your_style_dir>/themes/<your_theme_name> ./node_modules/semantic-ui-less/themes/"

5. In your theme.config file, replace each default theme by your theme name

   /* Global */
   @site       : '<your_theme_name>';
   @reset      : '<your_theme_name>';
   
   /* Elements */
   @button     : '<your_theme_name>';
   @container  : '<your_theme_name>';
   ...

6. In <your_style_dir>/themes/<your_theme_name>/globals/site.variables, modify @imagePath and @fontPath to your local path. This should prevent the '/themes/themes' 404 error.

   /*-------------------
          Paths
   --------------------*/
   
   /* For source only. Modified in gulp for dist */
   @imagePath : '<your_style_dir>/themes/<your_theme_name>/assets/images';
   @fontPath  : '<your_style_dir>/themes/<your_theme_name>/assets/fonts';

7. Create <your_style_dir>/semantic.less, and copy content from /node_modules/semantic-ui-less/semantic.less. Add ~semantic-ui-less/ before all urls. You can then comment each module you don't want to speed up dev and prod loading time.

   /* Global */
   & { @import "~semantic-ui-less/definitions/globals/reset"; }
   & { @import "~semantic-ui-less/definitions/globals/site"; }
   
   /* Elements */
   & { @import "~semantic-ui-less/definitions/elements/button"; }
   & { @import "~semantic-ui-less/definitions/elements/icon"; }
   //& { @import "~semantic-ui-less/definitions/elements/container"; }
   //& { @import "~semantic-ui-less/definitions/elements/divider"; }
   //& { @import "~semantic-ui-less/definitions/elements/flag"; }
   ...

8. If you use webpack, add the woff/ttf/eot/svg loaders

   {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "url-loader?limit=10000&mimetype=application/font-woff" 
   },
   {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader"
   }

9. To use .js files, jQuery should be a global. If webpack :

   plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],

   Then you can

   import transitions from 'semantic-ui-less/definitions/modules/transition.js'
   import popup from 'semantic-ui-less/definitions/modules/popup.js'

10. Run npm run updatesemantic. Also run it each time you change your theme.
11. Finally import <your_style_dir>/semantic.less in your project. It should work.

[starquake]

@mathieucivel Is there a better way to do this? This feels more like automated monkeypatching.

[mboudreau]

... how is this still an issue after a year?!

[akomm]

@mboudreau It seems to me the issue has no simple fix. It would require bc breaks in the build flow and rethinking a lot. So can't blame the issue is still there.

[mboudreau]

eh, whatever, I'll just go use something that actually works then :/

[akomm]

I also slowly replaced many components from semantic with my own. But as said, can't blame anyone. And it helped me a lot bootstrap at the beginning.

I totally understand you though. I was myself sometimes totally frustrated about certain things.

The issue is that this project started in jquery era and so sticks in mentality and workflows of this time, even though the react variant has no jquery on the script side - respect for this, some other projects continued to use jquery in react implementations, which is pain in ar*e. You still notice traces of it in how css is defined and things are built.

Whats often annoying is, that components influence layout outside of their boundaries, like buttons adding margins to the outside.

On the other hand, when I compare to other projects which started about at the same time, semantic is amazing. I would not even bother try use something like bootstrap (for me its a mess, used versions 2-3 for a while) semantic is in my opinion way ahead of it.

For me https://github.com/Semantic-Org/Semantic-UI-LESS/issues/10#issuecomment-208226086 works well enough, with some components slowly replaced. Mainly use icon set and modals (with some overrides).

[astroanu]

It's 2020, more than 4 years. nothing's changed

[akomm]

Well, many things changed. I moved on to material-ui lib :)