Semantic-UI is really a great piece of software and recently was released
The official Semantic-UI-React integration
What I need is to use React components provided by integration, but, using a customized look&feel. My theme name is called, for instance, my-theme.
How to build
Install gulp globally
npm install gulp -g
Install Semantic-UI and follow interactive instructions
npm install semantic-ui --no-save
I recommend to use a
--no-save flag here, otherwise everytime you
npm install you will be prompted into the interactive setup.
Furthermore, file semantic.json will be generated with a
Create a my-theme theme and customize it
cp -R semantic/src/themes/default/ semantic/src/themes/my-theme/
In particular, I started changing some color in semantic/src/themes/my-theme/globals/site.variables.
If you are not going to use the flags component you can remove the images/flags.png from your assets: this will save ~27kb.
Just make sure you do not select it during setup.
Another important trick to get started is to change images and fonts path
-@imagePath : '../../themes/default/assets/images'; -@fontPath : '../../themes/default/assets/fonts'; +@fontPath : '../../themes/my-theme/assets/fonts'; +@imagePath : '../../themes/my-theme/assets/images';
Configure build to use my-theme theme, editing file semantic/src/theme.config. You can change default to my-theme, for example using vi with this command
vi semantic/src/theme.config +%s/default/my-theme/g
Create a semantic/.gitignore to preserve semantic/ folder and ignore everything except files we need, added to root gitignore
echo \* > semantic/.gitignore git add -f semantic/.gitignore
cd semantic gulp build-css gulp build-assets cd ..
Add to versioning dist files and other files needed to build.
# dist files git add semantic/dist/semantic.min.css git add semantic/dist/themes/my-theme # build files git add semantic.json git add -f semantic/src/theme.config git add -f semantic/src/themes/my-theme/
Edit your .gitignore.
cat <<GITIGNORE >> .gitignore # Semantic custom files and dist. !semantic/src/theme.config !semantic/src/themes/my-theme/ !semantic/dist/semantic.min.css !semantic/dist/themes/my-theme/ GITIGNORE
To force setup to run again, you can launch
rm -rf semantic/src/definitions/ npm explore semantic-ui gulp install
Note that the dist folder semantic/dist can be configured in your semantic.json during interactive setup. For example you could use a public folder, since files
must be served statically.
You are done
Now that you have your custom CSS assets built with Semantic-UI you just need to do
npm install semantic-ui-react --save-dev
and start using Semantic-UI-React that is really cool, trust me! As a bonus, you don’t need jQuery to make your React components work with Semantic-UI.