How to customize Fomantic UI with LESS and Webpack? (applicable to Semantic UI too)

3 min readFeb 9, 2019

Introduction

Ever heard about Fomantic UI? It is likely that you did not. It is community fork of the great UI library called Semantic UI, which unfortunately got a bit abandoned at the moment and some great folks made a fork and moving forward with work which is not limited to fixing bugs! Their intention is to merge back to the main repo as soon (and obviously IF) as the development starts again.

Many people coming across FUI / SUI (I will be using these abbreviations in this article to not repeat myself with whole names every time. They obviously mean Fomantic UI / Semantic UI) quickly facing the issue with any customization and this is exactly what happened to me.

My setup

I am using FUI within my ReactJS app built on the great boilerplate from @rokoroku which is available here on Github. The key point is that I have separate webpack.config.jsso if you are using create-react-app you will probably have to eject before applying any of these.

Let’s do it!

Install required dependencies

You have to install some dependencies:

yarn add -D fomantic-ui-less less less-loader extract-text-webpack-plugin

Make sure it installed less with version >=3.0.0 as sometimes it will install 2.* by default which will get you in the troubles.

Configure Webpack to load LESS files

Open your webpack.config.jsand add the following parts:

Create a folder with the skeleton of your customization

On the root level of your project (same as src or node_modules ) create the folder called semantic-ui (or whatever, but remember to change it in aliases).

Go to: https://github.com/fomantic/Fomantic-UI-LESS and download:

_site folder,
theme.config.example file,
themes folder.

Put all of them inside created folder. Remove underscore from _site and .examplefrom theme.config .

theme.config

This file is mostly prepared but you have to change some details:

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder  : '../semantic-ui/site';



/*******************************
         Import Theme
*******************************/

@import (multiple) "~fomantic-ui-less/theme.less";
@fontPath : "../../../themes/@{theme}/assets/fonts";

/* End Config */

Last but not least: import main LESS file

You have to import semantic.less file in your entry file.

import 'fomantic-ui-less/semantic.less';

It is working now!

You can now go e.g. to semantic-ui/site/globals/site.variables and add:

@primaryColor: #002f4e;
@pageBackground: #eff0f1;

which will change your primary color and background color of the <body>.

That’s it

That is all that you need to do. Remember that after completing all steps you have to restart your Webpack because you made changes to your config which will not hot-reload.

Credits

Part of this was based on the great article from Aggelos Arvanitakis which you can find here: https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf . I had to make some research and find some fixes because it was written for Webpack 2 with SUI and also some things like readme in SUI LESS repo have been removed etc so it is not that easy to get it working.

I hope this article will help you guys with customization of the FUI/SUI using LESS.