Semantic UI Jason
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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/
Related Documents
