Getting started with semantic-ui


This section provides an overview of what semantic-ui is, and why a developer might want to use it.

It should also mention any large subjects within semantic-ui, and link out to the related topics. Since the Documentation for semantic-ui is new, you may need to create initial versions of those related topics.


VersionRelease Date

Installation via NodeJS - Recommended

Installation via NodeJS is the recommended method. It is preferred because you can use it to build the files selecting just the components you want.

Step 1: Install Node (Link)

Step 2: Install Gulp globally ( -g ) on your computer

npm install -g gulp

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

Step 3: Install Semantic-UI locally for your project

cd /path/to/your/project

npm install semantic-ui --save

Step 4: Navigate to the folder where semantic-ui was saved and run the following gulp task (This may be automatically done)

cd node_modules/semantic-ui    
gulp install

This will launch the interactive installer. Just follow the instructions to select the SUI elements that you want and it will build the relevant files for you.

  • You will first have to choose the type of installation.First time users can choose the Automatic Mode to build SUI
  • Then you will have to specify the project folder and where you would like to save SUI (default is semantic/)
  • In case of Custom installation, you will get the option to pick the components you want.

Step 5: Link to your HTML

Link the compiled CSS and JavaScript file in your HTML

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>

All done!

This modified text is an extract of the original Stack Overflow Documentation created by the contributors and released under CC BY-SA 3.0 This website is not affiliated with Stack Overflow