If you come here, we suppose you know what HTML and CSS are and have heard of Semantic-UI, that’s enough and let’s get started!
If you do not want to delve into
<html> <head> </head> <body> <div> Default </div> <div> <div> Item A </div> <div> Item B </div> <div> Item C </div> </div> </body> </html>
It looks like this:
Download the prebuilt Semantic-UI CSS and JS files
Those files are in the official Semantic-UI repository on GitHub: https://github.com/Semantic-Org/Semantic-UI/tree/master/dist
What we need here are
semantic.min.js, add them to the header:
<head> <link href="./semantic.min.css" rel="stylesheet" type="text/css"> <script src="./jquery.min.js"></script> <script src="./semantic.min.js"></script> </head>
Surely you detect the
For convenience, here is a link to jQuery library: https://code.jquery.com/jquery-3.1.1.min.js
ui classes for
<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>
The page then looks like this now:
So you may be able to conclude that,
button means a button style element,
label means a label style element and etc.. In Semantic-UI, all you need is merely the powerful keyword
The directory structure is intuitive:
This example just show how you start to use Semantic-UI from scratch, for more detailed documentations on button, label, menu, grid, and other 50+ components, please refer to the official doc site: https://semantic-ui.com
If you feel comfortable with
npm modules and building tools like
gulp, that’s fantastic, it’s also extremely convenient to use Semantic-UI with these tools.
Again, we start with the same
index.html in the current working directory:
If you do not install
gulp yet, you can install it globally in your computer:
npm install -g gulp
It will ask you for some information like project name, but you could press Enter to skip them all. The command will create a file named
package.json in the current directory.
Don’t forget to do this initialization, or you may get trapped into some tricky directory path problems.
npm install --save semantic-ui
This will takes several minutes according to the network. After this, the directory has 3 more items:
And you can look up the structure of the
Build Semantic-UI CSS and JS
cd semantic gulp build
If your installed
gulp is good to use, this procedure will take about 20 seconds on a laptop with decent hardware.
The cookie is ready now:
Add prebuilt CSS and JS to your 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>
Just for explanation here, in fact it’s better to put the second
script line at the end of body tag for faster page loading, you know that.
Everything is good to go, the rest is completely the same as the first example, play freely with
ui classes in your HTMl elements as you like.
Next time, we will show you how to cut the size of
semantic.min.js by removing unused components, and apply Gzip compression on these files with Nginx to boost your websites’ performance.