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