Document pixelize mixin

[jjspace]

Is your feature request related to a problem? Please describe.

In reviewing #217 and other recent PRs I've noticed it's not always clear how to use the pixelize mixin especially given all the recent changes to it. This extends to how we handle box-shadows throughout most of the project and when we can use a "default color" (see #60, #143).

Describe the solution you'd like

Create some documentation on how pixelize works and how and where it should be used. This will include an explanation on what values must be passed in as well as what properties it will generate so the user knows which properties they should avoid setting themselves unless specifically intending to override.

As a parallel also create some guidelines on how to use box-shadows so we are all on the same page. This is important since a lot of the style of this framework is based on this property.

Describe alternatives you've considered

The alternative is having no documentation and relying on the members and contributors to have a complete understanding of this topic across all of us and correct new contributors as they make mistakes in PRs.

Additional context

As of right now I think I have the best understanding of how we're using pixelize and box-shadows across the entire framework as I have done a lot of work regarding these recently so I feel I would be best to write up at least the first draft. This can also kickstart a sort of "style guide" and discussion on our own best practices within the framework.

[BcRikko]

I agree to make a document of pixelize mixin. 👍 I think it's better to write in icon-mixin.scss 📓

For box-shadow guildline... How about to create border-style-mixin.scss? 🤔
Then we will not get confused without box-shadow guideline.