Menu

Getting Started
Getting up and running with Fomantic-UI

This page contains detailed guides on how to get started using Fomantic-UI. If you have any problems or questions please open a issue on the GitHub repository .

General Usage

Descriptive classnames

The base concept of Fomantic-UI is adding descriptional classnames to HTML nodes

ui primary button
Button
The ui class is used as namespace to avoid problems when additional custom CSS is used.

In many cases you can also combine variations to achieve multiple effects on the same component.

ui huge primary button
Button

Class order

By specification, CSS allows to declare classnames in any order.

huge ui button primary
Button

However, some combinations of FUI classnames MUST be declared in a strict predefined order divided by ONE space character. This is sometimes needed to avoid description confusion when the same classnames are used but have a different meaning.

ui left labeled right floated button
Labeled
Button

If the classes are given unordered, the CSS selectors get confused and FUI does not know what the description means, thus the styling is broken.

ui left right button floated labeled
Labeled
Button
Where should the button be floated? Left or right?
Where should the button be labeled? Left or right?

Some examples are labeled by Word order required to indicate the word order necessity.

So, as a general advise, just declare the classname order like a grammatical correct spoken description.

Use <>

While there are situations where a strict ordered class name list is important, in most cases it isn't. If in doubt, always watch out for the <> symbol displayed to the right of the examples which shows the source code when clicked and highlights a possible required classname order.

Labeled
Button

Installation

You can install Fomantic-UI via NPM or one of our CDN providers. You can also host the distribution files locally if you prefer to.

If you want to use theming you must install Fomantic-UI with NPM this ensures you get all the files needed to create and manage your theme.

Installing via NPM

Requirements
  • NodeJS >= v12
  • NPM >= v6

You can download NodeJS here, NPM is installed with NodeJS.

Fomantic-UI also supports yarn as alternative package manager.

Once you have NodeJS and NPM installed, you will need to install Fomantic-UI as a dependency of your project.

If you haven't already, create a package.json file with the following command

$ npm init

The package.json file will keep track of your dependencies and their versions. If you want to learn more about the package.json file you can here.

To install Fomantic-UI run the following command

$ npm install fomantic-ui

Or try living on the edge and give our nightly build a test and try new features and bug fixes early!

$ npm install fomantic-ui@nightly

When NPM finishes installing, a precompiled version of Fomantic-UI is already available inside the dist folder. Starting from 2.9.0, the interactive installation prompt will not start automatically after npm install anymore. If you need a custom installed version of Fomantic-UI, you have to manually run the following right after npm install

$ cd node_modules/fomantic-ui $ npx gulp install

The installation prompt is used to create your semantic.json file which stores critical information for when you need to install Fomantic-UI and also about the build process. It will also create a new directory containing all the files needed to create a theme. The directory will be created where you specified in the installation prompt.

Once complete it will also add the following to your package.json file

"dependencies": { ... "fomantic-ui": "^2.9.3" ... }

Now you will need to build your distribution of the CSS and JavaScript you use on your website. To do this run the following command inside the directory created by the installer. This is semantic/ by default.

$ cd semantic/ $ npx gulp build

Once complete you should have a new directory dist/ which contains all the CSS and JavaScript files. You can now include these in your web page and start using Fomantic-UI.

Using a CDN provider

Fomantic-UI is available on the top 3 popular CDN providers.

CSS, LESS & SASS distributions

Fomantic-UI provides a separate repository for a CSS, LESS & SASS only distributions.


You can install both CSS and LESS via NPM or download any of them and use them in your project as local files.

$ npm install fomantic-ui-css
$ npm install fomantic-ui-less

Updating

Updating NPM Installation

If you are using Fomantic-UI via NPM you can simply run the following command

$ npm update fomantic-ui

This will install the latest version and will run the interactive installer to install any new files which are required. You will need to rebuild Fomantic-UI after the installer has finished.

To build the distribution files for the latest version run the following command in your fomantic directory

$ npx gulp build

Updating CDN

If you are using a CDN provider updating is simple, just change the version number in your CDN url.

https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css

https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js

Updating CSS, LESS & SASS Distributions

If you are using the CSS or LESS distributions via NPM you can run the following command

$ npm update fomantic-ui-css
$ npm update fomantic-ui-less

If you have the files downloaded locally you will have to download the latest version and replace your local files with the latest ones.

Resources

This is a list of some useful resources about Fomantic-UI. If you find any resources or want to add something you created feel free to create a pull request here!

Dimmer Message
Dimmer sub-header