I want to give a nice look&feed to my side project video game tris3d which uses React, Redux and three.js for its frontend. Semantic-UI is really a great piece of software and recently was released the
The official Semantic-UI-React integration
What I need is to use React components provided by integration, but, using a custom css to ha ve a customizable look&feel.
How to build
Install gulp globally
npm install gulp -g
Install Semantic-UI and follow interactive instructions
npm install semantic-ui
I do not recommend to use a
--save-dev 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 tris3d theme and customize it
cp -R semantic/src/themes/default/ semantic/src/themes/tris3d/
In particular, I started changing some color in semantic/src/themes/tris3d/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/tris3d/assets/fonts'; +@imagePath : '../../themes/tris3d/assets/images';
Configure build to use tris3d theme, editing file semantic/src/theme.config. You can change default to tris3d, for example using vi with this command
vi semantic/src/theme.config +%s/default/tris3d/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/tris3d # build files git add semantic.json git add -f semantic/src/theme.config git add -f semantic/src/themes/tris3d/
Edit your .gitignore.
cat <<GITIGNORE >> .gitignore # Semantic custom files and dist. !semantic/src/theme.config !semantic/src/themes/tris3d/ !semantic/dist/semantic.min.css !semantic/dist/themes/tris3d/ 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] 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.