#334 Compass & CSS Sprites
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.
- 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)
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.
Thanks Ryan, the sprite trick is very handy.
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.
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...
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.
There are 2/3 differents concept in your comment :
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.
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.
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
What about different size of images?
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).
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
altattribute 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
I just released a ruby gem to integrate normalize.css with the asset pipeline.
y u no use mixins?
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?
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.
Learn how to Create Sprite Images using Compass Rails 3.0.1 Gem in Rails 4.2.5