Better explanation for terseness/shorthand notation

This adds:

- A section to **Styleguide - Naming**, specifying the shorthand notation that we use for sizing and hierarchy.
- A note on the **Components** section about the shortened grid class name.

We have established conventions for the naming of sizing/hierarchy modifiers, but don't really explain them outside of showing them in the examples.

Let me know what you think @nickawalsh, @johndjameson.