April 22

0 comments

Responsive pages with Artisteer / Ruby

By Christopher Mendla

April 22, 2016

Artisteer

Last Updated on November 30, 2019 by Christopher G Mendla

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

Christopher Mendla

About the author

Leave a Reply

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}