Menu

Getting Started
Getting up and running with Fomantic UI

Preface

Using Build Tools

Fomantic UI packaged Gulp build tools so your project can preserve its own theme changes.

The easiest way to install Fomantic UI is our NPM package which contains special install scripts to make setup interactive and updates seamless.

For installing with specific integrations like Ember, React, or Meteor, see our integration guide

For integrating Fomantic UI tasks into your own build tools, or using a CDN see our recipes section.

Installing

Install NodeJS

If you are unfamiliar with setting up NodeJS you can follow the steps below, or check out the download page on nodejs.org

Option 1: Homebrew

After installing homebrew

brew install node

Option 2: Git

git clone git://github.com/nodejs/node.git cd node ./configure make sudo make install

Install via PPA

Although Chris Lea's PPA was once the best way to install node, it is now somewhat out of date.

The recommended path to install Semantic UI is using Joyent's package manager guide.

Ubuntu

curl --silent --location https://deb.nodesource.com/setup_6.x | sudo bash - sudo apt-get install --yes nodejs

Debian

apt-get install curl curl --silent --location https://deb.nodesource.com/setup_6.x | bash - apt-get install --yes nodejs

Red Hat

curl --silent --location https://rpm.nodesource.com/setup | bash - yum -y install nodejs

Install the exe

Download the NodeJS executable.

Install Gulp

Semantic UI uses Gulp to provide command line tools for building themed versions of the library with just the components you need.

Gulp is an NPM module and must be installed globally

npm install -g gulp

Install Semantic UI

Fomantic UI is available in an eponymous package on NPM

npm install fomantic-ui --save cd semantic/ gulp build

Include in Your HTML

Running the gulp build tools will compile CSS and Javascript for use in your project. Just link to these files in your HTML along with the latest jQuery.

<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Semantic --> <link rel="stylesheet" type="text/css" href="/path/to/fomantic/dist/semantic.min.css"> <script src="/path/to/fomantic/dist/semantic.min.js"></script>

Updating

Updating via NPM

Semantic's NPM install script will automatically update Semantic UI to the latest version while preserving your site and packaged themes.

npm update

Next Steps

All Set!

Well done! Fomantic UI is now ready to be used.

See how to use gulp commands and build tools
Learn about changing themes
See recipes for using Fomantic UI in your project

Dimmer Message
Dimmer sub-header