I just upgraded my project from Rails 3.0.7 to 3.1.0 and I see that I can use SASS now.
I have a page in my application which is just a promotional page at /home/subscribe.html.erb and I would like it to not inherit the css declarations being used throughout the application like the scaffold.css. There is a separate subscribe.css file which I would like it to inherit ONLY.
Even though I have gone inside my application.css.scss and changed it to have only: #import "scaffold.css.scss"; the application.css.scss still gets inherited as a part of the application in to the subscribe page.
can you please suggest how to make the subscribe page ONLY use the subscribe.css file and no other css?
Create a new layout that has a css tag that directly targets the css file you wish to import rather than application.css.
Related
How can I use a theme from Bulmaswatch in my rails app? I'm currently using the bulma-rails gem. Bulmaswatch recommend using their CDN but how to get it work with the asset pipeline? What's the simplest easier way to get it done?
(Supposition is you have routes, controllers, views sorted)
Add the bulma gem (cdn not needed)
Add any number of Boostrap gems that play well with sass
Bundle
Add #import "bulma"; into application file
Restart the server
IMHO the easiest way is:
Under app/assets/stylesheets delete application.css and create a new file called application.css.scss
Then in that file copy paste the code from your favorite theme on bulmaswatch.
There you go, you've got a unique theme working in bulma.
This question is somewhat similar to: How to customize bulma variables in rails
I see https://github.com/seyhunak/twitter-bootstrap-rails how I can add bootstrap to a completely new application, using rails generate scaffold Product name price:decimal --skip-stylesheets.
My question is: how do I delete the current assets (e.g. stylesheets) from an existing application so I can install bootstrap and not have any conflicts?
PS this command seems to be for a scaffold - does it create a layout for the entire application?
If you use SASS, there is a gem https://github.com/thomas-mcdonald/bootstrap-sass that you could use instead of doing what you are trying now. As long as you have
#import "bootstrap";
in a stylesheet in app/assets/stylesheets ending with extension .css.scss (e.g. example.css.scss)
Your stylesheet are stored under app/assets/stylesheets and listed individually in a manifest file, which by default is app/assets/stylesheets/application.css.
Do not delete the manifest file. Open it, go through every item listed and delete them one by one -- both the manifest entry and the actual files. Pay attention to the require_tree and require_directory directives since they include entire directories.
I've got a Ruby on Rails app running with Bootstrap, which I installed using the gem twitter-bootstrap-rails.
I'd now like to integrate a new Bootswatch theme, but I'm having trouble figuring out what to do.
There are four possible downloads for each theme - a bootstrap.css file, a bootstrap.min.css file, a variables.less file, and a bootswatch.less. My question is: do I need to download and add them ALL to my ~/app/assets/stylesheets folder? or do I just need a subset of those? Currently inside ~/app/assets/stylesheets are just two files: application.css and boostrap_and_overrides.css.less. LESS really throws me off here so I'm totally confused with how it works and what I need to do to add new css files with this setup. Any help is appreciated.
You only need to download the bootstrap.css file, and rename it. The bootstrap.min.css is the same as the css file just a minified version of it. Less is just another way of writing css and accessing each property differently. Check out less. Add css file and begin integrating into html, also point html to new stylesheet.
Here's a twitter bootstrap gem for easy Bootswatch theme integration/customization for rails:
https://github.com/scottvrosenthal/twitter-bootswatch-rails
I'm trying to find the twitter-bootstrap files in my rails app ('bootstrap-sass', '2.0.0'), as I need to make a change directly to the bootstrap-responsive.css file, however, I can't find it.
I have bootstrap up and running, but can't seem to find the bootstrap files. How do I locate the bootstrap-responsive.css file?
Thank you!
The bootstap-sass gem uses the Rails 3.2 asset pipeline to inject the necessary stylesheets into your app. The actual stylesheet files are located in the gem installation directory, not in your project itself.
Depending on what you want to change, you can either:
Copy the _bootstrap-responsive.scss file from the gem into your app/assets directory and edit it there.
Customize the necessary Bootstrap variables before loading up Bootstrap in your application.scss file:
$btnPrimaryBackground: #f00;
#import "bootstrap";
Edit: Try looking under
app/assets/stylesheets
Here's an example
https://github.com/joliss/solitr/tree/master/app/assets/stylesheets
I'm not too familiar with the structure of rails apps but did you create a local copy or are you using the bootstrap files being hosted directly by github? You should be able to figure that out by checking one of your launched html pages and viewing the source, looking for something like
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
If it's a local page, there should be a directory somewhere in your rails app where the files are stored - perhaps there's a 'static' folder or something similar? Try file-searching for it, good chance you might find it.
(I use Django/Python for web projects but I'll look into Rails a bit and see if I find anything)
I am using Rails 3.2.1. How do I add external style sheets in my rails application?
I've tried the following answers to no avail:
How do I link to an external stylesheet in Ruby on Rails? - but the link given in the answer is not working.
How do I use CSS with a ruby on rails application? - which says to add stylesheet in public/stylesheets, but I do not have folder named public/stylesheets. I do have a public folder, but I have stylesheets folder under /vendor/assets.
css #import external style sheet - but it's unclear.
I'm just going to assume you're already using something like this in your layout:
stylesheet_link_tag 'application'
If you want to refer to an external stylesheet then all you need to do is pass in the url.
stylesheet_link_tag 'application', 'http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css'
If you want to include the actual files in your codebase:
app/assets/stylesheets is where you should place your main css files.
vendor/assets/stylesheets is where you should place the css files for any plugins that you might have.
It's the same for js files. For example your application.js would go in app/assets/javascripts and a jquery plugin like timeago.js would go in vendor/assets/javascripts.
After looking for a solution to this problem for a while, I found this step by step tutorial which explain how to implement a bootstrap theme to a rails app => http://www.notch8.com/implementing-a-bootstrap-theme/
You can apply this to other CSS and JS templates than a Bootstrap one.
Hope this help (sorry if I make english mistakes)