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

Marek Urbanowicz
Feb 9, 2019 · 3 min read

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.

Image for post
Image for post

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 so if you are using 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 with version as sometimes it will install by default which will get you in the troubles.

Configure Webpack to load LESS files

Open your and add the following parts:

Create a folder with the skeleton of your customization

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

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

  • folder,
  • file,
  • folder.

Put all of them inside created folder. Remove underscore from and from .

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 file in your entry file.

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

It is working now!

You can now go e.g. to and add:

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

which will change your primary color and background color of the .

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store