Semantic UI is the new popular CSS, JS framework for beautifying your Website. Tutorial will help understand how to integrate Semantic UI with Rails application and how to test the sample Semantic UI components with your Rails application.

What is Semantic UI

• According to Semantic UI - Semantic empowers designers and developers by creating a language for sharing UI.
• If you are looking for CSS, JS framework other than Twitter Bootstrap or Foundation then Semantic UI is the best option to try out.

There are 2 ways of Integrating Semantic UI with Rails Application: The one is using Semantic UI Rails and the other is Manually.

Option 1. Using gem ‘semantic-ui-rails’

Step 1

Let us create new Rails project using command,

rails new semanticTest

This will create new Rails project to begin with.

Step 2

Add gem ‘semantic-ui-rails’ gem to your Gemfile in your Rails app.

gem 'semantic-ui-rails'

Step 3

Perform bundle so that Gem will be installed for your Ruby environment if already not installed and it will add to your Gemfile.lock

bundle install

Step 4

Configure Assets - This integrates the CSS and JS of Semantic UI framework properly with Rails application. This can be done using following command:

rails g semantic:install

Step 5

Test the Framework -

• We can test whether semantic UI framework is properly integrated or not by using classes from the CSS of the framework.

• Use following sample example of the framework to get code which uses Semantic UI components.

• Semantic UI Example using Semantic UI components.
• Add above code in some ERB (Embedded Ruby) of your Rails application and then try load it on your browser to see if it properly integrated.

Note:

• If you are following Homepage example, then put homepage.css in /app/assets/css directory.
• Puts homepage.js in /app/assets/js directory

You are done with Semantic UI Rails integration.

Option 2 - Manual Integration with Rails

Step 1. Download Semantic UI package from here.

Step 2. Copy directories (less, minified, packaged, uncompressed) in the /public/ directory of Rails Project

Step 3. Copy CSS, JS resources in the /app/assets/css and /app/assets/js directories respectively of Rails Project. Considering which example you are following,

• If you are following Homepage example, then put homepage.css in /app/assets/css directory.
• Puts homepage.js in /app/assets/js directory

Ultimately make sure your Rails application has all the proper resources that it is looking for considering UI components.

Step 5 can be tried from Option 1 after above step 3 is executed. As above steps have ensured integration of Semantic UI framework with your Rails Application.

Conclusion

1. We learned how to integrate Semantic UI  Rails with Rails project using Gem semantic-ui-rails or manually by integrating JS, CSS in Rails project codebase.
2. If you have any problem in integration, let us know through comments so that we can help out.