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 .
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
- 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
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
To install Fomantic-UI run the following command
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
website. To do this run the following command inside the directory created by the installer.
semantic/ by default.
Once complete you should have a new directory
dist/ which contains all the CSS
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.
Updating NPM Installation
If you are using Fomantic-UI via NPM you can simply run the following comand
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
If you are using a CDN provider updating is simple, just change the version number in your CDN url.
Updating CSS, LESS & SASS Distributions
If you are using the CSS or LESS distributions via NPM you can run the following command
If you have the files downloaded locally you will have to download the latest version and replace your local files with the latest ones.
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!