Prepare Vellum to work with Stencil

[ry5n]

For consistency Stencil components will all depend on a minimal set of shared variables. This PR ensures that Vellum plays nice with this set, and removes some unnecessary complexity from the existing variables file. Closes #72.

Status: Ready for review

Reviewers: @tedtate @jeffkamo @fractaltheory Ticket: RTM-128/CSOPS-1256 Linked PRs: compare with https://github.com/mobify/stencil-variables/blob/master/variables.scss

Changes

Made variable naming guidelines at the top of the file way more concise.

Removed or renamed:

• $sans-serif: removed; use $font-family
• $serif: removed
• $leading-ratio: removed; use $line-height or calculate ($line-height/$font-size) inline
• $disabled-color: removed
• $background-color: removed
• $v-space and $-space: removed, were deprecated; use $unit by default
• $forms-border-color: removed; use $border-color by default
• $forms-input-color: renamed → $input-background-color
• $forms-active-border-color: removed
• $forms-focus-border-color: renamed → $focus-color
• $forms-border-radius: removed; use $border-radius by default
• $forms-font-size: removed; use $font-size by default
• $forms-font-family: removed; use $font-family by default
• $forms-checked-background: removed
• $forms-disabled-color: renamed → $disabled-input-color
• $forms-disabled-background: renamed → $disabled-input-background-color
• $forms-placeholder-color: removed

Added:

• $tap-size: the standard tap-target size; useful for consistent sizing of tappable elements
• $horizontal-input-padding, $vertical-input-padding: for consistent padding among buttons, inputs and other controls
• $input-padding: shorthand value for setting all input padding

  How to test-drive this PR

• Clone the repo and run npm install && bower install
• Run the default grunt task (just grunt on the command line)
• Open test/index.html in a browser
• Check out branch stencil-sync and run grunt again
• Open a new tab to text/index.html
• Ensure things compile; compare the before/after output. Some things will be subtly different, but the after state should be more consistent (e.g. before, some buttons/selects were not consistent heights)

[fractaltheory]

I don't know how much assurance I can provide as my SCSS knowledge and particularly, how we'll be using it in Stencils, is lacking. I think we need @jeffkamo on the case here to vet these changes, but you have my axe/:+1:

[jeffkamo]

Alright, these changes appear to check out well. I just have some questions above, but other than that this looking pretty good.

[jeffkamo]

@ry5n did you mean to have buttons and inputs to be the same size?

They appear slightly different at the moment.

[ry5n]

Damn, buttons and inputs should be the same size. I’ll look into fixing that.

[avelinet]

Looks good to me @ry5n

[ry5n]

Thanks @avelinet !

[jeffkamo]

Looks like there's a merge conflict now. Fix that and you have my +1

[ry5n]

@jeffkamo Can you take a quick look again?

[jeffkamo]

Looks great! +1

[ry5n]

OK, will merge this closer to when Adaptive 2.0 ships.

[ry5n]

Closing to change merge target. See #90.