We’ve provided a number of utility classes in the Spine Parent Theme, among them, oxymoronic though it may be: intentional randomness. There are surely other applications for these random classes, but perhaps the most common use case is to provide imagery or styles across a whole site without having to target every page specifically. So, for example, one could design five header graphics that are then displayed randomly on twenty pages. Here’s how it works.

Attached to the body tag are three series of random numbers.


The range of each class is denoted with the prefix “five”, “ten”, and “twenty”.

  • .five1, .five2, .five3, .five4, .five5
  • .ten1, .ten2, .ten3, .ten4, .ten5, .ten6 → .ten10
  • .twenty1, .twenty2 → .twenty20

Only one of each is present on a given page load. As a result, we can provide random background headers in increments of five, ten, twenty , even (through combining them), fifteen, twenty-five, thirty, thirty-five and more.

Your css rules might look something like this.


And, to get into the bigger numbers, you could chain the classes.


Let’s give it a try by flipping through several of the classes on the body.



We’ll cover more of the utility classes available in the Spine soon.


This functionality is only provided by the Spine parent theme, not by the Spine framework itself.