Semantic UI’s default styling is great, but it’s not the end-all/be-all of web design. Semantic’s versatility in terms of build options is great for quickly deploying something beautiful, but it’s confusing when you want to customize it with your own fonts/colors/etc.
This blog post contains the recipe I used for going from default Semantic UI settings to a “Hello World” page using Arial instead of Lato as the site-wide font- kind of a “Hello World” for styling. It assumes you already have experience deploying React apps with
create-react-app and have some familiarity with Semantic UI.
Create the React App
create-react-app to build your basic front-end. Nothing unusual here.
Gulp is Semantic UI’s task runner. In layman’s terms: when you customize your Semantic Build, Gulp will merge and minify it into
semantic.min.css, etc. so your app can refer to a single file for custom styling or other tweaks.
npm install gulp to install it.
Install Semantic UI
Semantic has various configurations of how to do this, depending on your level of customization.
npm install semantic-ui-react to use Semantic as a library of React components.
npm install semantic-ui to deploy a fully-customizable Semantic build. The docs suggest doing a
yarn add instead of
npm install, but Yarn failed to actually install Semantic (it’s a known issue right now).
Express Setup when Semantic prompts you. The
create-react-app build right now requires you to install Semantic UI in your project’s
example-app/src/ directory (as opposed to your root
example-app/ directory, which is the Automatic install setting).
Semantic UI needs to live inside
example-app/src/semantic/ because your
create-react-app instance won’t have permission to look outside the
Build Your Semantic Library
gulp build inside
example-app/src/semantic/ to create your default Semantic install.
gulp watch inside
example-app/src/semantic/ to have Gulp automatically update Semantic when you make changes to your theme.
Customize your Site theme
Now we’re operating within
example-app/src/semantic/. The docs can get confusing because Semantic UI has its own
/src/ directory as well. For brevity at this point, keep in mind when I refer to
/semantic/src/ I’m talking about
You can customize the site theme at
src/site/. This can be confusing because you’d think your theming should take place in
src/themes/ cuz logic.
Without diving down a rabbit hole about theming options, I choose to customize the site theme because it has the final say on how your CSS comes out. The site theme overrides everything that comes before it.
/site/globals/ you’ll find a file called
site.variables, which is where we’ll finally change some base styles.
Drop in this snippet to change the theme font to Arial:
@emSize: 13px; @fontSize: 13px; @fontName: 'Arial';
Import Semantic UI CSS
Within your app’s
src/index.js file, add the following import line:
This is the minified CSS file your Gulp task runner will build whenever you make changes to your site theme.
Errors? Outta Luck.
Don’t expect any indication you’ve done something wrong when editing your Semantic UI theme. If it doesn’t like your CSS for any reason, Semantic will default back to its original settings.