Semantic UI Introduction

Semantic UI
Design Beautiful Websites Quicker
Semantic is a development framework that helps create beautiful,
responsive layouts using human-friendly HTML.

What is Semantic UI?
• It’s a Frontend Framework like Boostrap or Foundation.
• You apply class names to HTML elements and you get a nice looking
webpage.
• 50+ UI elements
• 3000 + CSS variables
• Built with EM values for responsive design
• Flexbox friendly

What does it consist of?
15 6 16 15
Behaviors
API
Form Validation
Visibility

Why Semantic UI ?
Ease of Use
Semantic UI allows you to jump right in and makes rapid prototyping a breeze.
Get more, right out of the box
Get the essentials that every other front-end framework provides and then some:
Cards, comments, statistics and more.
Gorgeous design
Differentiate yourself and your project with a design that can be reworked, but
doesn't have to be.

Websites using Semantic UI
• www.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
<a class="ui button">Primary</a>
<div class="ui basic blue button">Primary</div>
<button class="ui basic button">Primary</button>

Syntax? - Variations
<button class="ui button">Primary</button>
<button class="ui basic blue button">Primary</button>
<button class="ui basic button">Primary</button>

Syntax? -UI Components, parts of a
component.
<div class="ui grid">
<div class="four wide column"></div>
</div>

Lots of Cool and Useful Modules
Before 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#/definition
Direction
Box, Flip
Text, Image, etc.
Styling

Modal
http://semantic-ui.com/modules/modal.html#multiple-modals
Scrolling Modal
Multiple Modals
Transitions
Styling

Sidebar
http://semantic-ui.com/modules/sidebar.html#/examples
Direction
Overlay, Push, Scale
Multiple
Styling

Live Code (copy paste) Session
Lets create a webpage with:
• A top navigation menu
• A shape components
• A sidebar menu
• A modal

HTML Document
<html>
<head>
</head>
<body>
</body>
</html>

HTML Document - Head
<title>Semantic Examples</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-
ui/2.2.6/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>

HTML Document - Script
<script>
$( document ).ready(function() {
});
</script>

HTML Document - Style
<style>
html, body {
height: 100%;
}
.ui.grid {
height: 100%;
}
</style>

Sidebar
<div class="ui left vertical inverted menu sidebar">
<a class="item">Show Me The Money</a>
<a class="item">Send Me The Money</a>
<a class="item">I Don't Want Your Money</a>
</div>
<div class="pusher">
Your site's actual content
<div class="ui hidden divider"></div>
<button class="ui violet basic button" onClick="$('.ui.sidebar').sidebar('toggle');">Toogle
Sidebar</button>
</div>

Grid
<div class="ui three column stackable grid">
<div class="blue column"></div>
<div class="column center aligned">
</div>
<div class=" blue column"></div>
</div>

Top Navigation
<div class="ui inverted menu">
<div class="item">Home</div>
<div class="item">More..</div>
<div class="right menu">
<div class="item">Profile</div>
<div class="item">Logout</div>
</div>
</div>

Shape Component
<div class="ui shape">
<div class="sides">
<div class="active side">This side starts visible.</div>
<div class="side">This is yet another side</div>
<div class="side">This is the last side</div>
</div>
</div>
<button class="ui violet basic button" onClick="$('.shape').shape('flip up');">Turn
Shape</button>

Modal
<div class="ui basic modal">
<i class="close icon"></i>
<div class="header"> Archive Old Messages </div>
<div class="image content">
<div class="image"> <i class="archive icon"></i> </div>
<div class="description"> <p>Your inbox is getting full</p> </div>
</div>
<div class="actions">
<div class="two fluid ui inverted buttons">
<div class="ui cancel red basic inverted button"> <i class="remove icon"></i> No </div>
<div class="ui ok green basic inverted button"> <i class="checkmark icon"></i> Yes </div>
</div>
</div>
</div>
<button class="ui violet basic button" onClick="$('.ui.basic.modal') .modal('show') ;">Show Modal</button>

Drop Down Menu
<div class="ui dropdown item" tabindex="0">
Dropdown
<i class="dropdown icon"></i>
<div class="menu transition hidden" tabindex="-1">
<div class="item">Action</div>
<div class="item">Another Action</div>
<div class="item">Something else here</div>
<div class="divider"></div>
<div class="item">Separated Link</div>
</div>
</div>
$('.ui.dropdown').dropdown();

Card
<div class="ui card">
<div class="image">
<img src="http://assets.bwbx.io/images/users/iqjWHBFdfxIU/ilPgpXtm.6_E/v1/-1x-1.jpg">
</div>
<div class="content">
<div class="header">One Nordea</div>
<div class="meta">
<a>Learn how to collaborate</a>
</div>
<div class="description">
Nordea works as one unit with one goal.
</div>
</div>
</div>

Pros
• Published 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.

Cons
● Doesn’t have all components. Missing a image slider and a
thumbnail class.
● No SASS (does have LESS)
● Large compared to other frameworks
● Browser Support (Last 2 Versions of FF, Chrome, Safari, IE 11+)
● Sometimes the documentation doesn’t 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. Bootstrap
• Semantic 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/ngSemantic
● https://ng-semantic.herokuapp.com/#/elements/menu
● https://github.com/lon-yang/angular2-semantic-ui
● http://demo.yangly.cn/angular2-semantic-ui-demo/#/modal
● https://github.com/edcarroll/ng2-semantic-ui
● http://edcarroll.github.io/ng2-semantic-ui/#/components/progress

Read More…..
Main Webpage
http://semantic-ui.com/
Show Case
https://github.com/Semantic-Org/Semantic-UI/wiki/Showcase
Twitter feed
https://twitter.com/semanticui
Where can I find semantic Examples?
https://www.quora.com/Semantic-UI-front-end-framework-Where-can-I-find-examples-of-websites-created-using-Semantic-UI
http://www.builtwithsemanticui.com/
http://www.semantickit.com

Semantic UI Introduction

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Semantic UI Introduction (20)

Recently uploaded (19)

Semantic UI Introduction