Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to SafariWhen comparing Semantic UI vs HTML5 Boilerplate, the Slant community recommends Semantic UI for most people. In the question“What are the best Bootstrap alternatives?” Semantic UI is ranked 1st while HTML5 Boilerplate is ranked 6th. The most important reason people chose Semantic UI is:
Uses semantic class names for its styling, making it easier to grasp and understand even for beginners looking to jump right in.
Question Ranking
Pros
Pro It's semantic
Uses semantic class names for its styling, making it easier to grasp and understand even for beginners looking to jump right in.
Pro Load only the components you need
The whole Semantic-UI package is well organized, with every component neatly set up with it's own stylesheet and JavaScript file. This way you can load only the components you need for each page, minimizing the load time and file size.
Pro The elements offer a huge amount of customization, far beyond a framework like bootstrap
Pro Beautifully designed
Semantic UI has a futuristic and beautiful design. Many will satisfied with the design, especially when Semantic UI is used as a CSS framework.
Pro It'll have almost any UI component/element you may think of for your project
It includes tons of UI components that you may need for almost any type of project you may work on; And of course, you can always only pick what you need.
Pro Well documented
The documentation is easy to use, well written and has lots of examples each with their source codes.
Pro Easy to use
Just start code from the beginning of the journey, from first page of documentation.
Pro Includes a comprehensive set of server configuration files
These configuration files may help increase performance of the webapp.
Pro Includes Modernizr
Modernizr checks browser support for HTML5, CSS3, as well as a few other miscellaneous elements and allows for easily writing fallbacks if they're not supported.
Pro Documented and undocumented versions
To help out newcommers to either programming in general or HTML5 Boilerplate specifically, the boilerplate includes in-depth docs that help understand how things work and why certain choices are made. The documentation is highly comprehensive going even as far as to describe every single line of normalize.css that the H5BP includes.
Pro Cross-browser normalization
H5BP includes normalize.css that will help fix inconsistencies in the way browsers render elements.
Pro Performance optimizations
HTML5 Boilerplate theme doesn't only provide a base template for building your next modern site. It also has performance optimization features built into it which include stuff like html + js minification , image size reduction as well as css minification. This link here describes how to optimize your shiny new html5 site using these built in features.
Pro Optional support for XHR and Flash
With optional support for XHR, we can use techniques such as XHR eval and XHR injections to optimize the loading of external scripts and significantly reduce page load times. Alongside XHR, built-in support for Flash means that you can use your old swf/flash content on your website, where you feel you're not ready for HTML5 yet.
Cons
Con Large file size
Packages are much bigger when comparing to Twitter Bootstrap or Zurb Foundation. Semantic UI is really extremely large and it would be better to use specific modules and components, rather than the whole thing.
Con Not maintained anymore
Use Fomantic-UI instead.
Con Buggy
Contains a lot of UI inaccuracies, like wrong positioning, cannot mix classes, etc.
Con Not for beginner developer/unfamiliar with Javascript
Many features in Semantic UI uses Javascript customization such as for Modal. This is unlike Bootstrap that can add Modal just with customizing the HTML attributes. Developers who plan to using Semantic UI must be familiar with Javascript or JQuery to get the most out of it.
Con Small number of classes
Once you wanna do something that is not mentioned in the doc - prepare to spend an hour, then give up and implement a custom "workaround".
Con Not a complete solution
HTML5 Boilerplate is basically just that, a template or a basis on which to build an HTML page. It doesn't have much mark up or components out of the box. In other words, it doesn't provide all the components and tools needed to build a UI, it contains best practices and a generall template on which to build your UI.
