[Docs] How to create custom components?

Hello, Semantic-UI community!

Question 1: How is the correct flow to extend the Semantic UI with a new component? The “Menu” and “Sidebar” components are not suitable for my case, so I tried to find a documentation about creating new components, but no lucky! If there is no docs for that, I suggest to create it. Or this is not the way you are working?

Question 2: As said, I am trying to create a custom “navbar” component that fits my case (there is no component with this name, so I used it).

• I have a fresh custom installation, following the docs. Everything seems good.
• First, I created a directory and file: /src/definitions/ezaca/navbar.less inspired by button.less
• After that, I updated tasks/config/defaults.js to include my navbar

gulp build worked, but my component was not included.

• Going to deeper levels, I found tasks/config/admin/realease.js with a list of components. Same result!
• After a while, I found tasks/config/project/install.js with the list of components I selected in the custom installation, so I added { name: "navbar", checked: true }

gulp build worked, but my component is never included.

I have tested other places, but it seems I have changed the entire Semantic project, but my file keeps being cruelly ignored. After some hours I realized I’m stuck and on need of community help.

How should I include a custom component in Semantic UI?

Thanks, Eliakim.

[ezaca]

I have started a clean install. Now I added “bacon” in “elements”, because Semantic loves bacon, for sure! (And it will be side-by-side to “button” element).

• Step 1: I ran gulp build to build the new install.
• Step 2: added file src/definitions/elements/bacon.less (copied from button.less)
• Step 3: added src/site/elements/bacon.overrides and bacon.variables (empty)
• Step 4: added src/themes/default/elements/bacon.overrides and bacon.variables (empty)
• Step 5: updated src/semantic.less to import bacon (line duplicated from button)
• Step 6: updated src/theme.config to include bacon (line duplicated from button)
• Step 7: updated /tasks/config/admin/release.js to include bacon
• Step 8: updated /tasks/config/project/install.js to check bacon
• Step 9: updated /tasks/config/defaults.js to include bacon
• Step 10: ran gulp build again.
• Step 11: checked dist/components/bacon.*

OK. That’s it! I think I have messed the things with the previous trial. It worked! This is the step-by-step to include CSS (Javascript requires one more step on globals to load). But steps 3 and 4 are optional. I don’t know if there are more optional steps, but it seems that everyone have their own jobs.

I hope this helps others with the same problem (and to build the docs)!

Thank you for the help, Banandrew!

(Powered by Google Translator 😄 )

[guylabbe]

@ezaca Thank you for instructions, I adjusted files in the same way and my new component is created and CSS added to semantic.css.