Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Semantic UI
Design Beautiful Websites Quicker
Semantic is a development framework that helps create beautiful,
responsive ...
What is Semantic UI?
• It’s a Frontend Framework like Boostrap or Foundation.
• You apply class names to HTML elements and...
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, righ...
Websites using Semantic UI
• www.snapchat.com (ghost image)
• www.codility.com (modal, circular, mobile sidebar)
• www.gif...
Syntax? – Tag Agnostic
<a class="ui button">Primary</a>
<div class="ui basic blue button">Primary</div>
<button class="ui ...
Syntax? - Variations
<button class="ui button">Primary</button>
<button class="ui basic blue button">Primary</button>
<but...
Syntax? -UI Components, parts of a
component.
<div class="ui grid">
<div class="four wide column"></div>
<div class="four ...
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.
S...
Shapes (3d Transformations)
http://semantic-ui.com/modules/shape.html#/definition
Direction
Box, Flip
Text, Image, etc.
St...
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
•...
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/...
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...
Grid
<div class="ui three column stackable grid">
<div class="blue column"></div>
<div class="column center aligned">
</di...
Top Navigation
<div class="ui inverted menu">
<div class="item">Home</div>
<div class="item">More..</div>
<div class="righ...
Shape Component
<div class="ui shape">
<div class="sides">
<div class="active side">This side starts visible.</div>
<div c...
Modal
<div class="ui basic modal">
<i class="close icon"></i>
<div class="header"> Archive Old Messages </div>
<div class=...
Drop Down Menu
<div class="ui dropdown item" tabindex="0">
Dropdown
<i class="dropdown icon"></i>
<div class="menu transit...
Card
<div class="ui card">
<div class="image">
<img src="http://assets.bwbx.io/images/users/iqjWHBFdfxIU/ilPgpXtm.6_E/v1/-...
Pros
• Published under the incredibly permissive MIT License.
• Very well documented.
• Easy to learn/use.
• A very nice i...
Cons
● Doesn’t have all components. Missing a image slider and a
thumbnail class.
● No SASS (does have LESS)
● Large compa...
Semantic UI s. Bootstrap
• Semantic Has a more modern look and more design options.
• Bootstrap is easy to use and require...
Semantic + Angular(2) = ?
There is Actually several project creating Angular wrappers for
Semantic UI.
● https://github.co...
Read More…..
Main Webpage
http://semantic-ui.com/
Show Case
https://github.com/Semantic-Org/Semantic-UI/wiki/Showcase
Twit...
Nächste SlideShare
Wird geladen in …5
×

Semantic UI Introduction

Learn the basic of UI Semantic, with Info, Examples and Links.

  • Als Erste(r) kommentieren

Semantic UI Introduction

  1. 1. Semantic UI Design Beautiful Websites Quicker Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
  2. 2. 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
  3. 3. What does it consist of? 15 6 16 15 Behaviors API Form Validation Visibility
  4. 4. 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.
  5. 5. 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)
  6. 6. Syntax? – Tag Agnostic <a class="ui button">Primary</a> <div class="ui basic blue button">Primary</div> <button class="ui basic button">Primary</button>
  7. 7. Syntax? - Variations <button class="ui button">Primary</button> <button class="ui basic blue button">Primary</button> <button class="ui basic button">Primary</button>
  8. 8. Syntax? -UI Components, parts of a component. <div class="ui grid"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div>
  9. 9. 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
  10. 10. Shapes (3d Transformations) http://semantic-ui.com/modules/shape.html#/definition Direction Box, Flip Text, Image, etc. Styling
  11. 11. Modal http://semantic-ui.com/modules/modal.html#multiple-modals Scrolling Modal Multiple Modals Transitions Styling
  12. 12. Sidebar http://semantic-ui.com/modules/sidebar.html#/examples Direction Overlay, Push, Scale Multiple Styling
  13. 13. Live Code (copy paste) Session Lets create a webpage with: • A top navigation menu • A shape components • A sidebar menu • A modal
  14. 14. HTML Document <html> <head> </head> <body> </body> </html>
  15. 15. 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>
  16. 16. HTML Document - Script <script> $( document ).ready(function() { }); </script>
  17. 17. HTML Document - Style <style> html, body { height: 100%; } .ui.grid { height: 100%; } </style>
  18. 18. 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 class="ui hidden divider"></div> </div>
  19. 19. 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>
  20. 20. 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>
  21. 21. 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> <div class="ui hidden divider"></div> <button class="ui violet basic button" onClick="$('.shape').shape('flip up');">Turn Shape</button> <div class="ui hidden divider"></div>
  22. 22. 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> <div class="ui hidden divider"></div> <button class="ui violet basic button" onClick="$('.ui.basic.modal') .modal('show') ;">Show Modal</button> <div class="ui hidden divider"></div>
  23. 23. 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();
  24. 24. 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>
  25. 25. 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.
  26. 26. 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
  27. 27. 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.
  28. 28. 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
  29. 29. 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

×