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.?
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
Home
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 )
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.
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
Related
If I have Javascrips/CSS files from an ASP .NET Project and I want to put them in my Rails project. Where's the best place to put them? Do I need to change every url into <%= asset_path "img" %>?
Put it in assets folder and add below line in views:
To add CSS files:
<%= stylesheet_link_tag "test.css" %>
To add JavaScript files:
<%= javascript_include_tag 'test.js'%>
Building on #Unknown's answer:
Yes, you do need to use asset_path, or one of the sprocket helpers, to refer to your assets in your CSS file so that they will properly include the MD5 fingerprint. Plus, this way you get the right asset between development and production (since they don't live in public while in development). Here's the relevant guide: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
According to http://railsapps.github.io/rails-javascript-include-external.html
The best practise for DRY and speed (according to article above) is to download all files to your projects assets folders, put them in the assets pipe for each application.js/.css and let rails compile them into one application.js and application.css in production mode. There are several ways to do this in detail (see link) The preferred way according to article for speed and DRY-practise is to call all js and css from application.css/.js and not put stylesheet_link_tag, calling css or js from view-files. This even though you may have one specific user.js which you only want to use on users page. Though there are ways to load specific files into specific views (see article for details)
Ecxept from having to call them in once in head of application.html(.haml/.erb):
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
If you are calling files in css eg. an image, as long as you have the image in "assets/images" you only need to refer to the images as 'image.jpg' in your css/js-files.
Due to a specific setup, I would like to split the compiled stylesheets in two files. This is because (a part of) the CSS is needed for a Java application which can parse the CSS, but it is a bit buggy and can't handle some css-(hack)-syntax. Because I am unable to modify this Java application, I want to feed it only the CSS which it needs and of which I can make sure it is correct.
So, normally the assets pipeline would produce just one '/assets/application-[..].css' file. It would to let it also generate '/assets/custom-[..].css', based on a file selection I make. This still can be pre-compiled.
Is there a way to do this? Although I understand this is not the ideal setup..
To tell rails about additional files you wish to have precompiled, you can add them to the config.assets.precompile setting.
config.assets.precompile += ["other_application.css"]
You only see application.css in your HTML because that's the only file you're including
<%= stylesheet_link_tag "application" %>
If you have some custom.css.scss in your apps/assets/stylesheets directory, it will be compiled just like application.css.
For example, I might have
- _common.css.scss
- application.css.erb.scss
- other_application.css.erb.scss
in app/assets/stylesheets. In the top of the non-partial files I will put
#import "common";
to include _common.css.scss. I can now reference either stylesheet independent of one another in a layout.
<%= stylesheet_link_tag "application" %>
# or
<%= stylesheet_link_tag "other_application" %>
Using Rails 3.2.1
I created a simple controller called Home using the command:
rails g controller Home index
And it created a new controller and view for me:
Notice how there are two stylesheets, one "Application" and one "Home". I can't find any documentation to support this assumption but I'm guessing you put styles that will only be applied to the "Home" views, in the Home.css.scss file, correct?
So as a test, I added in some global styles to Application.css.scss.erb and ran the application.
The styles applied as expected.
Next, I added in some rules to the Home.css.scss file and I visited a "Home/index" view, yet the style in that file wasn't attached, neither as a seperate CSS reference link, or even appended to the single Application.css.scss file. This is highly confusing to me, since the comments say:
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
Why aren't the rules written in Home.css.scss applied to my website?
It can work this way and Marek is quite correct, the answer is in the guide.
In the introduction to section 2.1:
For example, if you generate a ProjectsController, Rails will also add a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.
So to set your application up to load controller specific stylesheets:
First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.
Typically you'll see an entry like this:
*= require_tree .
If you still want to load some common css files, you can move them to a subdirectory and do something like this:
*= require_tree ./common
Second, In your application's layout add the suggested stylesheet_link_tag eg
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag params[:controller] %>
In this example we first load the application css file, we then load any css file that matches the current controller name.
I've solved this problem with a simple solution. I add to body the controller name as a class, editing views/layouts/application.html.slim:
body class=controller.controller_name
Or views/layouts/application.html.erb:
<body class="<%= controller.controller_name%>">
And then in my css I just use body.controller_name as a namespace:
/* example for /users/ */
body.users {
color: #000;
}
body.users a {
text-decoration: none;
}
For small projects I think it's fine.
I don't think it works that way (Home.css being applied only to Home controller actions). The different files are just for separation, to make it clearer what are the CSS rules describing. You can read this guide about the asset pipeline. I'm guessing you altered the default application.css.scss and removed the line importing all CSS files from app/assets/stylesheets.
TL;DR:
Ignore the comment, it's not made by Sass. But put:
#import "*";
into your application.css.scss file, and it will automatically import all the controller scss files.
Full read:
Disclaimer: This is my current understanding of the asset pipeline flow with and without Sass.
I think this comment is written by the standard Rails Asset pipeline (sprockets), and not by Sass:
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
The standard pipeline will handle scss files but doesn't presume an application.css.scss file. But if you create such a file with Sass, then Sass will compile it to the application.css file.
If you use the normal Rails asset pipeline, without Sass, then sprockets would load the css file into the application.css file automatically (if that file has the default *= require_tree . line in it).
When you use Sass, with an application.css.scss file, Sass will compile this file into a application.css file. (I assume it would overwrite or take precedence over any application.css file you already had).
To get your home.css.scss file (and other controller files) automatically included, put this line into your application.css.scss file:
#import "*";
For reference, see this question:
Is it possible to import a whole directory in sass using #import?
I'm having a strange problem with css on rails. In app/views/search I have 2 files: index.html.erb and the other is result.html.erb. Their css are in public/css/results.css and public/css/index.css.
The problem is: One of them (index) loads its css, but the other no.
More informations:
I'm also using a jquery theme, that is in app/asset/stylesheets and my app/view/layout/application.css is correct, addind the jquery.
When i put the result.css on asset directory, it works. But it's not what i desire. I want this css only on the public folder
Have you tried placing a stylesheet_tag in your layout file (app/views/layouts/application.html.erb) with an absolute path?
<%= stylesheet_link_tag "/css/results.css" %>
Edit: Corrected the wrong method name.
How do I use CSS with RoR? When I link externally, I'm never able to see the files. I cp'd the .css file to every folder I could think of...views, controller, template, and nothing seems to work.
What do I need to do to enable external CSS files with a rails application? I'm new to rails, so forgive me if this is basic.
Put the CSS files in public/stylesheets and then use:
<%= stylesheet_link_tag "filename" %>
to link to the stylesheet in your layouts or erb files in your views.
Similarly you put images in public/images and javascript files in public/javascripts.
If you are using rails > 3 version, then there is a concept called asset pipeline. You could add your CSS to
app/assets/stylesheets
then it will automatically be picked up by the app. (this is useful as rails will automatically compress the CSS files)
read more here about the asset pipeline
Use the rails style sheet tag to link your main.css like this
<%= stylesheet_link_tag "main" %>
Go to
config/initializers/assets.rb
Once inside the assets.rb add the following code snippet just below the Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( main.css )
Restart your server.
I did the following...
place your css file in the app/assets/stylesheets folder.
Add the stylesheet link <%= stylesheet_link_tag "filename" %> in your default layouts file (most likely application.html.erb)
I recommend this over using your public folder. You can also reference the stylesheet inline, such as in your index page.
The original post might have been true back in 2009, but now it is actually incorrect now, and no linking is even required for the stylesheet as I see mentioned in some of the other responses. Rails will now do this for you by default.
Place any new sheet .css (or other) in app/assets/stylesheets
Test your server with rails-root/scripts/rails server and you'll see the link is added by rails itself.
You can test this with a path in your browser like testserverpath:3000/assets/filename_to_test.css?body=1
To add to the above, the most obvious place to add stylesheet_link_tag is in your global application layout - application.html.erb.
With Rails 6.0.0, create your "stylesheet.css" stylesheet at app/assets/stylesheets.
Have you tried putting it in your public folder? Whenever I have images or the like that I need to reference externally, I put it all there.