Introducing: Semantic UI Component Library

As most of us are probably aware, Bootstrap and Foundation are the current leaders among front-end development frameworks. But history has shown us that eventually something better will come along and in this case that might not be so far away.

This article will introduce you to a new candidate on the framework landscape called Semantic UI.

Semantic UI is a modern front-end development framework, powered by LESS and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience.

According to the Semantic UI website, the goal of the framework is to empower designers and developers “by creating a language for sharing UI”. They do this by leveraging a semantic, descriptive language for its classes and naming conventions. Instead of using abbreviations, as other frameworks do, it utilizes real words in a manner closer to plain English.

Features

Semantic UI is unique in two ways. First is the way the framework is structured. It uses five descriptive categories to define re-usable UI components.

• A UI Element is a basic building block. It can appear alone or in uniform groups. For example, a button can be independent or put in a button group.
• A UI Collection is a group of different kinds of elements that are interdependent. For example, a web form can have buttons, inputs, checkboxes, icons, and so forth.
• A UI View represents a common piece of website content. For example, a feed or comments section.
• A UI Module is a component with interactive JavaScript-based functionality. Examples include an accordion, dimmer, modal, and so on.
• A UI Behavior is a component that can’t exist independently, but instead is used to inject functionality into other components. For example, the Form Validation behavior provide validation functionality for the Form component.

Almost every component has types, states and variations. For example, some of the button component’s types include: standard button, button with icon, animated button and a button can be in the active, disabled, or loading state. Finally, a button can vary in size and color, and can be formatted as basic, social, fluid, toggle, and more. This scheme gives you a great amount of flexibility in a component’s appearance.

As you can see, Semantic UI is not only meaningful and well structured in terms of naming its classes but also in naming, defining, and describing its components. This structure is much more semantic compared to that found in Bootstrap or Foundation.

The second unique thing about Semantic UI is that it provides some exclusive features and components not present in other frameworks. For example, Feed and Comment in the UI Views components or Sidebar and Shape from the UI Modules. Also, when interacting with Semantic UI components you get real-time debug output. Just open up your web console and you’ll see your components communicating exactly what they’re doing.

Another strength of Semantic UI is that it uses minimal and neutral styling, leaving customization open to you. It includes important and useful things while leaving out additional features that you’ll probably never use. Plus, the framework’s components are portable and self-contained so you can grab and use only those you need.

The framework uses em and rem units for its elements, making it fully responsive and adaptive to any size. You need only to change the base font and all other elements will adjust accordingly.

Finally, Semantic UI is very well documented and the website provides many examples for the different components. In addition, it has a style guide with techniques and directions on how to write your code. All this makes learning the framework a pain-free experience.

To find how Semantic UI integrates with others projects and tools check out the integration page.

To see how a website built with Semantic UI looks you can visit Quirky.

OK. So far, so good. But I think this overview of Semantic UI won’t be fully complete without getting our hands a little dirty. So let’s taste the sweetness of Semantic UI right now. I’ll show you how to create an awesome Sign In/Sign Up form using a variety of Semantic UI components.

How to Create a Sign In/Sign Up Form with Semantic UI

We’re going to create a form that switches views depending on whether the user want to “Sign In” or “Sign Up”. Here is how the views will look:

First download Semantic UI, open the zipped file and extract the folder called “packaged”. Rename the to Semantic UI Form Example (or something else that you can use to identify it easily).

To see a working demo of our form example just download the complete form.html file and put it into the Semantic UI Form Example folder. Open the form.html file in your browser and play with the form to get the sense of it. Now I’m going to show you how to recreate the form by displaying and explaining the code involved.

To start, rename the file to complete_form.html and create an empty file called form.html. Open it and add the following HTML:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <title>Semantic UI Sign In/Sign Up Form</title>

  <link href="css/semantic.css" rel="stylesheet" type="text/css" />

  <style type="text/css">

  </style>

</head>
<body>


  <!-- content will go here -->


  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="javascript/semantic.js" type="text/javascript"></script>

  <script type="text/javascript">

  </script>      
</body>
</html>

This is our starting template. It links to the semantic.css and semantic.js files, and adds reference to the jQuery library. It also has script and style tags for the JavaScript and CSS that we’re going to add. I’m including the JavaScript and CSS internally only for learning purpose, because it’s easier and you don’t need to jump between multiple files. But in real-world projects it’s always better to use external files.

