Link : https://www.zhihu.com/question/32233356/answer/196799506
Source: Zhihu The
copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.
This answer will explain how to use Semantic-UI from scratch in two ways, the first of which only requires the reader to understand the most basic HTML syntax.
Method 1: Without npm
For beginners, tools like node, npm, gulp can cause a lot of trouble, which is called "dependency hell". If you don't want to use these tools, you can simply add the Semantic-UI precompiled CSS and JavaScript files to the HTML <head> element, just as you would add jQuery.min.js.
1. Create index.html
<html>
<head>
</head>
<body>
<div>
Default
</div>
<div>
<div>
Item A
</div>
<div>
Item B
</div>
<div>
Item C
</div>
</div>
</body>
</html>
The page now looks like this:
2. Download the CSS and JS files
Semantic-UI has prepared CSS and JS files for download in the repository on GitHub: https://github.com/Semantic-Org / Semantic -UI/tree/master/dist
What we currently need are the two files semantic.min.css and semantic.min.js, and add them to the head of the HTML:
<head>
<link href="./semantic.min.css" rel="stylesheet" type="text/css">
<script src="./jquery.min.js"></script>
<script src="./semantic.min.js"></script>
</head>
You will find a jquery.min.js in the middle. Yes, if you want to use the advanced functions of Semantic-UI involving JavaScript, such as tab, progress, sticky, API, etc., you must add the jQuery library. This is Semantic- All dependencies required by the UI.
Here is a jQuery link : https://code.jquery.com/jquery-3.1.1.min.js
3. Set the ui class for the div element
<body>
<div class="ui button">
Default
</div>
<div class="ui menu">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</div>
</body>
Then go to the browser to refresh, you can see:
You will find that "ui button" represents a button, and "ui menu" is a menu, and so on, "ui label" is a label, "ui input" is an input box, and so on. So when using Semantic-UI, the most important magic keyword is "ui".
The current directory structure (folders) is also very intuitive and easy to understand:
This example shows how to use Semantic-UI from scratch, including directory structure, HTML structure. In addition to buttons and menus, Semantic-UI currently supports more than 50 common UI components on websites. For detailed documentation, please visit the official website: https://semantic-ui.com
Recorded a simple video, temporarily put it on YouTube (English), if you are interested, please click:
https://www.youtube.com/watch?v=JyBKcfLUabc
Method 2: Use npm
If you already have some experience with front-end development, are at least familiar with npm, and have heard of gulp, it will be easier to use Semantic-UI in your projects.
For the sake of simple example, still just use a basic index.html:
If you don't have gulp installed, install it with this command:
npm install -g gulp
1. Npm project initialization
npm init
This step is very important, and newbies usually miss it, causing a lot of trouble with file paths later. After entering this command, it will prompt you to enter the project name and other information, just click OK and use the default value. After the end, a package.json file will be created in the current directory.
2. Install Semantic-UI
npm install —-save semantic-ui
Depending on the internet speed, it may take a few minutes to ten minutes. After the installation is complete, there will be 3 more entries in the current directory:
You can check the semantic/ directory details:
3. Compile the CSS and JS files of Semantic-UI
cd semantic
gulp build
If you installed gulp without any problems, on a well-configured computer, this step will take about 20 seconds, sometimes slightly longer.
So everything is ready:
4. Add the compiled CSS and JS to the HTML header
<head>
<link href="./semantic/dist/semantic.min.css" rel="stylesheet" type="text/css">
<script src="./jquery.min.js"></script>
<script src="./semantic/dist/semantic.min.js"></script>
</head>
Compared with the first example, only the file paths of semantic.min.css and semantic.min.js are modified. This is for the convenience of illustration, if it is actually used, the <script> tag is best placed at the end of the <body> tag, you must know this.
A simple page is written and can be opened and viewed in a browser. You can add some words after "ui", label, input, etc. to see what effect it will have.
The video of this example is longer, it is 7 minutes, and there are some actual installation steps in the middle. It is temporarily placed on YouTube (in English). If you are interested, please click : https://www.youtube.com/watch?v=F_iTE_j7erw
----------------------------------------
The original address of the Chinese version of this article (knowing the column):
Building web pages with Semantic-UI from scratch - know the column
The address of the English version of this article:
Building websites with Semantic-UI from scratch
For more Semantic-UI templates, themes and tutorials, please visit:
Happy coding!