The Semantics of Semantic UI

#css #tutorial #webdev #codenewbie

Introduction

As developers, I think there is one thing we can all collectively agree on, CSS is deceptively difficult. We've all played the game of chasing our components around the page or desperately trying to get our background color to apply to the right spot. It is easy to lose some of the fun of styling to the occasionally frustrating intricacies of Cascading Style Sheets. Luckily for us, there are many frameworks available to make our styling lives a bit easier. But where do you start? For me, entering the world of CSS frameworks seemed a bit intimidating and I felt overwhelmed by choice. Bootstrap? Bulma? Tailwind? In the end it came down to finding the syntax and setup that felt the most logical and applicable. Begin with what feels simple and you can build upon that later as you delve into other frameworks. Semantic UI is the framework that checked those boxes for me and here I will lay out a step by step intro guide to Semantic UI for other CSS framework beginners like myself.

Install

When it comes to installing Semantic UI, you have a few options. The quickest and easiest approach for beginners is by utilizing the Content Delivery Network (CDN) in which all you need to do is add the following link line of code to your HTML file:

<html>
  <head>
    <title>Semantic UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
    <!-- Add custom stylesheet here -->
  </head>
  <body>

Another approach to installation is to use your command line and npm to directly install Semantic UI. "Semantic UI uses Gulp to provide command line tools for building themed versions of the library with just the components you need." To begin you install Gulp:

npm install -g gulp

Then you install Semantic UI, cd into it and run a gulp build, like so:

npm install semantic-ui --save cd semantic/ gulp build

Finally, you will add Semantic UI to your HTML like before:

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

The benefit to manually installing Semantic UI vs. adding it directly to your HTML is that you will be able to run updates with npm:

npm update

Application

Semnatic UI presents itself as "a development framework that helps create beautiful, responsive layouts using human-friendly HTML." In my experience with the framework I found this to be true, it is very "human-friendly" and generally easy to manipulate. Like most other frameworks, you change the class of the feature you are trying to style. Unlike some other frameworks, the names are very intuitive and make application relatively simple. The below example shows how easy it is to make ui styled buttons that have active features. Note the pluralization of the button keyword to denote multiple buttons.

Generally speaking, Semantic UI can be created by adding a class of "ui + whatever you are trying to create" i.e. class="ui button", class="ui form", class="ui card". The card styling in particular is one of my favorite features of the framework.

Accomplished like so:

<div class="ui card">
  <div class="image">
    <img src="/images/avatar2/large/kristy.png">
  </div>
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    </div>
    <div class="description">
      Kristy is an art director living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i>
      22 Friends
    </a>
  </div>
</div>

The specific elements on each card are highly editable and will all be contained within the larger ui card class container. My colleague Beth Fekadu and I recently employed this method to our recipe app project, adding a like, delete, and show detail button.

Cards can be placed inline with each other by simply pluralizing the cards and setting the number you would like in a row. Ex: ui three cards.

The possibilities of Semantic UI styling are nearly endless and expand far beyond the scope of this blog, however, I will quickly list a few of my other versatile favorites.

Menus are sleek and simple:

<div class="ui three item menu">
  <a class="active item">Editorials</a>
  <a class="item">Reviews</a>
  <a class="item">Upcoming Events</a>
</div>

Search bars are clean and easy:

<div class="ui search">
  <div class="ui icon input">
    <input class="prompt" type="text" placeholder="Common passwords...">
    <i class="search icon"></i>
  </div>
  <div class="results"></div>
</div>

Labels can be very stylized:

<a class="ui blue image label">
  <img src="/images/avatar/small/veronika.jpg">
  Veronika
  <div class="detail">Friend</div>
</a>
<a class="ui teal image label">
  <img src="/images/avatar/small/jenny.jpg">
  Veronika
  <div class="detail">Student</div>
</a>
<a class="ui yellow image label">
  <img src="/images/avatar/small/christian.jpg">
  Helen
  <div class="detail">Co-worker</div>
</a>

How to edit and overwrite

As nice as the Semantic UI formatting is, there will be times when you want to add to, edit, and manipulate your CSS further. This is generally accomplished by adding your custom css class in alongside you Semantic UI class.

.center-text {
  text-align: center;
}

<div class="ui card center-text"></div>

Additionally, you can overwrite the actual UI setting like so:

.ui.cards > .card {
  background-color: purple;
}

These are two methods to develop a working balance between your own CSS and the Semantic UI.

Integrations

A feature of Semantic UI that I haven't had the chance to utilize are the built-in integrations. "Semantic has integrations with React, Angular, Meteor, Ember and many other frameworks to help organize your UI layer alongside your application logic." I hope to utilize the React integration more in the near future, but my understanding is that the integrations come with a more prescriptive style in which component names are set and strict. It seems that this can lead to cleaner code with fewer nested components.

Themes

In addition to the default style, Semantic UI also has theming based off of popular frameworks and websites:

Conclusion

Semantic UI offers a simplified and intuitive way to style your HTML (or React components). Clean and beautiful styles can be achieved simply by naming your classes based on intuitive and "human-friendly" conventions.

Happy styling!