Before we get started, let’s consider how Semantic UI works. All component definitions begin with a class of ui followed by the name of the component. For example, to add a Button element you just give it a class of ui button. To add states and/or variations just insert the needed classes. For example, to create a button that changes its color to blue on hover, add the hover state class and blue variation class: ui hover blue button.

Let’s get back to our form. I’m not going to explain what each class does, because the classes are more or less self-descriptive and you can see more on their meanings in the documentation.

The first thing we need to do is to add a Segment element which will contain our form. We do this by adding a div tag with a class of ui raised segment signin. For the form’s title, we use an h3 tag with a class of ui inverted blue block header. Next we create a two-column grid with a vertical divider between the columns. In the first column we add a div with a class of ui blue stacked segment, which will hold our form elements. At the bottom we put another Divider element, and a div with a class of footer.

<div class="ui raised segment signin">
  <h3 class="ui inverted blue block header"> SIGN IN </h3>
  <div class="ui two column grid basic segment">
    <div class="column">
      <div class="ui blue stacked segment">
           <!-- form here -->
      </div>
    </div>
    <div class="ui vertical divider"> OR </div>
    <div class="center aligned column">
      <!-- Facebook button here -->
    </div>
  </div>
  <div class="ui divider"></div>
  <div class="footer">
    <!-- text plus button here -->
  </div>
</div>

Now we need to add some styling. Put the code below inside your currently empty style tags.

body, .ui.vertical.divider {
  color: #696969;
}

.ui.vertical.divider {
  margin: 0 4px;
}

.ui.raised.segment {
  background-color: #fffacd;
  width: 600px;
  margin-top: 0;
  position: fixed;
  left: 10px;
  top: 10px;
}

Next, in the first column (where the HTML comment says “form here”) we add the code for the form. To create the form we add a div tag with a class of ui form. Then we put two more div tags each with a class of field, another one with a class of inline field, and finally one with a class of ui red submit button. The first two fields are for Username and Password. In the third div, which is formatted to be inline, we put a checkbox.

<div class="ui form">
  <div class="field">
    <label> Username </label>
    <div class="ui left labeled icon input">
      <input type="text">
      <i class="user icon"></i>
    </div>
  </div>
  <div class="field">
    <label> Password </label>
    <div class="ui left labeled icon input">
      <input type="password">
      <i class="lock icon"></i>
    </div>
  </div>
  <div class="inline field">
    <div class="ui checkbox">
      <input id="remember" type="checkbox">
      <label for="remember"> Remember me </label>
    </div>
  </div>
  <div class="ui red submit button"> Sign In </div>
</div>

In the second column with class center aligned column (where the HTML comment says “Facebook button here”) we use an h4 heading and add Semantic UI’s Facebook social button:

<h4 class="ui header"> Sign in with: </h4>
<div class="ui facebook button">
  <i class="facebook icon"></i>
  Facebook
</div>

We complete the footer by adding some text and an animated button that will switch our form from Sign In to Sign Up. The following HTML gets added where the HTML comment says “text plus button here”:

<div class="text"> Not a member? </div>
<div class="ui vertical animated blue mini button signup">
  <div class="visible content"> Join Us </div>
  <div class="hidden content">
    <i class="users icon"></i>
  </div>
</div>

We’ll also need to add some styling to render our footer properly. Add the following CSS below the existing CSS inside our style tags:

.footer {
  text-align: right;
}

.text {
  display: inline;
}

Now the first side (“Sign Up”) is ready. Let’s create the second. We start with the following code which is similar to that which we’ve already covered. This HTML gets added below all of our existing HTML:

<div class="ui raised segment signup inactive">
  <h3 class="ui inverted blue block header"> SIGN UP </h3>
  <div class="ui blue stacked segment">
       <!-- form here -->
  </div>
  <div class="ui divider"></div>
  <div class="footer">
    <div class="text"> Already a member? </div>
    <div class="ui vertical animated blue mini button signin">
      <div class="visible content"> Log In </div>
      <div class="hidden content">
        <i class="sign in icon"></i>
      </div>
    </div>
  </div>
</div>

