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

Post a Comment

Popular posts from this blog

Rails Migration Difference between Text and String

Rails Migration Difference between Text and String ? While working with Rails Migration Difference between Text and String is important to be known to every developer. Columns and their data types are finalized while deciding Table structure. This tutorial will help understand difference between String and Text column type and illustrate how to write Rails Migration implementing the same. You might want to read about database.yml files for specifying database configuration for Rails Application. 1. Concepts When String or Text data type is required?     Whenever you require your column to store information which is lengthy in size (Many characters), you need to consider String or Text data type for the column.     Both of them let you store Many(How Many - will see later) characters Difference between String and Text Considering MySQL database Feature     String     Text Length     1 to 255     ...
Post a Comment
Read more

Error malloc(): memory corruption nginx with passenger?

Error malloc(): memory corruption nginx with passenger Passenger issue resolving steps :  sudo gem uninstall passenger(uninstall all passenger) sudo gem install passenger sudo passenger-install-nginx-module --auto --auto-download --prefix=/opt/nginx --extra-configure-flags=none Update nginx config file with new passenger version and restart the nginx
1 comment
Read more

rake db migrate with down, up, redo, rollback options in rails

rake db migrate with down, up, redo, rollback options ? rake db migrate - This can be used to migrate your production/test database using various options like up, down, step, redo, version etc. In this tutorial we will learn how all these options can be used with rake tool to migrate the database. What is rake? rake is basically ruby make. i.e. make tool for ruby It has similar functionality to the make tool that you may have used on unix based systems for comopiling running some kind of script. rake allows you to ruby particular task in the environment that you specify. How to Install rake? You can install rake by installing gem 'rake' as, gem install rake Above command will install the latest version of rake tool avaialable. Various rake db migrate commands Operation     Command     Description General     rake db:migrate     This will migrate your database by running migrations that are not run yet Running specific Migra...
Post a Comment
Read more