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]

/images/ Directory Convention

Test

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

Example

/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