Semantic UI is a front-end framework started in 2013 that helps create beautiful and responsive layouts using human-friendly HTML. It treats words and classes as exchangeable concepts, using syntax from natural languages for intuitive class names. Semantic UI includes tools for simplified debugging, intuitive JavaScript behaviors, and customizable themes through an installation process involving Node.js, Gulp, and included files. It has a folder structure for component types and supports custom themes, sitewide defaults, component defaults, and overrides.

1. Semantic UI
Jason

2. Semantic UI
● Front-end framework
● Started in 2013
● Semantic is a development framework that helps create beautiful,
responsive layouts using human-friendly HTML.

3. Concise HTML
● Semantic UI treats words and classes as exchangeable concepts.
● Classes use syntax from natural languages like noun/modifier
relationships, word order, and plurality to link concepts
intuitively.

4. Concise HTML
Bootstrap
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
<div class="col-lg-4">4</div>
</div>
Semantic UI
<div class="ui four column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>

5. Intuitive Javascript
● Semantic uses simple phrases called behaviors that trigger
functionality.
$('select.dropdown')
.dropdown('set selected', ['meteor', 'ember']);

6. Simplified Debugging
● Performance logging lets you track down bottlenecks without
digging through stack traces.
$('.sequenced.images .image')
.transition({
debug : true,
animation : 'jiggle',
duration : 500,
interval : 200
})
;

7. Installing
● Install NodeJS
● Install Gulp
● Install Semantic UI
● Include in Your HTML
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src=".../2.1.3/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>

8. Build Tools
Process LESS files with theming variables
Add vendor prefixes for supported browsers with autoprefixer
Watch file changes and rebuild the necessary files when adjusting themes
Automatically process asset paths, so that minified and concatenated releases can
exist in different directories
Allow custom builds with only the required components for your site
Allow advanced usage like Right-To-Left (RTL) languages using RTLCSS

9. Folder Structure

10. Types of Components
Element : Button、Fag、Icon、input...
Collection : Form、Grid、Menu、Table...
View : Card、Advertisement、Feed...
Module : Dropdown Modal Progress、Tab、Sidebar...
Behavior : API、From Validation...

11. Custom Theme
Site.overrides
Site.variables
theme.config
Semantic.css
semantic.min.css
Gulp build

12. Using Packaged Themes
src/theme.config

13. Sitewide Defaults
site/globals/site.variables

14. Component Defaults
site/modules/checkbox.variables

15. Overrides
Using a site override file for an element, allows you to make
these concessions without sullying the re-usability of the rest of
your code.
src/themes/default/elements/icon.overrides

16. CSS Write Order
CSS compiled from src/definitions/elements/button.less
CSS compiled from src/themes/{themeName}/elements/button.overrides
CSS compiled from src/site/elements/button.overrides

17. Reference
Learn semantic
http://learnsemantic.com/
Semantic-ui
http://semantic-ui.com/