Product Design Lessons

Intro to Foundation  |   Lesson #24

Wrangle Your Interchange Files

Discover ways to organize parts of HTML documents used in Interchange.

Store snippets in their own folder

Organizing your files in a folder apart from the main website is a no-brainer. But we recommend storing Interchange snippets together, and not organizing them into separate “simple”, “medium”, and “complex” folders. A unified folder makes scanning all snippets easier — a useful exercise when ensuring you have a snippet file for every size of every Interchange instance. Rather than separate folders, we suggest using smart file names.

Name things what they are

Naming files based on what they contain is smarting than naming them based on how you might use them. For example, “hero-teaser.snippet.html” is better than “home-page-header.snippet.html” because:

  • You may decide to use a different hero — say, during a seasonal event or temporary sale.
  • You may decide to move the snippets elsewhere in the site, like from a sidebar to a footer.
  • Your site’s layout or structure may change. In that case, your file names shouldn’t have to follow suit.

Use a naming structure

Appending “.snippet.html” to each file will help differentiate between incomplete HTML documents that Interchange loads at a glance. Even better, append sizes such as:

  • “filename.simple.html”
  • “filename.medium.html”
  • “filename.complex.html”

Also notice that we don’t name the snippets based on intended size or location — no “small” or “large”, and not “top” or “footer.” This means when the website changes later, we don’t need to change filenames to suit. much like naming CSS selectors “.big-red-button” and “.top-left” is bad practice, appending “basic” or “fullfeatures” to Interchange snippets. makes more sense.

But where’s the fun in that? We can also exercise our visual design sensibilities.

  • filename.html — simple
  • filename..html — medium
  • filename...html — complex
  • filename....html — extra features

This approach takes advantage of an existing convention, the dot extension, and turns filenames into graphic design. Gimmicky? Maybe. The point is to use create a naming convention that works for you. In the end, there are many ways to name files. The best way to figure out your own involves a path of trial and error. But sensible names and organization today will save you headaches down the road.

About the instructor


Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.