Preface
Using Build Tools
Semantic UI packaged Gulp build tools so your project can preserve its own theme changes.
The easiest way to install Semantic 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 Semantic 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
Semantic UI is available in an eponymous package on NPM
npm install semantic-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.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/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! Semantic UI is now ready to be used.
See how to use gulp commands and build tools
Learn about changing themes
See recipes for using Semantic UI in your project