semantic ui introduction
TRANSCRIPT
Semantic UI
Semantic UIDesign Beautiful Websites QuickerSemantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
What is Semantic UI?Its a Frontend Framework like Boostrap or Foundation.
You apply class names to HTML elements and you get a nice looking webpage.
50+ UI elements3000 + CSS variablesBuilt with EM values for responsive designFlexbox friendly
What does it consist of?
15 61615Behaviors
APIForm ValidationVisibility
Why Semantic UI ?Ease of UseSemantic UI allows you to jump right in and makes rapid prototyping a breeze.
Get more, right out of the boxGet the essentials that every other front-end framework provides and then some: Cards, comments, statistics and more.
Gorgeous designDifferentiate yourself and your project with a design that can be reworked, but doesn't have to be.
Websites using Semantic UIwww.snapchat.com (ghost image)www.codility.com (modal, circular, mobile sidebar)www.giftstarter.com (menu)www.whiterabbitexpress.com (buttons, menu)www.mistay.in (modal, menu)www.semantic-ui.com (everything)
Syntax? Tag Agnostic
Primary
Primary
Primary
Syntax? - Variations
Primary
Primary
Primary
Syntax? -UI Components, parts of a component.
Lots of Cool and Useful ModulesBefore we go into the live code session, let just see a few examples of why its so cool.
Shapes Modals Sidebar
Shapes (3d Transformations)
http://semantic-ui.com/modules/shape.html#/definitionDirection
Box, Flip
Text, Image, etc.
Styling
Modal
http://semantic-ui.com/modules/modal.html#multiple-modalsScrolling Modal
Multiple Modals
Transitions
Styling
Sidebar
http://semantic-ui.com/modules/sidebar.html#/examplesDirection
Overlay, Push, Scale
Multiple
Styling
Live Code (copy paste) SessionLets create a webpage with:
A top navigation menuA shape componentsA sidebar menuA modal
HTML Document
HTML Document - Head Semantic Examples
HTML Document - Script $( document ).ready(function() {});
HTML Document - Style
html, body { height: 100%; }
.ui.grid { height: 100%; }
Sidebar Show Me The Money Send Me The Money I Don't Want Your Money Your site's actual content
Toogle Sidebar
Grid
Top Navigation Home More.. Profile Logout
Shape Component This side starts visible. This is yet another side This is the last side Turn Shape
Modal Archive Old Messages Your inbox is getting full No Yes
Show Modal
Drop Down Menu Dropdown Action Another Action Something else here Separated Link $('.ui.dropdown').dropdown();
Card One Nordea Learn how to collaborate Nordea works as one unit with one goal.
24
ProsPublished under the incredibly permissive MIT License.Very well documented.Easy to learn/use.A very nice implementation of buttons, modals, & progress bars.Uses an Icon font for many of it's features.Has some very useful extras such as the inverted class.Open to community contribution.Modular structure allows you only use the parts you need.
ConsDoesnt have all components. Missing a image slider and a thumbnail class.No SASS (does have LESS)Large compared to other frameworksBrowser Support (Last 2 Versions of FF, Chrome, Safari, IE 11+)Sometimes the documentation doesnt clearly specify all options or if you have to call a JS function.
https://www.slant.co/topics/3522/viewpoints/4/~fully-featured-responsive-css-frameworks~semantic-ui#title
Semantic UI s. BootstrapSemantic Has a more modern look and more design options.Bootstrap is easy to use and requires less JS knowledge.Compareble level of quality in framework.
Semantic + Angular(2) = ?There is Actually several project creating Angular wrappers for Semantic UI.
https://github.com/vladotesanovic/ngSemantichttps://ng-semantic.herokuapp.com/#/elements/menu
https://github.com/lon-yang/angular2-semantic-uihttp://demo.yangly.cn/angular2-semantic-ui-demo/#/modal
https://github.com/edcarroll/ng2-semantic-uihttp://edcarroll.github.io/ng2-semantic-ui/#/components/progress
Read More..Main Webpagehttp://semantic-ui.com/Show Casehttps://github.com/Semantic-Org/Semantic-UI/wiki/ShowcaseTwitter feedhttps://twitter.com/semanticuiWhere can I find semantic Examples?https://www.quora.com/Semantic-UI-front-end-framework-Where-can-I-find-examples-of-websites-created-using-Semantic-UIhttp://www.builtwithsemanticui.com/http://www.semantickit.com