Archive for the ‘CSS’ Category

Taking LESS.js for a spin, and how does it compare to Sass 3

Wednesday, July 7th, 2010

What the hell is LESS?

LESS logoIf you have kept up with me, then hopefully you read my post on Sass 3. If not, well hopefully you are not out of the loop and have at least heard of it. This post is about LESS and LESS.js (which you can read about here). LESS used to be a Ruby Gem install, not sure what that means exactly other than it is a pain the ass to install if you are not familiar with the command line.

There is a brilliant new way to actually use LESS, and that is to simply use javascript. Nothing to install, just include this line:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

You will also need a link to a LESS file, which will look something like this:

<link rel="stylesheet/less" href="css/test.less" type="text/css" />

A simple text file with a .less extension.

So what exactly is LESS? I would define it as a simplified and easier to use version of Sass. It incorporates the cool parts of Sass, such as variables, mixins and nested rules. Operations are also included, but I haven’t delved too deep into it yet. But a small test was all it took to see what I liked and disliked. First, lets take a look at the VERY basic page I did.

Click here to see the demo.

(more…)

CSS – Hacking the hell out of browsers

Tuesday, June 29th, 2010

I’ve done small posts when I started doing this blog a while back, that included tips on how to hack certain browsers with CSS. I thought it would be good to list them all in one spot. I have been thinking of writing a small e-book that included all the things I have learned that I wish I knew from the start. Kind of like a super crash course in web development. Most of the things I write about, are things that would have been useful to me when I started out, but took a lot of time using google, reading, and just plain trial and error. I like to think I’m helping new web developers/designers get a kick start in their learning, and get ahead of the curve, which is what keeps me going. I actually really like mentoring new to intermediate web devs, and that is what keeps me writing this blog. Besides that, I actually end up learning more myself.

There are things that have to be done to make sure your site works in all browsers, and sometimes that means you have to do some things in your CSS to make sure everything is nice. I am going to show you the major methods of how to what we call “hack” a css file so that the browsers display the same thing. Let it be known, that it took me a while to be able to design a site without worrying about IE6. At the start, concepts of float, how margins and padding work, and other such things can be very confusing. I did a lot of hacking in the beginning before I knew how to build a site correctly. It would be great if you could just write the CSS and it all worked perfect, but even now, every once in a while, you have to do some fiddly things to get the older IE’s to cooperate. Let it be known, that I use the IE6 one quite a bit for image replacement, and if you do use these, you actually should put them in a seperate IE stylesheet. For getting things up and running quick though, I keep them in the main CSS file until I am done, and then take them out.

Now onto hacking!

(more…)

Inserting new elements with jQuery…and a CSS3 tip!

Wednesday, June 9th, 2010

Let’s start with a cool ass CSS3 tip. I can’t claim credit for this, as I just watched a video of it over at Nettuts+, done by Jeffery Way (my favorite tutorial creator), which you can watch here if you want. But it is really simple, so I’ll give you the gist of it right here.

Ever do image reflections? If you build enough sites, you most likely have. You know what I’m talking about, right? You have an image, and a copy of the image is flipped vertical below it and faded out so it looks like it is a mirror image? Well, you can do that using only CSS3 now, but be aware, as of right now, it only works in Safari and Chrome. I really hope this one gets to Firefox soon, because I have to do this effect often enough where this would make it easy. Here is the CSS:

-webkit-box-reflect: below 4px - webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

This is all one style, meaning it is not divided into multiple lines. You would put this on an image, and here is what all that crazy does. Obviously it reflects the image, below the original with a 4px gap between them. Adds a linear gradient to the reflection from top to bottom, starting with no color (transparent) and going to white. The color-stop number is how much the reflection shows. And that is it! This is actually one “cool” effect that I actually have a use for. Congrats to Safari/Chrome for getting this into their browsers…now get Firefox on the job.

Now, on to the jQuery!

(more…)

Test driving Sass 3…a second look at Sass

Wednesday, June 2nd, 2010

Sass logoSoooo…I have decided to try my hand at updating my install of Sass to version 3. I’m just a simple cave man…but I do know one thing. THAT was a bitch. I am stupid when it comes to command-line stuff. I literally have to do a google search on everything that I try to do. I have 10 windows open at the moment and each one is something dumb. Like how to change directories, how to update a damn gem, how do I update compass, how do I recompile with compass….COME ON!

Whew! Its done. And it works. Thank GOD! Now first I am going to give you a link to the test page I am building (using the html from my “Creating your own tool kit – Part I: CSS” post).

Click here for the demo.

Let’s take a look at the Sass first. Keep in mind, this is basic Sass stuff, but I want you to see the cool factor. Sass 3′s main syntax is SCSS (Sassy CSS). It is more closely related to CSS than Sass 2 was.

NOTE: I wrote an article a while back about Sass, but that was using version two’s syntax, so I am basically starting over.

(more…)

Creating your own tool kit – Part I: CSS

Thursday, May 27th, 2010

How many of you start every design from scratch? Meaning you will code your html and css from the beginning. If you are a beginner, probably quite a few. Which is a good thing, because that is how you learn your chops. I do it every once in a while, so I don’t forget things. Most of the time I am starting from a starter file I created. I have different versions of CSS files, depending on what I am building. At work, the one I made is very detailed, and can be because we follow a strict structure. It also helps because I consistently use the same id names, and when I firebug something, I know right away what the hell is going on.

Creating a file like this to be reused is just one of the tools web developers have in their “tool kit.” Things we have to speed up the time it takes to build a site. Tonight is part one in how ever many I decide to do. They won’t be consecutive, but spread out whenever I get one together. For my next one, I would like to do a base CSS file, but using Sass and showing the neat little tricks you can do with it.

(more…)