Posts Tagged ‘CSS’

Skeleton CSS Framework Review

Wednesday, June 29th, 2011
Skeleton CSS Framework Review

Responsive grids to the rescue

I’m not a huge fan of CSS frameworks. Not to say they are bad or anything, I just don’t care for them. I’ve tried a couple, and I thought the 960 grid did a pretty good job. There has been a lot of hype lately though for responsive design, so I thought I would take a look at one that has been getting a lot of respect and talk – Skeleton.

Skeleton’s CSS syntax

The creator of Skeleton, Dave Gamache, deserves a lot of credit for what he has done with it. For one, I’d like to thank him for using easy to remember class names like ‘one-third’ and ‘two-thirds’. I had a hard time remembering 960′s class names with .grid-whatever. He also uses things like ‘offset’ which is easier to tell what it does by reading it, than ‘push’ or ‘pull’ ever did. Looking through Skeleton’s grid CSS made me really happy when I first opened it, so props to Dave.

(more…)

jQuery Fly Out Menu Update, And Web Development Goodies

Wednesday, May 18th, 2011
jQuery Fly Out Menu Update, And Web Development Goodies

JC Designs update

I know it has been like a week and a half since I last posted, but my life has been busy. Very busy. Today started out crazy, with a person in the UK wanting 63 psd files sliced and built. Ya, you read that right….63! I thought to myself “Self, this could be some good money.” All had the same outer shell, but the content areas were insanely packed with forms, icons, lists, navs…seriously a ton of work. Was for a online gaming company. You know how she found me? Googled “how to slice a psd” and I showed up on the bottom of one of the pages, she came here, clicked contact…and there you go. The problem? Budget was $1200 and needed it in 2 weeks. I actually felt bad turning that down, but there is no way I was going to go through that stress, and that amount of work for $1200. I was think at the least 5-6k.

Anyway, here is the list of goodies I’ll comment on later:

  • CSS3 -moz-crisp-edges, and -webkit-mask
  • CSS3 Gradient lines under links
  • CSS Regions

(more…)

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…)

CSS Variables, Mixins and Nesting Might Be Coming

Friday, January 21st, 2011
CSS Variables, Mixins and Nesting Might Be Coming

If you don’t know Sass…you might want to now

I’ve read a couple of posts/articles in the past week that REALLY got me excited again about CSS. A guy over at Google, Tab Atkins, has hinted at it, and then this article by Johan Brook talks about it as well.

What the hell am I talking about you ask? Well by the title of this post you should have figured it out.You know all those articles I’ve posted about my experience with Sass and how much I love it? Or maybe my artilce on LESS.js? There are other articles around the net where people commented their worries and complaints on why they didn’t need or use it. Well guess what…you might want to rethink that and start learning. Variables, mixins and nesting might be coming to CSS itself. If you didn’t read the article I linked to above, Webkit is thinking about it, and it may be here as soon as the end of this year.

(more…)

Trying Out A Simple CSS3 Animation

Thursday, November 11th, 2010
Trying Out A Simple CSS3 Animation

Simple animation, harder to implement

That sums it up quite nicely I think. If you click on the demo below (my actual redesign) and look at it in Chrome (or Safari, though I didn’t look I’ll assume it works there), you will notice that when you roll over the social media icons in the right sidebar, they will change size. I was very proud of myself for accomplishing what I think very few web developers actually use. I’ll go over what I think about CSS3 Animations at the end of the article, but for now, let’s go over how I accomplished this.

View Demo

(more…)