Introduction of semantic UI Component library

semanticui

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.

  • 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.
  • 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.
  • UI View represents a common piece of website content. For example, a feed or comments section.
  • UI Module is a component with interactive JavaScript-based functionality. Examples include an accordion, dimmer, modal, and so on.
  • 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:

image.png
image.png

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:

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 bluevariation 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 Dividerelement, and a div with a class of footer.

Leave a Reply

Your email address will not be published. Required fields are marked *