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
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.