Semantic UI 101

Stacey Astoveza
Aug 24, 2017 · 4 min read

You’ve made your very first Rails app. Your routes are great, your associations are correct and everything is just on point. BUT THEN, it just looks so bare and ugly. You know that something has to be done.

If you’re like me and you care about how things look, not to be vain or anything but there’s just something about really nice, clean, and simple User Interface or style in general.

As you probably know already, there are a handful of UI build tools that you can use including Bootstrap and Semantic UI. But after comparing Bootstrap to Semantic UI, I seriously feel like Semantic has better option if you’re going for clean, simple, and lightweight design for User Interface.

What is Semantic UI?

  • A modern front-end framework that is use to help create beautiful, responsive layout using HTML.
  • It has several key components:
  1. Element — use for basic building block such as button, container, image, etc.
  2. Collection — use for form, grid, menu, etc.
  3. View — use for showing ad, card design, comments, etc.
  4. Module — use for interactive actions that are build with JavaScript like checkbox, dropdown and such.
  5. Behavior — use for components with functionality such as, validations.

SETUP:

There are two ways to set up Semantic UI in your computer.

  1. Download the zip from their site, Semantic UI and follow the instruction on their page.
  • This comes with their built in theming but if you don’t need everything and you just need to customize certain components then I suggest you set it up the second way (below):

2. On google, search for Semantic UI cdn and click on the first link:

  • Make sure that you download the latest version that they have (If you go back to their site, you’ll see the latest version they have and just find it on the list of cdn).
  • Copy paste this url on your /layouts/application.html.erb on your views folder:

This will allow for you to have the Semantic UI library and pretty much gives you the power to customize your page to however you want.

CUSTOMIZING YOUR FRONT-END

Some example of things you can customize are the following:

Header:

  • Since you have the library pasted on your application file, you can pretty much edit the look here.
  • Go back to the Semantic UI’s website and look for header under Elements from the side menu:
  • From here you can choose the type of header that you’d like and by clicking “<>” it shows you exactly the html code you need to add to your /layouts/application.html.erb:
  • Make sure that you note what type of div class you are going to use from the library. Above is an example. Specifying “right” before the class will take the particular button or component to the right of the page:
  • The “four wide” just refers to the size of the box of each component. In this example, I wanted to customize it to look smaller than the actual title header and four was a good size.

Forms:

— A form displays a set of related user input fields in a structured way.

Continuing on the above example, I made a form for our Rails app by adding the “div class” in my /views/users/new.html.erb file:

But when I refresh my site, it gave me this:

If you notice, the field stretches out to and takes out the whole page. So I did some digging and found out that I can specify the “size” of the field text box for each field by including it in the “div class”:

I refreshed the page and now it looks like this:

In Conclusion:

Semantic UI offers a lot of different options for you to help you build your framework. It offers that modern, ease of use, and lightweight feel. It favors developers that like to customize their interface however they want.

If you want to read more about it, here are some helpful links that I used as references as well:

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade