This is the second in a series of posts on how great Semantic UI is. We'll look at how you use Semantic UI in your app.

Last week, we talked about why Semantic UI is cool and what advantages it has over Bootstrap in terms of usage. This week, we'll talk about how you actually use Semantic UI.

When I wrote the first part of this series, I wrote it in a blog that doesn't actually use Semantic UI. Since then, I have migrated over to a Rails blog (as opposed to Sinatra). This app does actually use Semantic UI. Look at it in all of its glory! Okay, I clearly am a programmer and not a designer, but you can see how great and useful this technology is. This week, we'll talk about how you use Semantic UI to add styling and function to your website.

Let's talk about buttons. Buttons are a pain in the butt (HAHA see what I did there?!), especially if you want a rounded button with dropshadows. For someone without an eye for design, a button can take many precious minutes to get something that doesn't even look that good.

A standard button might look like this:

index.html

<\input type="submit" class="submit_button" value="Send message">

application.css

.submit_button{
text-align: center;
cursor: default;
color: blue;
background-color: white;
padding: 2px 6px 3px;
border: 2px solid black;
box-shadow:inset 0px 1px 0px 0px #ffffff;
font-family: arial;
font-size: 2em;
width: 100px;
text-shadow: 1px 1px 0px #ffffff;
foo etc. uzw.
}


You could keep going on and on. Even automatically generated buttons from websites like cssbuttongenerator.com are a cool 40+ lines of code right out of the box (I know; I counted). If you want to customize the color, size, or shape, you need to dig through that code and find what you hope is the write line to tweak, and you're only changing one dimension at a time. For example, if you want to increase the size of the button by 50%, you are changing at least two lines of code (width and height), plus possibly padding, margins, etc. You also have to hope that you isolate the correct button in your CSS, and not any other buttons on your page that you do not want to alter.

Now let's look at what that button looks like in Semantic UI:

index.html

<\input type="submit" class="ui button">Submit

That's it. That's a button. Want to make that button green?

index.html

<\input type="submit" class="ui green button">Submit

Do you want that button to have an icon on it?

index.html

<\input type="submit" class="ui button"><\i class='user icon'>Submit

All of these buttons change color and pointer style on hover and they look far more beautiful than anything I could make on my own.

There is a huge variety of options, as well. Semantic UI provides options for size, style, and alignment of elements, and they have a huge variety of elements, from buttons to menus to icons to forms. They also have "modules"--UI formatting that is matched with javascript that automatically generates the logic to do complicated events. I used the Semantic UI accordion logic on the About page on this website, after trying to write it out on my own; it went from broken functionality in around 50 lines to working perfectly in about 10 (see the code here).

To implement Semantic UI, either download the libraries at http://semantic-ui.com/ or, if you're using Rails, install the gem here. If you are downloading the libraries, install them in your CSS and Javascript folders and link to them from your layout page. If you are using the gem, add the following to your Gemfile:

gem 'therubyracer', platforms: :ruby
gem 'less-rails'
gem 'autoprefixer-rails'
gem 'semantic-ui-rails'


and then generate the Semantic UI environment with rails g semantic:install. Then, you can start adding the Semantic UI classes and keywords to your HTML.

In the beginning of every HTML element or block in which you are using a Semantic UI style, make sure that you include the class='ui'. This is the keyword that Semantic UI uses to locate and style your code.

I could talk a lot more about the basic usage of Semantic UI, but the best thing to do is to download it and play. They have a great website with a lot of code examples; just press the arrow key and it will swap out the output for the code that led to it. Go forth and have fun!

Next week, we'll talk about Semantic UI and responsive/mobile-first design. I'm also working on a post on how to put a Semantic UI project on Heroku.