More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Semantic UI Introduction
Similar to Semantic UI Introduction (20)
Recently uploaded
Recently uploaded (20)
Semantic UI Introduction
- 1. Semantic UI Design Beautiful Websites Quicker Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
- 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. What does it consist of? 15 6 16 15 Behaviors API Form Validation Visibility
- 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. 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. 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. Syntax? - Variations <button class="ui button">Primary</button> <button class="ui basic blue button">Primary</button> <button class="ui basic button">Primary</button>
- 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. 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. Shapes (3d Transformations) http://semantic-ui.com/modules/shape.html#/definition Direction Box, Flip Text, Image, etc. Styling
- 13. Live Code (copy paste) Session Lets create a webpage with: • A top navigation menu • A shape components • A sidebar menu • A modal
- 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. HTML Document - Script <script> $( document ).ready(function() { }); </script>
- 17. HTML Document - Style <style> html, body { height: 100%; } .ui.grid { height: 100%; } </style>
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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