Themeforest to Rails App

问题

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.?

回答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 :

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

-assets
   - fonts
   - images
   - javascripts
   - stylesheets

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

 ...
}

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" %>
```

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 %>

Editing any file to conform with rails

You can read this
- Assets Pipeline
- Layouts and Rendering in Rails
- Form Helpers
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 )
```

回答2:

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.?

The bottom line is if you're going to do the job, do it right

To do this, I would personally integrate the theme from the ground-up. Firstly, by changing the various layouts you may have (to accommodate the classes & styling of the theme), and then working through each part of the system to style it accordingly.

Assets

In order to render the assets correctly, I would most certainly include them in the app/assets folder, rather than public/____. Reason being they are part of the general assets of the application, and need to be kept within the asset pipeline.

I would therefore basically do 3 things:

Put the images from the theme into app/assets/images

Put the stylesheets from the theme into app/assets/stylesheets

Put the javascripts from the theme into app/assets/javascripts

I would then go through the application & work to get the styling to work correctly (starting with the layout as mentioned).

I think it's important to point out that in order to achieve the best results, you will be best doing things right -- sitting down and working through the styling properly.

回答3:

here's my workflow:

I usually structure my assets like this (say it's an admin template and theme files are in sass)

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

      admin.scss.scss

inside admin.css.scss

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

I usually do the same with javascript

as for the html's

I usually do render per section (one partial for the topbar, sidebar etc..)

I usually place them in

/app
  /views
    /partials

so I'm calling

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

Hope this helps

来源：https://stackoverflow.com/questions/24051008/themeforest-to-rails-app

标签

ruby-on-rails

themes