Posts Tagged ‘CSS’

Sass Rocks! Over Complicating Your CSS Doesn’t

Tuesday, 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:

(more…)

Using Sass(SCSS) On My Website Redesign

Thursday, 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

(more…)

A review of the 960 Grid System

Tuesday, 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.

(more…)

Website update…Using the 960 Grid System

Tuesday, October 12th, 2010
Website update…Using the 960 Grid System

This is just an update

I’m rebuilding my website, and I am learning multiple things at the same time while doing so. I’m using the HTML5 Boilerplate, HTML5 tags, the 960 Grid System (24-column), and will be using Sass. This isn’t a real post, just an update on why there won’t be one tonight. Tomorrow I will write a review on the 960 Grid System now that I have the hang of it. Does anyone know if the HTML5 Boilerplate has a Sass option? Meaning it has the CSS written in SCSS? Would be awesome, because I do not look forward to rewriting that. Anyway, I’ll have a real post for you tomorrow.

The Basics of CSS3 Transitions and Transforms

Thursday, October 7th, 2010
The Basics of CSS3 Transitions and Transforms

Let’s talk about support

First off, we know for a fact that Safari and Chrome support Transitions, because we’ve all been using one of them to see the cool crap people have been doing. FireFox 4 will support it and they keep adding to it all the time. IE9, as of what I have read, will not. They are still missing a lot of other things, so this is not surprising. But since it is still too early to tell, who knows what the final product will have. The main thing to know is, if you haven’t started getting your CSS3 chops down, you should start. It won’t be long before we are using it on a regular basis. Personally, I use quite a few, but transitions is one that I have stayed away from.

(more…)