The semantic UI is an open source CSS and JavaScript framework that provides some well-designed interface components that you can use directly in your project. It also provides a convenient way to customize the theme, and you can change the style of the interface components with your own ideas. In this tutorial we learn to install the semantic UI.
Preparation Tools
You need to use the command line to install, Windows with Powershell, Mac use terminal. Then make sure you've installed NPM and gulp.
Installing the semantic UI
First create a directory for the project, and then go to the following directory, such as I am on my desktop to create a directory for the project:
CD ~/desktop
mkdir ninghao-semantic
CD ninghao-semantic
Use NPM to install the semantic UI:
NPM Install Semantic-ui
After a while, you will be prompted to set the semantic UI, press up and down arrows to select:
❯automatic (use defaults locations and all components)
Express (Set components and output folder)
Custom (Customize all src/dist values)
Automatic: Automatic configuration, all with the default settings.
Express: Fast settings, only need to set up components and output of the directory.
Custom: Customize to define the Src/dist directory entirely by yourself.
Select the default Automatic, enter execution, and prompt:
[?] We detected you are using NPM. nice!
Is this your project folder?
/users/xiaoxue/desktop/ninghao-semantic (use arrow keys)
❯yes
No, let me specify
Ask us on the desktop ninghao-semantic This directory is not the directory of my Items, Yes, and then enter to perform. Tips:
[?] Where should we put semantic UI inside your project? (semantic/)
The meaning is to put the semantic UI under which directory in the project directory, the default directory is semantic. Carriage return execution, will complete the installation, view the items under the project directory, you will see:
Node_modules Semantic Semantic.json
Go to the semantic directory below, and then execute the compiled command.
CD semantic
Gulp Build
The compiled semantic UI is placed underneath the dist directory. This directory has the following items:
Components Semantic.js Semantic.min.js
Semantic.css Semantic.min.css Themes
The components directory is a separate component, and if you only want to use some of the components in the semantic UI, you can find them under this directory. If you want to use all of the components, you can use SEMANTIC.CSS and semantic.js, or use their minimized version, Semanitc.min.css and Semantic.min.js.
Task
Under semantic This directory, there is a file called Gulpfile.js, in this file defines a number of tasks that can be performed, such as we used the gulp build to compile the semantic UI, you can also edit the semantic UI CSS Or JavaScript, perform the task you need under the project semantic under the directory below.
Compiling CSS
Gulp Build-css
Compiling JavaScript
Gulp Build-javascript
Automatic compilation
You can get the semantic UI to compile automatically, and when you modify some files, you automatically perform tasks to compile the semantic UI and perform tasks:
Gulp Watch
Basic structure
You can create an HTML file underneath the root of the project, embed the CSS and JavaScript you need in the file, and practice the semantic UI.
For example, under the root directory of the project, create a file with a name of index.html, which is probably like this:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>semantic ui</title>
<link rel= "stylesheet" href= "Http://ninghao.net/semantic/dist/semantic.min.css" >
<body>
<!--YOUR CODE-->
<script src= "Http://ninghao.net/javascript/jquery.min.js" ></script>
<script src= "Http://ninghao.net/semantic/dist/semantic.min.js" ></script>
</body>
Some of the components of the semantic UI need to be jQuery, we create a directory under the project, name JavaScript, and then put the jquery.min.js underneath node_modules/jquery/dist into JavaScript. Below the directory.
CD ~/desktop/ninghao-semantic
mkdir JavaScript
MV Node_modules/jquery/dist/jquery.min.js javascript/
Auto Refresh
Open the project's directory with the Atom editor, and then you can use Browsersync to monitor changes to the index.html file under the project so that you don't have to manually refresh the browser to see the changes after you modify the document.
Install Browsersync
NPM install-g Browser-sync
Creating servers and monitoring file changes
CD ~/desktop/ninghao-semantic
Browser-sync start--server--no-notify--files "index.html"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
