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