semantic-ui Getting 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
| Version | Release 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 - 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!
