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 .

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 >= v8
  • NPM >= v5

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


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 it will start the Fomantic-UI interactive installation prompt. 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.8.2" ... }

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.

$ 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 comand

$ 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.8.2/dist/semantic.min.css

https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.2/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