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.
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
In many cases you can also combine variations to achieve multiple effects on the same component.
ui huge primary button
Class order
By specification, CSS allows to declare classnames in any order.
huge ui button primary
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
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
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.
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.
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!