10k and 16k dumbbells on a white background

Previously, we compared Twitter Bootstrap vs. Boilerplate—an interesting comparison because while they’re both used similarly in front-end UI development, Bootstrap is a framework and Boilerplate is not. In this article, we’ll compare Bootstrap with another front-end framework, Semantic UI.

We won’t be comparing the histories and other aspects of these two frameworks, only the technical facts that will be the most helpful for any front-end developer trying to decide which one to use.

FRAMEWORK COMPONENTS

TWITTER BOOTSTRAP

Bootstrap has CSS, JavaScript, and font (or icon sets) files. Font components are not necessary and may be replaced with a set of icons, like Font Awesome.

semanticUI folders

Pros of this structure: Simpler structure: less time to start or include a stand-alone solution

Cons of this structure: Based on my experience, small and medium-sized projects never use a full list of all components. The most commonly used components are grid, buttons, forms, and menus. But Bootstrap also includes a lot of other features like slider, pagination, image effects, and grouped elements.

Here’s a full list of features:

As of July 30, 2016, Bootstrap has moved to using LESS configuration of components, which means that you can now select components you need rather than having to include all of them in your package, which can adversely affect your app’s load time. Just visit this page to customize your own Bootstrap package.

Bootstrap JavaScript components

SEMANTIC UI

The structure of Semantic UI components is much more difficult than Bootstrap, as is the installation process. While Bootstrap provides only one basic theme, Semantic UI includes more than 20+ themes in its basic package, in addition to CSS, JS, and fonts files. It also includes Composer, Bower, and Gulp config files.

Semantic UI files

Yes, you can just copy files to your project and link .js and .css files to HTML code and start using it. But Semantic UI’s recommended way of using the framework is different than what we described above. First of all, the best practice is to install Gulp and Composer to your server, rather than just copying files. These technologies will help you install not only Semantic UI but also be able to check all dependencies and add them if you haven’t already.

SPEED OF CODING

BOOTSTRAP CSS

This popular front-end framework has some classes with names that are easily misunderstood, but you’ll quickly get used to them. Here’s a regular string that can be found inside any source code of a Bootstrap-based project:

<div data-role="header">
<a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a>
<h1>My App</h1>
<button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>

</div>

As you can see, the names of CSS classes are very friendly for humans to read.

SEMANTIC-UI CSS

Semantic-UI’s CSS manages to be even more user-friendly than Bootstrap, with CSS that’s easier for developers to read by resembling a more semantic language—hence its name. Here are a few samples:

<div class="ui stackable inverted divided equal height stackable grid">

Here’s a sample with semantic-ui grid (because “grid” is one of the most frequently used features of any front-end framework). We want to create a 3-column-block, so we use the following CSS class:

<div class="three wide column">

As you can see, all Semantic-US classes use human words. Very friendly! Coding is more like writing regular text.

BOOTSTRAP JS

Bootstrap is more friendly for a junior or new front-end developer. Most features can be used without even a basic knowledge of JavaScript.

Let’s jump into the coding of a navigation bar to see how Bootstrap helps you create menus for your website.

Bootstrap navigation

As you probably know, drop-down menus using JavaScript require extra coding. Bootstrap has included this code so you only need to work with HTML to create one.

Here is sample code of a nav-bar:

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">

<li><a href="#">Link</a></li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>
</ul>
</li>

</ul>

</div><!-- /.navbar-collapse -->

</div>
</nav>

The HTML5 attributes “data-toggle” and “data-target” allow you to set up submenus for a collapsible menu without having to know any JS.

Here’s a similar situation with a modal:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

The HTML5 attribute data-toggle=”modal” will open a content of div with id=”myModal”. That’s all you need to do, no additional JS or CSS code required.

Tip: If you don’t know what HTML5 data* attributes are, visit this page for more information.

SEMANTIC UI JS

JavaScript is a necessary skill to have if you want to develop website interfaces using Semantic UI. (This will be difficult for junior developers; any mid- and senior-level front-end developers should be well versed in JS).

Almost all features of Semantic UI will not work without JS scripts: modal window, dropdown, sliders etc.

JS code is pretty simple. Here’s an example:

<script>
$(document)
.ready(function() {
$('.ui.sidebar')
.sidebar('attach events', '.toc.item')
;

})
;
</script>

Most samples of Semantic UI elements on its official website provide JavaScript hints:

SemanticUI Modal

The next step after making a basic HTML skeleton of your future project is to create one main.js file, which will contain JavaScript code for your Semantic-UI elements.

DESIGN AND VISUAL EFFECTS

BOOTSTRAP

Honestly, design is not the most advanced aspect of Bootstrap. The newest version, Bootstrap 4 (which is still in alpha version as of August 1, 2016), will try to solve this issue, but right now, standard elements of Bootstrap are not its strongest suit. Personally, I like to build admin panels or dashboards on Bootstrap that don’t require a lot of custom design but may have a lot of page types with various elements.

bootstrap theme

Tip: You can override styles in Bootstrap by using “themes.” Some themes are free and some are free via shareware. You can find more here, here, or here. The last link will take you to the official Bootstrap themes website, which charges for its themes.

SEMANTIC UI

This framework contains several themes. You can even imitate a Bootstrap design or make a full copy of a GitHub design:

Semantic UI

Here is a Semantic UI demo page. You can see that the basic design of Semantic UI is pretty good:

Semantic UI basic design

The design is very clean and modern. Also, there are themes available. The most useful ones will be “flat,” “material,” and “default.”

CONCLUSION

I love both frameworks. Over the last few years, they’ve both made a huge step up in terms of features and technological compatibility (Gulp, Bower, Composer, NPM, etc.). While the design features of Bootstrap aren’t as strong as Semantic UI’s, Bootstrap doesn’t require JS skills. On the other hand, Semantic UI looks more modern, but you definitely need to know JS. If you’re a junior front-end developer, you’ll like Bootstrap; if you’re an advanced developer, you’ll most likely prefer Semantic UI.