VitaMonk's Self-Referential Style Guide

A wise man once said:

"A web-based business without a Style Guide is like a lower intestine without an anus."

I don't know what that means, exactly.  But it sounds horrible.

Rather than finding out the hard way, we've made a Style Guide.  Soon it will have some live template examples, but for right now here's what we've got...

  1. CSS Table of Possibilities
  2. A Bunch of Examples
  3. A Random Newsletter HTML-ified
  4. Pre-Approved Page Templates (coming soon!)

CSS Table of Possibilities

So just what is a "Table of Possibilities? 

We're so glad you asked.  Here's the thing: HTML's full pallet lets you do just about anything.  But that freedom is what killed MySpace.  Don't remember MySpace?  (That's the point, isn't it?)  MySpace was the "Facebook before there was Facebook," and it got knocked off its perch because they let users do pretty much whatever they wanted with their personal pages, and most MySpace pages wound up looking like the inside of a 12-year-old kid's locker.

Facebook took over the social media world because they radically reduced the "personalization" options users had. Then things actually looked nice and orderly -- despite the average person's having no design skills. 

So we're taking a page from Facebook's playbook and reducing the types of HTML we'll be using on VitaMonk pages to the following (minimal) subset.  If you want to do something else, you will need to deliver a pound of flesh and a damned good excuse to Nick the Code Tsar.  (Nick is not really a tsar, but for the sake of the website's design consistency, please pretend that he is.)

With that as a stern preamble, here are the Possibilities:

  • Major Heading <h2>text</h2>  or <h2 class="lead-off">text</h2>
  • Subheading <h3>text</h3>
  • Wimpy Subheading <h4>text</h4>
  • Normal Text <p>text</p>
  • Italics <em>text</em>
  • Bold <b>text</b>
  • Quote <p class="quote">text</p>
  • Horizontal Rule <hr />
  • Bulleted List <ul>...list...</ul>
  • Numerical List <ol>...list...</ol>
  • List Item <li>text</li>
  • Inset Block <p class="inset">text</p>
  • CTA Block <p class="cta">text</p>
    • Inner heading: <span class="heading">text</span><br />
  • CTA Button <p class="button-container"><button class="cta">button text</button></p>
  • Image - Full Width <img class="full-width" />
  • Image - Left Aligned <img class="image-left" />
  • Image - Right Aligned <img class="image-right" />

A Bunch of Examples

<h2 class="lead-off">This is a big, important Heading.</h2>

This is a Subheading.

<h3>This is a Subheading.</h3>

And this is a Wimpy Subheading.

<h4>And this is a Wimpy Subheading.</h4>

Whereas this is a normal bit of text. A paragraph, as they are typically called. We'll add a couple more sentences to make it more realistic-looking. Maybe one with a passing reference to drunken elephants. Because everyone is interested in drunken elephants. (Right?)

<p>Whereas this is a normal bit of text. A paragraph, as they are typically called. We'll add a couple more sentences to make it more realistic-looking. Maybe one with a passing reference to drunken elephants. Because <em>everyone</em> is interested in drunken elephants. (Right?)</p>

"This is an important quote by someone really smart."

<p class="quote">"This is an important quote by someone really smart."</p>

Here is a Numeric List:

  1. Episodic Memory is a novel.
  2. Semantic Memory is a textbook.
  3. Procedural Memory is a circuitboard diagram.

Here is a Bulleted List:

  • Episodic Memory is a novel.
  • Semantic Memory is a textbook.
  • Procedural Memory is a circuitboard diagram.

Here are some images:

I will make them left-aligned, right-aligned, and full-width, so you can see the difference in each.

You'll notice that the text wrapping can get weird if you don't put paragraph tags <p> around the images. But this gives you the latitude to let text wrap around them. It really shouldn't be a problem unless you have too many images really tight on top of one another without text separating them.

A Full Width Image:

This is an inset paragraph:

Whereas this is a normal bit of text. A paragraph, as they are typically called. We'll add a couple more sentences to make it more realistic-looking. Maybe one with a passing reference to drunken elephants. Because everyone is interested in drunken elephants. (Right?)

This is a CTA paragraph:

Whereas this is a normal bit of text. A paragraph, as they are typically called. We'll add a couple more sentences to make it more realistic-looking. Maybe one with a passing reference to drunken elephants. Because everyone is interested in drunken elephants. (Right?)

This is a CTA paragraph with a span.heading inside:

Well, how you like that?
Whereas this is a normal bit of text. A paragraph, as they are typically called. We'll add a couple more sentences to make it more realistic-looking. Maybe one with a passing reference to drunken elephants. Because everyone is interested in drunken elephants. (Right?)

This is a CTA button:


A Random Newsletter HTML-ified

A couple months ago, I came across one of the most bizarre nature videos I’ve ever seen.

The video is linked-to below, but the gist is this: Baby iguanas start their lives by hatching from eggs buried in the beach sand.  So far, so good.  But their very first experience after emerging into the world is to be set upon by vicious, pack-hunting snakes just lying in wait, knowing infant lizards will be popping up like nubile meat-bulbs.

