Semantic UI – An alternative to Bootstrap?

Bootstrap is currently undisputedly the most popular CSS library. I have been using Bootstrap since 2012, starting with version 2.3. The current version is 4.5, with version 5 is under development and expected at the end of this year.

So why is Bootstrap so popular? There are several reasons, but perhaps the most important one is that it is very easy to get started and create attractive webpages, most components you need are available out-of-the-box, and there are  number of different themes to change the visual look of the sites. But perhaps the biggest reason for the popularity is its popularity. There are countless code snippets, samples and plugins available, as well as tutorial and a huge community you can tap into for help. There are currently over 98,000 questions on Stack Overflow for all versions of Bootstrap, and over 21,000 for the latest version.

But Bootstrap is of course not unchallenged. There are a number of other CSS frameworks available today, some more complete than others. One interesting framework I recently found is Semantic UI. It uses simple phrases, called behaviors, to trigger functions. Below is an example with a select box where the code is selecting two values from the list.

$('select.dropdown')
    .dropdown('set selected', ['meteor', 'ember'])
;

<select class="ui fluid dropdown" multiple="multiple" name="skills">
   <option value="">Skills</option>
   <option value="angular">Angular</option>
   <option value="css">CSS</option>
   <option value="ember">Ember</option>
   <option value="html">HTML</option>
   <option value="javascript">Javascript</option>
   <option value="meteor">Meteor</option>
   <option value="node">NodeJS</option>
   </select>

The resulting website looks very similar to one created in Bootstrap, if you use the default theme. One difference you might notice quickly is that the grid system is using 16 as the base, not 12 as Bootstrap does.

Semantic UI also contains several component you will not find natively in Bootstrap. On of them is dividers, which are available in horizontal and vertical variants.

The list component can very easily be configured in a multitude of different ways.

To create the horizontal list, the markup looks like this:

<div class="ui horizontal list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/tom.jpg">
    <div class="content">
      <div class="header">Tom</div>
      Top Contributor
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">Christian Rocha</div>
      Admin
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/matt.jpg">
    <div class="content">
      <div class="header">Matt</div>
      Top Rated User
    </div>
  </div>
</div>

Take a look at Semantic UI, maybe it will come in handy for your next web project!

1 Comment

7 Rules for Creating Gorgeous UI

I found this two-part article about web design very interesting and want to share it. I am very similar to the author, I have also learned what looks good by looking at sites.

In the end, I learned the aesthetics of apps the same way I’ve learned any creative endeavor: cold, hard analysis. And shameless copying of what works. I’ve worked 10 hours on a UI project and billed for 1. The other 9 were the wild flailing of learning. Desperately searching Google and Pinterest and Dribbble for something to copy from.

These “rules” are the lessons from those hours.

So word to the nerds: if I’m any good at designing UI now, it’s because I’ve analyzed stuff — not because I came out the chute with an intuitive understanding of beauty and balance.

Part 1: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

Part 2: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

0 Comments

End of content

No more pages to load