Semantic UIJason

Semantic UI● Front-end framework

● Started in 2013

● Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

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.

Concise HTMLBootstrap

<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>

Intuitive Javascript● Semantic uses simple phrases called behaviors that trigger

functionality.

$('select.dropdown')

.dropdown('set selected', ['meteor', 'ember']);

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 });

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>

Build ToolsProcess 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

Folder Structure

Types of ComponentsElement : Button、 Fag、 Icon、 input...

Collection : Form、 Grid、 Menu、 Table...

View : Card、 Advertisement、 Feed...

Module : Dropdown Modal Progress、 Tab、 Sidebar...

Behavior : API、 From Validation...

Custom Theme

Site.overrides

Site.variables

theme.config

Semantic.css

semantic.min.css

Gulp build

Using Packaged Themessrc/theme.config

Sitewide Defaultssite/globals/site.variables

Component Defaultssite/modules/checkbox.variables

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

CSS Write OrderCSS compiled from src/definitions/elements/button.less

CSS compiled from src/themes/{themeName}/elements/button.overrides

CSS compiled from src/site/elements/button.overrides

ReferenceLearn semantic

http://learnsemantic.com/

Semantic-ui

http://semantic-ui.com/