Amazingly, the baby iguanas know to run like hell, sprinting across hot sand from their deadly Welcome Committee, trying to make it to safety.  Nature being nature, some make it and some don’t.

But the amazing part is…some make it.

I don’t need to tell you what the mortality rate would be for lone human infants targeted by pack-hunting predators.  If that was our lot, there would be no human species.

These lizards’ brains come pre-loaded with cognitive context ready for immediate use.  Patterns of light, shadow and sound resolve immediately into meaning: Snake attack! Perceptual neurons break the glass on the fear-alarm amygdala, which rouses the motor cortex: Run!

Baby iguana legs shimmy in that awkward, back-and-forth gait — but it works.

And as awkward as a running lizard looks, who am I kidding?  Iguanas arrive in the world functional.  Human infants have to randomly fire motor neurons that might be anything from Suck! to Move left toe! to Vomit!, building a results-map from trial and error.  This is like trying to turn on a specific kitchen appliance by randomly flipping breakers in a circuit-box with no labels.

Fun Fact: Thanks to day-one motor control, lizard babies never go through that awkward “crapping yourself” phase.

“Muscle Memory”

Entering the world straight into a literal death-race — and having the skills to compete — reminds me of that sub-genre of spy movies where an amnesiac hero discovers he has kick-ass ninja skills, despite having no idea how he got them.

The creators of the Jason Bourne franchise (or the equally implausible Long Kiss Goodnight) weren’t trying to highlight the differences between types of human memory, but their films actually provide a great case study: Jason Bourne didn’t have episodic memory about the specific instances of his past (i.e.  “Where did I get my training?”).

But he did have tons of procedural memory with which to dispense ass-kickings.  (i.e.  “Here’s how I snap this guy’s neck, then use him as a human shield so I can barrel-roll onto the fire escape.”)

And he had unimpaired semantic memory: the ability to recall impersonal facts about the world.  (i.e.  “New Brunswick is in Canada; sequoia trees can live over 2000 years; etc.”)

Put another way:

  • Episodic Memory is a novel.
  • Semantic Memory is a textbook.
  • Procedural Memory is a circuitboard diagram.

When you meet with an old friend to swap stories, it’s episodic memories that get swapped.  “You should have seen the time that so-and-so ________.” It’s something we crave and like to bond over, the warm tactility of a “there I was” story versus a soulless fact.

If Pixar were to make a Bourne-genre movie with an iguana hero, they’d have the obligatory flashback scene where he describes his first memories: The cramped, crunching strain of breaking the eggshell… The first poke of his head above sand and the sound of the surf… Then suddenly spotting his would-be murderers, slithering in from all directions.

But the animators would be taking massive liberties with the lizard’s actual perception of the world, because our reptile hero would remember almost none of this.  And this despite his total engagement in the moment as it happened.

A memory with no purpose is just a record.

The past leaves records all over the place: fossils, ice cores, shower scum, household dust, skid marks.  Most of these records contain information, if anyone cares to look.

But what makes a record a memory is that it was intentionally stored for future use.  (This “intention” need not be conscious, but it’s intentional at the systemic level.  Your brain wouldn’t expend energy to remember something unless there was a reasonable chance the stored information might come in handy down the road.)

Episodic memories, looked at this way, are really just the ingredients used to make semantic memories.  Episodes are fragments of the past.  But semantic memories are facts about the world—facts we can use in the present.

“I went over to Wendy’s kitchen and burned my hand on the hot stove” (episodic) gets useful when we generalize it into “hot stoves are dangerous; I shouldn’t touch them” (semantic).  Once the semantic memory is in place, the episodic details are mostly irrelevant.

To be fair, some episodes’ lessons aren’t nearly as cut-and-dried as a hot stove.  You may need a lot of episodes before a pattern emerges.  Maybe the next time you go to Wendy’s house, you visit the backyard and stub your toe on rebar.  Eventually this all coalesces into a new semantic memory: “Avoid Wendy’s house; that whole place is dangerous.”

It’s worthwhile for your brain to keep a large “data set” of episodic memories stored (if it can afford to do so) because it may only become clear in retrospect what was signal and what was noise.

But the fact remains: Once you’ve got the semantic memory, the episode is just trivia.

Remember that time you almost died?

So think about this… (And apologies to Pixar if this scuttles any reptile-movies you have in development.) While it would be a great movie scene to have the Pixar Iguana flash back to his infant escape from the snake-pack, it wouldn’t really make any sense.

Baby iguanas already know snakes are dangerous.  They know how to deal with the situation.  Like Jason Bourne at the moment of their hatching, their brains come fully loaded with the semantic and procedural memories they need to survive their first deadly minutes:

  • identify snakes (semantic)
  • snakes are dangerous! (semantic)
  • run when when you sense danger approaching (semantic)
  • by the way, here’s how your legs work (procedural)

And that’s all they need.  As memorable as you’d think this situation would be for them — and it certainly would be for a human — baby iguanas just don’t learn anything from the experience they didn’t know already.

And episodic memories exist to facilitate learning.

They are about the past, but for the future.

“Remember that time the pack of snakes almost killed you?” the seagull asks the Pixar Iguana.

“Nope.  Snakes sure are scary though,” answers the Iguana.  And that’s really all he needs to know.