RailsCasts Pro episodes are now free!

Learn more or hide this

Compass & CSS Sprites

#334 Compass & CSS Sprites

Mar 21, 2012 | 9 minutes | Views, Plugins
Compass improves the Sass experience by providing useful mixins, functions, and more. You will also learn how to make CSS sprites with it in this episode.
Click to Play Video ▶
  • Download:
  • source codeProject Files in Zip (102 KB)
  • mp4Full Size H.264 Video (33.2 MB)
  • m4vSmaller H.264 Video (14.2 MB)
  • webmFull Size VP8 Video (14.2 MB)
  • ogvFull Size Theora Video (36.1 MB)
Avatar
Brian Morearty over 12 years ago

Hey Ryan, at the end when talking about Compass Reset and Normalize you mentioned that trying to make all browsers consistent isn't necessarily required for every website.

I agree with you that it's not necessary to have your site look exactly the same, down to the pixel, across browsers. I've had to convince designers that trying to achieve that is a waste of time. But still, do you ever find yourself sometimes wishing your spacing were a little more consistent on different browsers because you didn't always start by normalizing the CSS? And then wasting some time fixing up the differences introduced by normalizing later?

Keep up the good work. The pro episode you mentioned about deploying, nginx, Unicorn, etc. looks like it could be really useful.

Avatar
Trung Lê over 12 years ago

Thanks Ryan, the sprite trick is very handy.

Avatar
David Brear over 12 years ago

I'm just glad the term "bootstrap" was not included anywhere in this video. Seems that's become such a buzz word as of late. Great episode Ryan! As Trung said, the sprite aspect is pretty slick.

Avatar
Aldo "xoen" Giambelluca over 12 years ago

Personally I'm confused about all these CSS "frameworks"/tools, everyone has something useful, Compass is good for the sprite facility and the CSS3 functions to generate all the browser-specific rules, Bourbon has a similar functionality, there is also Blueprint and Twitter Bootstrap (it's fashion these days as David already said). A thing I like of Bootstrap is the way it can help your site to adapt to mobile devices (try to visit its website and resize the browser window).

...some of these features can help for sure but my mind is exploding with all these choices...

Avatar
Maurizio De Magnis over 12 years ago

You have to understand the rationale behind each of these tools in order to understand if some of them can fit your needs.
Right now Compass gives you the ability to start from the ground up whereas Twitter Bootstrap is an excellent head start for rapid prototyping.
As Ryan pointed out, Bourbon provides a subset of Compass features.
Finally, Blueprint is a grid system that can be applied on top of Compass, but I suggest you to take a look at Susy instead if you need one.

Avatar
FONTAINE Cédric over 12 years ago

There are 2/3 differents concept in your comment :

  • CSS precompilers, like SASS or LESS, which add scaffolding, variables and mixins
  • mixins libraries that simplifies some tasks like CSS3 vendor prefixes, like Bourbon or Compass
  • frameworks that offer a base structure to your project, a "bootstrap"

Twitter Bootstrap for example uses Less by default, but there are fork that works with Sass.

Blueprint is also available as a Compass module : if you import compass/sass, you get a whole lot of mixin to generate blueprint css that suits your need. You can also make a fluid grid layout with these, just like with Twitter Bootstrap.

I love Sass/Compass, and I am currently trying Twitter Bootstrap on a project.

Avatar
Peter Liu over 12 years ago

I like Twitter Bootstrap because it has same nice CCS features and javascript features like pophover, drop down menus, etc. I suppose one can use jQuery to achieve that but Twitter Bootstrap makes it really nice. My only compliant is that it uses LESS instead of SASS.

Back to Compass, can one have BOTH Compass and Twitter Bootstrap? I would like to have the dynamic nature scaling for mobile devices while having the mixing of Compass.

Avatar
Denis R. over 12 years ago

Has anyone checked out the offering from ZURB? I use it with Bourbon to do pretty much everything I do with Compass.

It even has a gem

Avatar
Ruslan Kornev over 12 years ago

What about different size of images?

Avatar
Damien Roche over 12 years ago

Why are you not now using sprites for the area of your site shown in the video? Had to ask (practice what you preach, and all that).

Avatar
Dominick about 12 years ago

Damien, that is a valid question. A potential answer might be that Ryan was merely using those share icons as an arbitrary and easy-to-grasp example. But, he may have left them not-sprited on this site for accessibility reasons; images that have a function (merely than just aeshtetic) have the crucial alt attribute for screen-readers and when an image is broken or not loading for whatever reason.

If you Google search for something like "css sprites alt accessibility" you'll find plenty of arguments for what best practices are when it comes to Spriting, but the consensus seems to be "don't Sprite everything" as well as numerous different approaches to hacking emulation of alt tags.

Avatar
Mark McConachie over 12 years ago

I just released a ruby gem to integrate normalize.css with the asset pipeline.

https://github.com/markmcconachie/normalize-rails

Avatar
Allanon29 over 11 years ago

Great video!

I am trying to use Compass with Rails 4 rc2 but just recently I got an error when I generated a new migration and I suspect that Compass is one of the reasons why I get it:
"Don't know how to build task 'assets:precompile:primary'"

Would You be so kind to give me some pointers where I should look for the solution for this error?

Best Wishes,
Matt

Avatar
James McBride about 11 years ago

I love every video Ryan does. Even those I don't understand, which is quite a few ; ) I'm a noob.

Quick question. For the sprites functionality portion of this video, do I really need that if the Asset Pipeline is working to concatenate my assets? I presume the sprite images will already be made one request. Sorry if I'm completely missing the point of sprites.