A Review Of Compass For Sass

October 26th, 2010
A Review Of Compass For Sass

Front enders be warned, its hard, but worth it

First, if Chris E., creator of Compass, wanders over and reads this, I apologize if I was harassing you with my questions. I’ll post them in the document support section from now on.

Compass does not feel like it is written for non-programmers (which is probably fine for most users and the creator). Why, you ask would that be ok? Because I don’t feel that was their intention. I’ve read that they want to make Sass/SCSS more accessible to people new to it, but if that is true, they is a lot of work. To use them, you need the command line. How many of you are familiar with that? If you are young and don’t remember DOS, it is intimidating. We are used to interfaces, right? I mean, look at the editors we use. The command line has NOTHING to look at. Literally. So besides trying to learn a cool…not sure what to actually call Compass or Sass…technology? You have to dive into using the command line. Forget Dreamweaver for editing your .scss file, won’t work (at least not the version I have CS4)…which doesn’t matter all that much to me since I am using NetBeans and Notepad++. My point is, actually USING these things is great. Getting there sucks.

The install process is a bitch. At least if you go the Ruby way, and I am not sure there is another way, considering it is a gem, but then you have to wrap your brains around that one, too. I know that this sounds discouraging, but I am here to tell you that ALL that crap…is worth it. Just be prepared for some serious learning and a lot of searching.

Read the rest of this entry »

Sass (SCSS) and Compass Cheat Sheet

October 21st, 2010
Sass (SCSS) and Compass Cheat Sheet

Because there isn’t one

First, a huge thank you to Hampton Catlin and Nathan Weizenbaum for giving us Sass.

As far as I know, there isn’t a Sass (SCSS) Cheat Sheet out there, and there should be. I am fairly certain that most people new to Sass and just getting into it have done plenty of searching for what they are trying to do, but find the actual help available lacking. There are very knowledgeable people out there that are willing to help,like Chris Eppstein and Derek Perez, but outside of those two, there are very few places to turn too. The documentation is ok, but I hate weeding through that thing. I want a cheat sheet that shows me how to do specific things. The problem I keep thinking about though is that you don’t just need the syntax, or a list of methods like jQuery, but actual small examples of how to write something. And just to make things interesting, let’s include Compass!

The real problem – I need help

I can’t do it alone, because I am a newbie. I can start it and add to it as I go, but someone more knowledgeable will have to provide the trickier stuff or just things that I may have missed. So, I am asking you to help me and leave a comment on what should be added. I’ll post it in code form below, and provide a pdf file that you can download below. The Compass part I will include in the pdf version.

Download File

Read the rest of this entry »

Sass Rocks! Over Complicating Your CSS Doesn’t

October 19th, 2010
Sass Rocks! Over Complicating Your CSS Doesn’t

Unless you are careful of course

So I’m in the middle of redesigning/rebuilding my main site, as you would know if you are keeping up with me here, and I am using Sass (SCSS syntax). I love it so far. There is a lot you can do to save you time during the build. There is also the “This new crap I’m using is awesome! I’m going to do this and this and this…”, which can get you in trouble. What kind of trouble you ask? The kind that over complicates your CSS of course. Stop talking and read please! Jeez, I’ll tell you how you can easily do that.

Think before you leap

A day after starting my build using this awesome technology, and no it isn’t new, but it is still fairly new to me. Syntactically Awesome Stylesheets has some cool features that you immediately want to dive into. Variables are the easiest, and it is kind of hard to abuse those. Mixins though, that is where I got into trouble. A good example, which you might have seen in my last post is a mixin I was using for ‘font’. Seemed like a great idea at the time! Let’s shorten that CSS so that I only have to type in the properties that will feed the mixin. What could be wrong with that? Well, technically nothing, but it also wasn’t helping me and I was just adding to the confusion with a completely stupid mixin (at least in this case). Here is what I am talking about:

Read the rest of this entry »

Using Sass(SCSS) On My Website Redesign

October 14th, 2010
Using Sass(SCSS) On My Website Redesign

Out with 960gs, in with Sass

Note: I have included at the bottom of this article, the actual Sass/CSS I have written for my redesign. When I am completely finished with the build, I will post the whole thing for you to view. If you see anything I am doing wrong, poorly, or stupid, PLEASE inform me. I am learning too!
If you read my post yesterday, you will know that I will not be using the 960gs on my main site redesign. Not because it is bad, but because it isn’t going to fit with the project. What I WILL be using though, is Sass. I’ve done a couple of articles already on it, which you can read below if you wish:

My goal in using Sass for my redesign is to 1) get more familiar with it and learn the syntax better, and 2) well, to say that I did. Always good to learn, and if anyone happened to care, I can always stick it in the resume. One thing I have noticed is that there is no really good reference to using it. An e-book would be great, as it doesn’t need to be very long. Hell I would even settle for an article that posts the Sass styles for a complete site that uses all the CSS3 styles.

Take a look at what I have built so far:

View Demo

Read the rest of this entry »

A review of the 960 Grid System

October 12th, 2010
A review of the 960 Grid System

Thank god for a good tutorial!

NOTE: I am going to review it, not go into detail into how things work – there are plenty of tutorials on that (one of which is listed below.
If not for this tutorial by Joshua Johnson, I will have to admit that the 960gs is terribly confusing. He explains how the grid works in plain english, and what the push/pull classes do. I started my redesign build last night, and as previously stated before, I was going to try my hand at this whole grid thing. Follow along, and you will see what I think.

Learning Curve

Either I’m an idiot, or the 960gs is way harder than I thought it was going to be. How could I not understand what is going on under the hood from the get go? First, it didn’t help that I started with the 16 column while designing in Photoshop, only to realize that I wanted the 24 when I started building it. I am already down for the count, because the grids do not line up the same way, due to there being more margin in the 16 column version.

Read the rest of this entry »