Not just Bootstrap: Semantic UI - Day 5 - 24 days of "Front-end Development with ASP.NET Core, Angular, and Bootstrap"

Bootstrap is the most popular and used CSS framework, and my book "Front-end Development with ASP.NET Core, Angular, and Bootstrap" covers it in details in chapter 4, but today I want to highlight one o f the possible alternatives that my chapter 2 briefly covers: 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 also at how easier to understand the naming of classes is, 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 web sites: - Semantic UI, with all the documentation of the library - Learn Semantic, which is a tutorial-style site which also explains the whole reasoning behind the library and why it is different from the rest.

CSS and JavaScript frameworks other then Bootstrap and Angular, as well as package managers and build tools are briefly covered in the second chapter of my upcoming book Front-end Development with ASP.NET Core, Angular, and Bootstrap.

If you want to see more of what is coming, come back tomorrow for more tips.