Themeforest to Rails app

Question

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

• Do you put all downloaded assets in a shared folder? Or do you put them in the appropriate folders in the application / assets, and then capture the URLs of the images, etc.?

Answer 1

I think this question will get answers based on opinions, but you can try this stone 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 there, my answer will be a complete message)

According to your question:

Do you put all downloaded assets in a shared folder? Or do you put them in the appropriate folders in the application / assets, and then capture the URLs of the images, etc.?

My workflow looks like this:

• Put the css, js, image, font files in the assests directory

  -assets
     - fonts
     - images
     - javascripts
     - stylesheets
  

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

  If I use extention css.erbfor css file, url image, url font should be right:

  picture:

  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 the extension css.scss

  picture:

  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'),
  
   ...
  } 
  

• html (, , , ), (, ..). html.erb

  -views
     - layouts
     - partials
       - form
       - index
  

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

• , url, .. rails ( erb)

  html

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

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

  html

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

  <%= link_to "Home", root_path %>
  

  this

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

• • Assets Pipeline

• . , config/application.rb, :

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

Answer 2

? /, URL ..

, ,

, . -, layouts, ( ), , .

-

assets, app/assets, public/____. , .

3 :

• images app/assets/images
• stylesheets app/assets/stylesheets
• javascripts app/assets/javascripts

, ( layout, ).

, - .

Answer 3

:

(, )

/app
  /assets
    /stylesheets
      /admin
        _modal.scss
        _reset.scss
        _button.scss
        ....
      /vendor
        /bootstrap
          bootstrap.min.css
        /font-awesome
        ....

      admin.scss.scss

admin.css.scss

@import 'vendor/bootstrap/bootstrap';
@import 'admin/modal';
@import 'admin/reset';
@import 'admin/button';

javascript

html

( , ..)

/app
  /views
    /partials

<%=render '/partials/topbar'%>

,