Posts Tagged ‘Compass’

Web Development In 2011 Part 2: Are We Getting Dumber?

Thursday, April 28th, 2011
Web Development In 2011 Part 2: Are We Getting Dumber?

Still more no charge awesomeness

Before I start my small discussion on “Are We Getting Dumber”, let me just say that there is yet even more kick ass things that have come out since I wrote the first part of this little series. Sass 3.1.0 came out, and is going by the name of Brainy Betty. It added some neat stuff to its already great ability, like getting the inverse of a color, Sass based functions, keyword arguments, and more. Granted I probably won’t use a lot of it, but it is still cool that it has been updated. You can read about the improvements it received on Sass’ changelog. Just to note as well, Haml and Sass have been separated into two different gems, so you can install them independently now.

Compass received an update as well, going to version 0.11.1. Some things have changed in this new version which might force you to go back and rewrite some things if you update, but I’ll let you know about that when I upgrade this week. I read the change log and a couple of things stand out. First, is that the linear and radial gradient mixins have been deprecated. We’ll use the background-image mixin instead, and pass it a gradient function. Here is an example of the old way (from my site):

#myDiv {
@include linear-gradient(color-stops($orange, darken($orange, 25%)), left); 
}

And what it will look like now:

#myDiv {
@include background-image(linear-gradient(left, $orange, darken($orange, 25%))); }
}

(more…)

Compass Gets An App – No Command Line Needed

Friday, April 8th, 2011
Compass Gets An App – No Command Line Needed

Another post on what you think about Compass?

Oh shut up. If it wasn’t as bad ass as it is, I wouldn’t write about it. This isn’t really about Compass though. Well…it is, but more about the app that was built for it, so that users don’t have to use the command line. Honestly, if I can figure out how to at least make Compass compile my Sass through the command line, then anyone can. BUT…this makes the whole process of a hell of a lot easier.

Compass made easier

At first, I thought, the command line really isn’t that hard because you only need to know a few commands, why do I need an app to do this? Then I tried Compass.app by Handlino. After trying it out, there is only one reason why I can see someone not wanting to use this product (which only costs $7 by the way), but I’ll talk about that last.

After you have unzipped the file, and opened the app up, all that happens is that a gray version of the Compass logo appears in your task bar. When you click the icon, you get several things you can do, depending on where you are in your project. If you are starting a new one, you have a bunch of different Compass project options you can install. I went with the HTML5 Boilerplate option, since I love using it. The others are: Blueprint, basic Compass Projects, 960gs, or HTML5 Boilerplate. You can see what I’m talking about in the image below.

Compass.app project creation

(more…)

My Love For SCSS And Sass Grows

Thursday, April 7th, 2011
My Love For SCSS And Sass Grows

As does my stupidity

I’ve been continuing on with my site redesign, which means I continue to use Sass. I’m dead serious with the title of this post, too. Not just Sass, but Compass as well. Sass would be good by itself, but the stuff that Compass puts in, especially it’s CSS3 module. I have used the border-radius and box-shadow includes enough now, that writing them in regular CSS seems an incredible chore.

I only have to write this:

@include border-radius(10px 0px 0px 10px);

To achieve this:

-moz-border-radius:10px 0px 0px 10px;
-webkit-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
-ms-border-radius:10px 0px 0px 10px;
-khtml-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;

You can see why this is awesome. If you can’t, you should stop reading. No, seriously though, how many of you actually write all of those in CSS? I don’t. I write the one for -moz, -webkit, and the last one. Compass is covering ALL of them, so in effect, it is doing more than I originally would have, and I’m writing less. So how did my stupidity grow? Good question.

(more…)

Informal Interview: Chris Eppstein – Creator of Compass

Thursday, January 13th, 2011
Informal Interview: Chris Eppstein – Creator of Compass

Talking to people in web development

I had a thought the other day and on a whim I asked a couple people if I could get an informal interview. I email them questions, and they give me the answers. I originally planned to ask people that were not in the top tier of popularity…you know, people like…well…me. The ones who write web development blogs because they love what they do, and working in the trenches. People that have something to say that most of us wouldn’t know about otherwise. That plan has somewhat changed when I got a “yes” from someone I didn’t expect to. I plan on doing a bunch of these, but this first one makes me very happy. On to the first of what I call “Informal Interviews.”

Chris Eppstein – Creator of Compass

Chris is the creator of Compass, a stylesheet authoring framework, and is on the core team of Sass — the stylesheet syntax upon which Compass is built. On top of that, he is the Software Architect at Caring.com, a website devoted to caregivers of the sick and elderly. How he has any time left to relax, I’ll never know. On to the Q & A!

(more…)

Create Sprites Using Lemonade In Compass

Tuesday, December 21st, 2010
Create Sprites Using Lemonade In Compass

I have a ton of images, now what?

By now, I would think most of you know how to use sprites. They are extremely useful, and keep the number of http requests down to a minimum. You have this png file that you work on in Photoshop, and you keep adding to it, saving it and whatever else. Get’s time consuming right? At least a little, so shut up you nay sayers. Wouldn’t it be great if there was an easier way? Damn straight!

Thirsty? Drink some Lemonade!

Lemonade for Compass - Sass FrameworkWell Compass makes it easy now, and you don’t need to use Photoshop to do it! Compass has merged with Lemonade to make doing this a cinch. With each new iteration of this framework, something awesome gets added, and this is just plain cool. Now you can take a bunch of images you have and make a sprite on the fly with them. Here is how you go about it.

(more…)