The goal of Semantic UI is to narrow the divide between how we create meaning personally, through language, and how we construct meaning for computers.
Key features of Semantic-UI:
- 50+ UI elements
- 3000 + CSS variables
- 3 Levels of variable inheritance (similar to Sublime Text)
- Built with EM values for responsive design
- Flexbox friendly
Compared with Bootstrap?
Now it’s the time to ask that very important question — of course I know that you will finally shout it out loud — “Tell me, what’s the difference between Bootstrap and Semantic-UI?” Aha, this is a huge question. Actually, Semantic-UI has already show us an official answer.
Bootstrap has a much much more mature ecosystem than Semantic-UI — it has tons of free and commercial templates and themes, while Semantic-UI has few — and that’s why we spent several hundreds of hours building this website for you, smart fellow developers.
Besides, in our own experience, we feel more delightful when developing with Semantic-UI. Maybe code speaks more than words:
<main class="ui three column grid"> <aside class="column">1</aside> <section class="column">2</section> <section class="column">3</section> </main>
<div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4">2</div> <div class="col-lg-4">3</div> </div>
<nav class="ui menu"> <h3 class="header item">Title</h3> <a class="active item">Home</a> <a class="item">Link</a> <a class="item">Link</a> <span class="right floated text item"> Signed in as <a href="#">user</a> </span> </nav>
<div class="navbar"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">User</a></p> </ul> </div>
<button class="ui large button"> <i class="heart icon"></i> Like it </button>
<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-heart"></span> Like </button>
Semantic-UI-Forest provides collection of design, themes and templates for Semantic-UI.
Years ago, when I first met Semantic-UI, I suddenly fall in love with it, made several websites with it. I have to say that it’s quite a delightful experience. And soon Semantic-UI becames my favourite frontend CSS framework.
As we said before, compared with Bootstrap, the ecosystem of Semantic-UI is small, so we decided to make some contributions, and then Semantic-UI-Forest was born. With several hundreds hours of work, it grew up to present with 22 well-tested templates and 24 beautiful themes — and yes, it’s all free, released under BSD 3-clause license.
We have ported all 16 themes on famous Bootswatch, from Bootstrap to Semantic-UI, so you can use these most popular themes along with Semantic-UI right now. Cerulean, Cyborg, Journal, Superhero, United, etc., all these gorgeous themes are available for Semantic-UI. We’ve also prebuilt some Semantic-UI’s bundled theme for you, such as Amazon, Github, Material, Twitter, etc.
It’s also ultra easy to apply themes. You could just click the
Download button, and replace the original
semantic.min.css with the CSS files of the theme you’ve downloaded, that’s it. With a new theme, your site would become unique, fresh and more impressive! Check it out by yourself: http://semantic-ui-forest.com/themes.
For those looking for templates to start a prototype quickly, we’ve also ported all official Bootstrap examples to Semantic-UI. Popular layouts such as blog, dashboard, fixed navbar, login form, jumbotron, etc., are ready for any kinds of application right now. Of course, you can easily customize them with handy Semantic-UI classes at your will. Hit now: http://semantic-ui-forest.com/templates.
All themes, templates and even the site itself are open source on GitHub:
- semantic-ui-forest/forest-themes: a collection of themes for Semantic UI.
- semantic-ui-forest/semantic-ui-forest: source code for this website.
- semantic-ui-forest/awesome-semantic-ui: a curated list of awesome semantic-ui documentations, libraries and resources.
If you have any problems, feel free to open an issue, and, as we all know, “Pull requests are always welcome”.
Last but not least, we’d like to give many thanks and show our respect to Semantic-UI for this wonderful front-end framework, to Nanoc for building static website easily and quickly, to Bootswatch and Bootstrap that inspired us a lot, and to Github for hosting all of our work for free.
Happy designing and coding!