Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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>
</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: 

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}