CSS Sprite Generator

My PHP-CLI CSS Sprite Generator allows you to combine any number of images in a given directory into a select few composite CSS Sprite images. Also generates a stylesheet.

Source code documentation snippet explains details:


/**
 * CSS Sprite Generator
 *
 * Combine any number of images in a given directory into a select few composite
 * CSS Sprite images. (e.g. one for horizontally-repeating, one for vertically-
 * repeating, and one for images that do not repeat like buttons.)
 *
 * Also generates an accompanying CSS stylesheet you can copy/paste from and use
 * as a guide in obtaining the x-y coordinates as well as the width/height
 * dimensions of your sliced images as they are located in the corresponding
 * composite image.
 */

CSS Sprite Generator
Usage: css-sprite.php [OPTION]... [PATH]

 --path <path> Path where sliced images reside. Default is current working
 directory where the program is launched.
 --prefix <prefix> Optional prefix used in output filenames for composite
 images. Default is "sprites".
 --matte <rgb> RGB color matte. Default is "255,255,255" which is white.
 For PNG 24-bit transparency, use "transparent".

Naming files:

 The suffix of your sliced image filenames determines how they are composited:

 -x = horizontally repeating (repeat-x)
 -y = vertically repeating (repeat-y)
 -n = not repeating (no-repeat)

 Filename examples:

 border1-bottomleftcorner-n.png
 border1-bottommiddle-x.png
 border1-middleright-y.png

 Note that images which repeat on BOTH the X and Y axis, such as tiled
 backgrounds, must be contained within their own image and cannot be used in
 CSS sprites for obvious reasons.

 You can also modify the files as they are composited:

 -pr<pixels> = add padding to the right of the image
 -pl<pixels> = add padding to the left of the image

 Filename examples:

 border1-middleleft-y-pr300.png
 border1-middleright-y-pl300.png

Check it out:

mikesmullin’s CSS-Sprite-Generator at master – GitHub.

Will add more documentation soon.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Git – Fast Version Control System

This post is a bit late but better late than never. If you’re still using Subversion it’s high time you had a look at distributed version control.

Git is a free & open source, distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Every Git clone is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server. Branching and merging are fast and easy to do.

Install on Debian / Ubuntu 9.10 Karmic:

sudo aptitude install git git-core

Then you may find this Git tutorial useful.

I use gitg or gitk for quick-reference visualizing of history:

sudo aptitude install gitg

Gitstats project is interesting. See demo here.

Also Gource is another interesting git visualizer. See demo via YouTube.

I should mention Github as they are pretty awesome and you have no doubt seen their website before. Here’s my page on Github, for those interested. I love their proprietary reports; the charts and graphs are awesome ways to visualize repositories. And their push-button publishing, donations, and social networking aspects are the best.

My ~/.gitconfig file looks like this:

[core]
        editor = vim
[user]
        name = YOUR NAME
        email = YOUR.EMAIL@DOMAIN.TLD
[color]
        branch = auto
        diff = auto
        interactive = auto
        status = auto
        ui = auto
[color "branch"]
        current = yellow reverse
        local = yellow
        remote = green
[color "diff"]
        meta = yellow bold
        frag = magenta bold
        old = red bold
        new = green bold
[color "status"]
        added = yellow
        changed = green
        untracked = cyan
[alias]
        st = status
        ci = commit
        br = branch
        co = checkout
        df = diff
        lg = log -p
        who = shortlog -s --
        up = pull --rebase
[push]
        default = matching

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Compass: CSS Stylesheet Framework

Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Using the power of Sass Mixins and the Compass community, you can apply battle-tested styles from frameworks like Blueprint to your stylesheets instead of your markup.

Compass

It’s a Ruby on Rails project. You run a CLI utility that watches a directory where your .css and .sass reside. The changes you make to your .sass files get automatically parsed and translated to .css files. The .sass format allows you to have a simplified less repetitive stylesheet markup, in addition to the ability to use variables, functions, mathematic operations, and more.

  • In CSS, ever wished you could store the color palette for your site design in a few variables and then just reference those variables through the stylesheet?
  • Ever wished you could perform cross-browser compatible mathematical addition on layout column widths?
  • Ever wished you could easily gather a library of commonly used CSS, and then selectively include them in your various designs with a single line?

Now you can, with Compass.

Installation on Debian/Ubuntu 9.10 Karmic is like:

sudo aptitude install ruby gem; # dependencies
sudo gem sources --add http://gems.github.com/
sudo gem install chriseppstein-compass; # install
sudo gem install chriseppstein-compass-960-plugin; #optional plugin
compass -f blueprint project; # example usage
compass -r ninesixty -f 960 project; # example plugin usage

Looks promising! See more detailed Compass install instructions.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Keeping Kids Safe Online

The National Center for Missing and Exploited Children recommends parents set rules with their children to know what’s allowed and what isn’t when it comes to time spent online. These are the rules they suggest:

1. I will not give out anyone’s personal information such as any part of a name, home address, credit card number, phone number, age, password, school name or location without my parents’ permission.

2. I will tell my parents right away if I come across any information that makes me feel confused or uncomfortable.

3. I will never agree to get together with someone I “meet” online.

4. I will never send a person my picture or anything else without first checking with my parents.

5. I will not respond to any messages that are mean or in any way make me feel uncomfortable. It is not my fault if I get messages like that. If I do receive that kind of message, I will tell my parents right away.

6. I will talk to my parents so we can set up rules for going online. I will not break these rules without their permission.

There are ways to monitor the websites your child visits, as well as chats and e-mails. The Utah Attorney General’s office has information about how to do that, here.

SafeTeens.com is another site with advice to help parents keep their teens safe online. That site also includes advice about cell phone safety for teens.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

cufón – fonts for the people

I just discovered cufón – fonts for the people. According to Google’s cached version of their META description, “It is a fast text replacement with canvas and VML – no Flash or images required.” Very interesting. The last thing I was using for this was sIFR but even though it worked it was somewhat painful. This looks very easy.

There is also a WordPress plugin for it called WP-Cufon which I saw used on this blog 7 Ways to Watch TV Online for Free. Also a good post for other reasons. :)

On a side note, I wish I knew how digitizd.com was doing their social bookmark icons. They look slick. Either they are custom or some WP plugin. Hoping its a plugin I can use.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...