Next we add the code for the form inside the segment element, in the HTML we just added (where the HTML comment says “form here”). The div with class ui error message is put at the end of the form because the Form Validation behavior that we’ll add later on requires it to show errors to the user.

<div class="ui form">
  <div class="two fields">
    <div class="field">
      <!-- Username here -->              
    </div>
    <div class="field">
      <!-- Email here -->
    </div>
  </div>
  <div class="two fields">
    <div class="field">
      <!-- Password here -->        
    </div>
    <div class="field">
      <!-- Confirm Password here -->
    </div>
  </div>
  <div class="inline field">
    <!-- checkbox here -->
  </div>
  <div class="ui red submit button"> Sign Up </div>
  <div class="ui error message"></div>
</div>

Notice each of the field elements in the above HTML has a comment indicating which part of the form we’ll add in each one. Let’s do that now.

Here is the code for the Username field:

<label> Username </label>
<div class="ui left labeled icon input">
  <input id="username" placeholder="e.g., Tarzan" type="text">
  <i class="user icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

Here is the code for the Email field:

<label> Email </label>
<div class="ui left labeled icon input">
  <input id="email" placeholder="e.g., tarzan@jungle.org" type="text">
  <i class="mail icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

Here is the code for the Password field:

<label> Password </label>
<div class="ui left labeled icon input">
  <input id="password" placeholder="e.g., !@#$%^&amp;*()_+:)" type="password">
  <i class="lock icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

Here is the code for the Confirm Password field:

<label> Confirm Password </label>
<div class="ui left labeled icon input">
  <input id="confirm-password" placeholder="e.g., !@#$%^&amp;*()_+:)" type="password">
  <i class="lock icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

And the code for the checkbox:

<div class="ui checkbox">
  <input id="terms" type="checkbox">
  <label for="terms"> I agree to the <a href="#"> Terms and Conditions </a></label>
</div>

We also add styling for the links:

a {
  text-decoration: none;
  color: #1E90FF;
}

Now that the two parts of our form are ready, we need to add the code for switching from one side of the form to the other. Put the following code into the empty script tag.

$( document ).ready(function() {

  // Hide Sign Up side on initialization
  $( '.inactive' ).hide();


  $( '.mini.button.signup' ).click(function() {

    // Hide Sign In and show Sign Up side with slide down effect
    $( '.ui.segment.signin' )
      .hide()
      .end()
    .find( '.ui.segment.signup' )
      .slideDown();

  });


  $( '.mini.button.signin' ).click(function() {

    // Hide Sign Up and show Sign In side with slide down effect
    $( '.ui.segment.signup' )
      .hide()
      .end()
    .find( '.ui.segment.signin' )
      .slideDown();

  });
});

Our form looks nice — but what if a user types invalid values? We need to add validation. We do this by adding the following code inside our script tag, after the code we just added above:

$( '.ui.form' )
  .form({
    username: {
      identifier : 'username',
      rules: [
        {  
          type   : 'empty',
          prompt : 'Please enter a username'
        }
      ]
    },
    email: {
      identifier : 'email',
      rules: [
        {
          type   : 'email',
          prompt : 'Please enter a valid email addres'
        }
      ]
    },
    password: {
      identifier : 'password',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter a password'
        },
        {
          type   : 'length[6]',
          prompt : 'Your password must be at least 6 characters'
        }
      ]
    },
    passwordConfirm: {
      identifier : 'confirm-password',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please confirm your password'
        },
        {
          type   : 'match[password]',
          prompt : 'Password doesn\'t match'
        }
      ]
    },
    terms: {
      identifier : 'terms',
      rules: [
        {
          type   : 'checked',
          prompt : 'You must agree to the terms and conditions'
        }
      ]
    }
});

You can read more about how the above code works in the documentation.

Well done! This is a fairly simple example and with it we’ve only scratched the surface of the capabilities of Semantic UI.

Conclusion

As you can see, Semantic UI is a new, fresh and, in some aspects, unique addition to the landscape of front-end development frameworks. From what we’ve considered here, although it’s, as of this writing, only a few months old, you can see that it’s quite promising and deserves to be on many developers’ watch lists for this year.

Once again, you can download the complete tutorial file here and remember to add it inside the “packaged” folder when you unzip the full Semantic UI library.

Frequently Asked Questions (FAQs) about Semantic UI Component Library