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
• 50+ UI elements
• 3000 + CSS variables
• Built with EM values for responsive design
• Flexbox friendly
What does it consist of?
15 6 16 15
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.
Differentiate yourself and your project with a design that can be reworked, but
doesn't have to be.
<div class="ui card">
<div class="header">One Nordea</div>
<a>Learn how to collaborate</a>
Nordea works as one unit with one goal.
• 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.
● Doesn’t have all components. Missing a image slider and a
● 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.
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
Where can I find semantic Examples?