Thoughts, information and reflections about technology

Responsive pages with Artisteer / Ruby

I use Artisteer to generate the templates for my Joomla, WordPress and Rails sites. I put together a Ruby on Rails site and it was not responsive. I dusted off some memory cells and remembered that there was a line in the layouts/application.html.erb file that needed to be changed. A file comparison with the same file from an app that was responsive pointed me in the right direction.

There was a line

<%= javascript_include_tag ‘default’, ‘data-turbolinks-track’ => true %>

that I brought over from the default ruby application.html.erb file.

That needed to be changed to

<%= javascript_include_tag ‘application’, ‘data-turbolinks-track’ => true %>

You also need to be sure to add the following to your app/assets/javascripts/assets/js

//= require script
//= require script.responsive

and  the following to config/initializers/assets.rb

  Rails.application. config.assets.precompile = [‘*.js’, ‘*.css’, ‘*.css.erb’]      #for Production
Rails.application.config.assets.precompile += %w[*.png *.jpg *.jpeg *.gif]        #for Production
Rails.application.config.assets.precompile += %w(script.js)
Rails.application.config.assets.precompile += %w(script.responsive.js)
Rails.application.config.assets.precompile += %w( style.css )
Rails.application.config.assets.precompile += %w( style.responsive.css )
Rails.application.config.assets.precompile += %w( style.ie7.css )

Oh, and don’t forget to restart your rails server after all of that is done. If everything goes well, you should now have a responsive site. You can do a quick check by simply resizing the aspect ratio on your browser window. At some point, you should see the block with the three horizontal bars instead of the full menu

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact me
Amazon Disclosure

We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to and affiliated sites.