I am building a Rails 3.2 app which has some functionality where a user can apply different themes (i.e. CSS files) to their websites. I have a Theme model with a theme name and a file name - pretty straightforward.
My question is, where should these css files sit? Should they be in the /assets folder, or in the /public folder? They can't be added to the pipeline as far as I know as I don't know which css file the user will choose so can't precompile.
If I use something like:
stylesheet_link_tag "plain.css"
It of course generates a path to /assets/plain.css which is not a valid path.
I can put it in /public and generate the path using something like
"public/themes/" + theme.file
But something about that feels wrong. Any architecture suggestions?
If all themes are simple pre–existing stylesheets of which the user picks one, I’d go with
/app/assets/stylesheets/themes/plain.css
Then use this in the view:
stylesheet_link_tag "themes/plain"
# or e.g. using the model
stylesheet_link_tag "themes/#{current_user.theme.file_name}“
You could also consider creating a theme_stylesheet_tag helper which does this for you in a more cleanly way.
Related
So unless I can not Google properly I can't find a definitive 'best practice' way to use Vendor styling in Rails 7.
It's the same with everything but say I am including Froala Editor and I include the JS through ImportMap and everything is great.
The way that I have found to include the styling for it though is to download the CSS and put it in a /vendor folder in my stylesheets directory and then include it.
Surely I am missing something simple...
Here is how I am adding css files
Create a vendor/stylesheets folder
Modify config/initializers/assets.rb and add
Rails.application.config.assets.paths << Rails.root.join("vendor", "stylesheets")
Then
Download css files into vendor/stylesheets folder (you may need to create the stylesheets folder)
Add to app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", "cssfile.min", "data-turbo-track": "reload" %>
I'm currently working on landing and login/signup pages, and am trying to apply different stylesheets to each layout. I've tried making a separate layout page for my home controller and calling it in my home controller with layout "home". My app/views/layouts/home.html.erb file is pretty much the same as application.html.erb, except that I changed the stylesheet_link_tag from <%= stylesheet_link_tag "application" %> to <%= stylesheet_link_tag "home" %>. Though the styling from my login/signup pages is no longer applying to my landing page, my landing page now no longer has any of the styling given to it in my app/assets/stylsheets/home.scss file. Is there more I'm supposed to change in my layouts file than just the stylesheet_link_tag, or am I setting up separate stylesheets for each view improperly? If so, what's the proper way to do it?
i wouldn't recommend changing this<%= stylesheet_link_tag "application" %>, instead, in my opinion, best way is to create a folder in assets/stylesheets for each controller you have. for example: i have home_page_controller.rb i would create a folder in assets/stylesheets as home_page then i would make a scss file e.g show. this allows me to navigate to my files easily. of course you can have your different approach but thats my take on it.
I figured it out and got it to work by putting <body class="controller-<%= controller_name %>"> in my application.html.erb file, and placing whatever styling I wanted for my "home" views under .controller-home
Since rails generate scaffold generates CSS and JS files with the same names as the controller you generate it might be intuitive to think that these files will only be loaded by that controller. That's not the case. They're loaded globally by default, and that's sort of the point.
Like Marv-C said, I wouldn't recommend changing <%= stylesheet_link_tag "application" %>. In production mode, Rails optimizes your CSS by loading all of it into a single file.
This also means you can structure your CSS documents any way you want. You can eliminate overlap between CSS documents by using sensible class and id-selectors (which you should).
If you take advantage of SASS nesting, it should be no problem at all.
http://sass-lang.com/guide
I'm using spree 2.1.5, rails 4.0.2, sass-rails 4.0.0.
The spree documentation at http://guides.spreecommerce.com/developer/asset.html indicates using the vendor/assets/stylesheets folder. However, examples I see of spree stylesheet overrides on Github and from other google search show many people using the app/assets/stylesheets folder.
Is it best to override spree styles in the folder my_store/app/assets/stylesheets? Or my_store/vendor/assets/stylesheets?
I put my css in the "normal" place - in app/assets/stylesheets, and nothing changed. I put my css in the vendor/assets/stylesheets folder, and they were applied.
Working with Spree very un-like working with "Rails" - though spree is running on a rails server. The process starts with, "Where are the files?" and gets more bizarre from there. This is why I am abandoning it for a custom solution. In many cases, it would take longer to learn how to modify/customize Spree, than to write a new solution (for the parts of it we actually need) from scratch.
Update:
Unlike stated in my original answer, Spree will not even evaluate stuff in app/assets/stylesheets and style customizations need to be made in vendor/assets/stylesheets, e.g. in
vendor/assets/stylesheets/spree/frontend/all.css
TlmaK0 is perfectly right pointing this out.
Quoting from http://guides.rubyonrails.org/asset_pipeline.html:
Pipeline assets can be placed inside an application in one of three
locations: app/assets, lib/assets or vendor/assets.
app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared
across applications.
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Short: You probably want to put your override stuff into app/assets/stylesheets.
Normally all the code for font-end and back-end for spree loads into to your rvm as other gems, you can override them by creating decorators folder into app(same as like models, controllers). Or you can put the file at the same location(but this is not right solution) and can make the change like mainapp/app/views/spree/admin/shared/_header.html.erb
For decorators example say I want to override spree's products_controller I will put it at decorators/products_controller_decorator.rb
Spree::ProductsController.class_eval do
#mychanges
end
Export all views to app/views with:
rails generate spree:frontend:copy_views
This will generate all frontend views in app/views to override it.
Edit app/views/spree/shared/_head.html.erb and add:
<%= stylesheet_link_tag 'application', media: 'screen' %>
to include app/assets/stylesheets folder.
Checked out some links, but it seems that people who answer assume a little bit more than I know.
I'm using Rails 3.2.13 and I need to add some styling to my Views.
I have the assets/stylesheets/trade_page.css. What steps do I have to take, where do I have to reference it, what line do I put inside the View pages to use this styling?
Take a look at the asset pipeline documentation. You will need to require the file within your application.css file (if you are not already requiring the whole tree) and then the most common place is to include the application.css file using a stylesheet__link_tag in the application.html.erb file
I have this:
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include("~/Content/Styles/Default/Site.css"));
On my sites i have this:
#section Styles
{
#Styles.Render("~/Content/Styles/Default"))
}
My _Layout.cshtml looks like this:
#RenderSection("Styles", true)
Everything looks good, eh? Well, not really. When i compiled my application in release mode, decided to publish it, this is what it renders:
<link href="/Content/Styles/Default?v=78dkNySP_xsiuzsgxCx_GGnnHzYS-B8nNdnXqcl47XI1" rel="stylesheet">
Instead of generating href to a file, it generates some kind of id? Guid? Why? O.o
This is how bundles work. It's main purpose is for you to combine multiple CSS (and JS files for that matter) files into one package. e.g. you no longer have to put all your css (and js) into one huge file. Just split it up into sections, then add it into your bundles, and it packages it up into one item. Less web requests, the faster your page load time.
e.g. Lets say you had 2 css files. One's the main, but you had one for your menu system.
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include(
"~/Content/Styles/Default/Site.css",
"~/Content/Styles/Default/Menu.css"));
This would show up as a single call with the GUID type code (to prevent caching on file changes) on the URL. This URL will link to a minified and bundled css.
But my browser cannot read that! There is no physical path to a file!
It's a sort of virtual file. MVC's bundling uses the routing engine to point it to a combined and minified version of a particle bundle.