Embed ERB Ruby Code in CSS in Rails

Did you know that you can embed erb code into CSS in rails? I just learned it, and its awesome, and simple.

Start by adding the .erb extension to your css file:

pages.css.erb

Then bam! you can put erb in your css code:

.navbar-brand {
background-image: url(<%= asset_path 'new-logo.png' %>);
background-size: contain;
background-repeat: no-repeat;
}

Use jQuery to Animate Background Color

Although CSS keyframes is probably the easiest way to animate the background color of an element on the page, since earlier versions of Internet Explorer (IE < 10) don’t support CSS keyframes, if you need a more widely supported solution, you can do the same thing in jQuery.

To do this, you use the jQuery .animate() function.  The catch is that in order to be able to change colors with this function, you also need to include the jQuery Color plugin.

The way I did this in Rails was to just create a new file under assets/javascripts and called it jquery_color.js. Then copied the code from the plugin into that file.

Ok, now for the actual code. Credit for this goes to StackOverflow user fitorec‘s answer to this question, and this jsfiddle that he wrote.

$(document).ready(function() {
  var animate_loop, colors, i;
  colors = ['#FFB30C', '#58EC00', '#0087EC', '#EEEEEE', '#FF5A00'];
  i = 0;
  animate_loop = function() {
    $('body').animate({
      backgroundColor: colors[i++ % colors.length]
    }, 1500, function() {
      animate_loop();
    });
  };
  animate_loop();
});

This creates a colors array with the colors that you want to animate. Then it calls the .animate() function, passing in the backgroundColor property, and assigning it to one of the colors in the colors array, and iterates i to go through the array. The animate_loop function then calls itself, to create an infinite loop.

Of course if using Rails you can use js2coffee to convert to coffeescript.

Make The Height of a Parent Div Wrap Around The Children with Float

Checkout how I learned this on my other blog.

How to Center Bootstrap Columns

Sometimes you want to center the columns when using Bootstrap.  I was using only like 3 columns of varying sizes, but I wanted to get them centered. So here’s how I did it, with all credit going to minimit and this article.

Add the .row-centered class to your rows and the .col-centered class to the columns in your html.

And here’s the css for those classes:

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

CSS or Javascript Assets not Working on Heroku Production

I had a weird issue where on my local environment, everything worked fine, but on production when pushed to heroku, my javascript and css files weren’t getting loaded.

Now I don’t fully understand the asset pipeline and if/how it was involved in this error, but here’s what worked for me.

Simply manually precompile assets prior to pushing to heroku:

bundle exec rake assets:precompile

You will notice that this create a bunch of files.  Then you need to commit to git, and push to heroku again.

git add .
git commit -am "message"
git push origin master
git push heroku master

If you know a good explanation of why this is necessary, please let me know!

Credit here.

Making text and its parent item with different opacity using bootstrap

I’m using the ‘well’ class from bootstrap.  Since in this case I have a background image behind the well, I wanted to make it somewhat transparent.  But the text in the well becomes really hard to see:

Screen Shot 2014-02-14 at 5.46.50 AM

So I wanted to keep the text and buttons inside the well with opacity at 1.0.  How can I do this? Well first, instead of using the opacity value in the css file, us the background-color with its rgba values (a meaning the alpha value, or transparency), like this:

.well {
background-color: rgba(39, 174, 96, 0.6);
}

Then, I put everything inside the well in another class. I called it field

.field {
opacity: 1.0;
}

And now the well stays transparent, but everything else inside is not transparent.

Screen Shot 2014-02-14 at 5.54.37 AM

Also, if your changes to the css don’t seem to be showing up in your rails app, don’t forget to precompile your assets:

rake assets:precompile

or

rake assets:precompile RAILS_ENV=production for heroku or your production environment.

Some credit goes to this site.

Add a background image to a Ruby on Rails app using Bootstrap CSS

Seems like something very simple to do, and it is.  Although it took me half an hour of searching Stack Overflow and playing with the code to get it to work.  Several sites showed what code to write, but very few showed where to put the code.  Here’s what I did, using Rails 4 and Bootstrap 3.

UPDATE: Thanks to Rene Paulokat and Roberto Trevisan for their help and comments, I’ve improved several things here.

Go to /stylesheets/scaffolds.css.scss 

in the body block, add this code for the image

background: url('/assets/fire_breathing.jpg');
background-image: image-url('fire_breathing2.jpeg');
background-repeat: no-repeat;
background-size: 100%;

Then put the image you want to be your background into "app/assets/images/backgroundimage.jpeg" in whatever format you want.

Edit: Two things to note here. 1) As per Roberto’s comments, I used the tag “image-url” instead of just “url”.  I believe this now allows the image to be loaded in the rails asset pipeline.  2) you don’t need the ‘/assets/’ in front of the image path.  Rails and the asset pipeline will automatically check in the ‘app/assets/images’ folder, so you don’t need any leading path, unless you make a folder within that folder.

The background-size line makes the image fit exactly to its parent attribute, which in this case is the body of the html document.

Note that for production, for example if deployed on heroku, you will need to change the location of the image to the /public folder because thats where it will look for images in production.  Put your image in that folder, than update the image url to:

background: url('/fire_breathing.jpg');

Edit: The above turns out was incorrect.  Per Roberto’s comments, the development and production code should usually be identical. By making the edit above using the “image-url” tag, the app will look in the ‘app/assets/images’ folder, so we don’t need anything in the public folder.  However, I still needed to run:

RAILS_ENV=production bundle exec rake assets:precompile

to precompile the assets in production.

Also note, simply having the slash “/” in front of the image file name can make this not work.

Hope this is helpful to you!

Screen Shot 2014-01-24 at 5.55.05 AM