[Getting Started] Useing only selected CSS and JS files of the Fomantic Components

[asantech]

hi, I have installed fomantic-ui css and js files locally, but inorder to make my website lighter, i only want to have some of the components files.
The problem that i have is that the css files and js files dont work, what should i do?

[lubber-de]

The problem that i have is that the css files and js files dont work

Could you please setup a jsfiddle or at least post your (minimum) html code so we can get an idea what might be the issue?

Basically two options to only use the features you need:

Use precompiled files, if only the default theme is needed

Use the singe file components in either this repo or from the CSS only repo https://github.com/fomantic/Fomantic-UI-CSS/tree/master/components

Build FUI yourself, to get the css files even smaller or have an individual theme

Compile FUI using this repo and adjust the
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/variation.variables
file to disable element variations you don't need (for example you need buttons, but no basic buttons then set variationButtonBasic to false
You can also adjust/reducde the colors in the central file
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/colors.less

If you need emojis, but only a few of them, remove the unwanted emojis in
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/elements/emoji.overrides

Build everything by npx gulp build and use the files from the dist folder

[asantech]

hi , here is a sample https://jsfiddle.net/j78tcrLm/
I only want to use the local method (i have the selected components in a folder)
the sidebar.js works but the sidebar.css not
i put the semantic.min.css and semantic.min.js file locally and it worked , but here i only want the specific components only like the sidebar to make my websit lighter

[lubber-de]

🤔 It's basically working fine, see my adjusted fiddle.
Are you sure you have the same folder structure locally and both local files are loaded? This of course cannot be reproduced in a jsfiddle
https://jsfiddle.net/lubber/bvrth54w/4/

[Edit] You need to add menu.css and site.css as well as a minimum

[rogerio-it]

🤔 It's basically working fine, see my adjusted fiddle.
Are you sure you have the same folder structure locally and both local files are loaded? This of course cannot be reproduced in a jsfiddle
https://jsfiddle.net/lubber/bvrth54w/4/

[Edit] You need to add menu.css and site.css as well as a minimum

Hi there, how are you?

I'm facing the same problem; I couldn't load "modal" component

Could you help me?

I just only to use "modal" component without the others

[lubber-de]

@rogerio-it
What is the error message in the console? Please provide a jsfiddle with your current code.
My dry guess is that modal also needs transition and of course jquery.

[rogerio-it]

Hi friend ,

The problem was solved

Added transition and dimmer components with modal.

Everything is working fine right now

Thanks for helping me