Not Just Bootstrap: Semantic UI

DZone 's Guide to

Not Just Bootstrap: Semantic UI

Do you often work with Bootstrap and CSS, and love the convenience but hate the naming conventions? Then check out Semantic UI!

· Web Dev Zone ·
Free Resource

Bootstrap is the most popular and used CSS framework, but today I want to highlight one of the possible alternatives: Semantic UI.

Semantic UI

The idea behind the Semantic UI CSS framework is that names of CSS classes should simply be names and concepts coming from natural languages. For example, to style a button with the primary color, you use <button class="ui primary button">

Semantic UI is responsive by default, using a 16-column grid layout.

<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 class="two wide column"></div>
    <div class="eight wide column"></div>
    <div class="six wide column"></div>

In the previous code, look at how much easier it is to understand the naming of classes as compared to Bootstrap, where classes would have been col-xs-12 col-sm-6 col-md-8.

This natural language naming is just the tip of the more profound and almost philosophical reasoning that led to the creation of Semantic UI, whose goal is to lower the technical barriers that lie between the concepts of programming and their correlating concepts in human meaning.

Semantic UI comes with a very basic theme, but creating themes is very easy. Semantic UI is developed with LESS, so theming is just a matter of customizing some variables. And themes to mimic Bootstrap, Material Design, GitHub, Twitter, and Amazon are available already.

If you didn't know about this CSS component library I strongly recommend you go have a look at it.

It has two reference websites: 

bootstrap, css, front-end development, semantic ui, web dev

Published at DZone with permission of Simone Chiaretta , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}