Skip to main content

How to integrate Semantic UI Rails with Rails App

How to integrate Semantic UI Rails with Rails App ?



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.

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

    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.
    If you have any problem in integration, let us know through comments so that we can help out.

Comments

Popular posts from this blog

Gem::LoadError (Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).?

Gem::LoadError (Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).) In rails?


1)change the gemfile in mysql version
 gem 'mysql2'

2)Change to mysql2 version
 gem 'mysql2','0.3.20'

Active Scaffold : Add radio buttons to your form ruby on rails ?

Active Scaffold : Add radio buttons to your form ruby on rails ?

The way to add radio buttons to your active scaffold create/update from is as shown below

#Controller

class UsersController < ApplicationController
active_scaffold :user do |config|
config.label = “Users”
config.columns = [:name, :gender]
config.columns[:gender].form_ui = :radio
config.columns[:gender].options[:options] = [['Male', '1'], ['Female','2']]
end
end

Get user accessing ip address in rails?

Get user accessing ip address rails?

request.ip ->returns the ip, whether is is a local proxy ip (localhost address) or not.
*request.remote_ip -> is smarter and gets the ip address of the client outside of local proxies.
3)If you are using apache in front of a mongrel, then remote_ip will return the source address of the request, which in this case will be local host because the Apache web server is making the request, so instead put this in your controller:

@remote_ip = request.env["HTTP_X_FORWARDED_FOR"]