How do I set up a Rails application with Semantic UI?

Question

I have installed the semantic UI rails gem

gem 'semantic-ui-rails'

I am now attempting to create a simple navigation bar with the following sample code from Symantec UI documentation:

<div class="ui secondary pointing menu">
  <a class="active item">
    Home
  </a>
  <a class="item">
    Messages
  </a>
  <a class="item">
    Friends
  </a>
  <div class="right menu">
    <a class="ui item">
      Logout
    </a>
  </div>
</div>
<div class="ui segment">
  <p></p>
</div>

The plain text appears but without the semantic UI formatting and styling. do I need to configure something in order to get semantic UI up and running?

Answer 1

Place the following line in your Gemfile:

gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass'

Run the bundler:

bundle install

Import semantic-ui on your application.css.scss:

@import "semantic-ui";

Require the javascript on your application.js:

//= require semantic-ui

After that you should be able to use to components of semantic-ui You can find more info in the gem repo