Make inuit.css ready for responsive type and responsive spacing

[casparkirsch]

For responsive design it's sometimes important to change font-sizes and spacing-units at a certain breakpoint.

The use of rems is wonderful for this approach: You are able to set the font-size on the html-element to 150% and all rem-units on the site will be increased by this factor.

For font-sizes it's already there but wouldn't it be nice to add the following rem functionality presented in _shared.scss to ALL $base/half-spacing-units?

margin-bottom:$base-spacing-unit; /* Fallback */
    margin-bottom:($base-spacing-unit / $base-font-size)*1rem; /* rem calculation */

[wfendler]

Just ran into this issue and came here to suggest something like this. The code you have here @kernfruit solves the majority of the issues with maintaining proportions and scaling the type, but the issue I'm running into is that I'm using the $base-spacing-unit variable in a lot of other places, like "island" padding, main container padding, etc.

I began to write a mixin that accepts a property/value pair to write it with the rem measurement and a fallback but it was quickly becoming far too complex to be practical. I think a good solution might be to have a px and rem based variable for each of those spacing units.

[hamishtaplin]

What about ems? Inuit doesn't really play well with them, I feel.

[patocallaghan]

Agree with you guys, this is something I'd really like too, not just in type but everywhere. As I always feel icky editing the Inuit code directly I generally do overrides in my own files. I pass the $base-spacing-unit into my own em mixin. For example:

.island {
    padding: em($base-spacing-unit);
}

[codekipple]

@patocallaghan i have the same approach of passing in the var into a em() function.

For me I find one bonus of having the variables in pixels is it's easier to do sass math on them like adding, subtracting and then use the final value in the css with a em() function wrapped around them.

@wfendler this is a good rem mixin https://gist.github.com/webgefrickel/4530526

[csswizardry]

Please see #291.

Thank you.