Semantic UI Introduction

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