Themeforest to Rails App

Question

This is my first time using an external HTML theme for a rails app. I have downloaded a theme from Themeforest. Of course it comes with tons of JS, CSS and images. I was wondering what workflow most of you guys use when integrating a theme into your rails app.

• Do you put all the downloaded assets in the public folder? Or do you put them in appropriate folders in app/assets and then fix the image urls etc.?

Answer 1

I think this question will get answers based on opinion, but you can try this gem to install static html for your application (not tested) . install_theme gem. For reference to use this gem read this blog http://drnicwilliams.com/category/ruby/ruby-on-rails/page/2/ (If I put tuts in here my answer will full post)

For your question :

Do you put all the downloaded assets in the public folder? Or do you put them in appropriate folders in app/assets and then fix the image urls etc.?

My workflow looks like :

1. Put css, js, image, font files to assests directory

   -assets
      - fonts
      - images
      - javascripts
      - stylesheets
   

2. Editing url image, url font in css files and js files.

   If I use extention css.erb for css file, url image, url font should edit looks like :

   image :

   background-image:url(<%= asset_path 'bg.png' %>);  
   

   font :

   @font-face {
       font-family: namefonts;
       src: url('<%= asset_path('namefonts.eot') %>');
       src: url('<%= asset_path('namefontsd41d.eot') %>?#iefix') format('embedded-opentype'), 
          url('<%= asset_path('namefonts.woff') %>') format('woff'), 
          url('<%= asset_path('namefonts.ttf') %>') format('truetype'), 
          url('<%= asset_path('namefonts.svg') %>#icons') format('svg');
       font-weight: 400;
       font-style: normal;
   }
   

   If I use extention css.scss

   image :

   background : image-url("bg.png")
   

   font :

   @font-face {
   font-family:'namefonts';
   src:font-url('namefonts.eot');
   src:font-url('namefonts.eot?#iefix') format('embedded-opentype'),
   
    ...
   } 
   

3. Choose html structure to layout template (head tag, header, navbar, sidebar footer), partial template (contents, forms etc) - If I use html.erb

   -views
      - layouts
      - partials
        - form
        - index
   

   Coding Links to Assets

   <%= stylesheet_link_tag "application", media: "all" %>
   <%= javascript_include_tag "application" %>
   

4. Editing image tag, url tag, form tag etc to conform with rails template (erb file)

   image tag

   example in html

   <img src="images/rails.png" class="theclass"/>   
   

   change to

   <%= image_tag "rails.png", :class => 'theclass' %>
   

   link tag

   example in html

   <a href="index.html">Home</a>
   

   change to

   <%= link_to "Home", root_path %>
   

   form tag you can read this

   <%= form_tag("action", method: "post") do %>
    <%= label_tag(:q, "Label for:") %>
    <%= text_field_tag(:q) %>
    <%= submit_tag("Save") %>
   <% end %>
   

5. Editing any file to conform with rails

   You can read this

   • Assets Pipeline
   • Layouts and Rendering in Rails
   • Form Helpers

6. Updating the asset pipeline

   The fix is pretty simple. Open your project's config file, located at config/application.rb and add the following line within your Application class:

   config.assets.paths << Rails.root.join("app", "assets", "fonts")
   config.assets.precompile += %w( .svg .eot .woff .ttf )