Skip to content

Instantly share code, notes, and snippets.

@MarioRicalde
Created April 9, 2011 18:24
Show Gist options
  • Select an option

  • Save MarioRicalde/911640 to your computer and use it in GitHub Desktop.

Select an option

Save MarioRicalde/911640 to your computer and use it in GitHub Desktop.
Survival Kit (in the works) [Archived]

The Index

/images/ Directory Convention

Conventions save you from having to take some time to figure out how the project is structured; these are the result of testing and polishing rules on production environment.

Grouping Rules

Grouping is important; especially when you're working with projects that have many assets. The following rule proposes a way to organize this files into a easy to navigate way.

RULE
  IF images FROM same GROUP > 5
    store in new directory
    repeat RULE
  else
    store in root

Naming Rules

Names for individual files should always be in singular, even if when they're a sprite that contains several elements. This is by convention a good practice that is taken from other frameworks.

Sub-Directories a.k.a. Groups should be named in their plural form when possible. Remember, this only applies to directories. For files use the singular variant.

The General rule to name files:

background files:
  bg(-group)?(-name)
sprites:
  sp(-group)?(-name)
buttons:
  bt(-group)?(-name)
icons:
  ic(-group)?(-name)
other:
  (group-)?(name)

When the file is going to have several variants; it's a good practice to append the change, in type or dimention, using the following pattern.

(name)((-HEIGHTx)(WIDTH)?)?

logo-300x.jpg
logo-500x.jpg
logo-300x-grayscale.jpg

Examples

/bg-content.jpg
/bg-content-light.jpg
/sp-main.jpg
/ic-form-submit.jpg
/placeholders/
  content-big.jpg
  content-small.jpg
  content-medium.jpg
  user-display-100x.jpg
  user-display-200x.jpg
  video-medium.jpg
@paulirish
Copy link

+1 to everything here.

images are tricky because... well. i normally end up with two sprites... one is a big spritesheet, the other is a vertically very long sprite.. aside from that i rarely have other backgrounds or icon img files.

@MarioRicalde
Copy link
Author

Thanks for the support Paul! This means a lot!

@images: Indeed. That's how I end up doing it when I'm not working with a sprite generator. I'm keeping the rules because some people tend to do quick mockups with several images and then tune everything up by turning everything into sprites.

@avit
Copy link

avit commented Apr 17, 2011

I've taken to storing template images under /stylesheets/images, separate from content graphics under /images. This keeps a nice separation and allows for clean relative links as well.

@MarioRicalde
Copy link
Author

I used to do it that way, back in the day when I had to insert the paths manually.

However, having two directories for images is a bit too much; maybe you can /img/content/ for the content, images?

Discuss.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment