semantic-uiGetting started with semantic-ui


Remarks

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.

Versions

VersionRelease Date
[2.2.10]2017-03-28
[2.2.9]2017-02-21
[2.2.8]2017-02-21
[2.2.7]2016-12-21
[2.2.6]2016-10-27
[2.2.5]2016-10-27
[2.2.4]2016-08-25
[2.2.3]2016-08-21
[2.2.2]2016-07-07
[2.2.1]2016-06-27
[2.2.0]2016-07-26
[2.1]2015-09-02
[1.12]2015-04-13
[1.0]2014-11-24
[0.1]2013-09-25

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!