Semantic UI Introduction
ChristenChristensen
2,095 views
29 slides
Nov 08, 2016
Slide 1 of 29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
About This Presentation
Learn the basic of UI Semantic, with Info, Examples and Links.
Slide Content
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 class=" four wide column"></div> <div class=" four wide column"></div> <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 class=" ui hidden divider"></div> </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> <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>
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>
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
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 2,095
- Slides 29
- Favorites 2
- Age 3311 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
47 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
46 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
21 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views