Adjusting margins for arbitrary borders and padding

[mmadden]

I'm really enjoying Sassline so far, especially the breakpoint-specific scales, etc. However, I'm having some difficulty styling a simple <button> that maintains the vertical rhythm and it seems this will be a problem for other elements requiring borders or more padding.

The sassline mixin doesn't seem to have a way to account for additional padding or borders. For example, in the case of a <button> a 1px border causes the inner text to fall 1px below the baseline, and all descendant elements to fall 2px below the baseline. Also padding-top is always greater than padding-bottom which isn't typically desirable in buttons or other form input elements where the text should be vertically centered between the borders.

Please let me know if I'm missing something, but it seems like another mixin or function is needed that also accepts border and/or padding arguments and automatically adjusts the top/bottom margins to maintain the vertical rhythm by snapping to the closest fitting n lines of the current baseline.

When this is a solved use case (or if it is already), perhaps we can update the Sassline demo to include basic form elements.

Keep up the great work Jake!

[jakegiltsoff]

Hi Matthew, I’ll look into getting something sorted for form elements. Thanks!

[pjhawksr]

+1

[bobcolner]

This would be a great feature for many use cases. +1.

[lukakemperle]

+1

[iolla-net]

+1

[jakegiltsoff]

A workaround for now that can easily be used is to apply the baseline mixin to a containing element.

For example wrap a button in a div with class .button-align, then use

.button-align { @include baseline(zeta, $bodytype, 2, 2, all); }

When I have time I will look into a mixin that can control additional vertical padding/borders and add some examples to the demo.

[iolla-net]

Thanks Jake, very much appreciated.

[OliverM]

This is especially ironic given that the button captions on sassline.com are off the baseline...! Thanks for the workaround details.

[jakegiltsoff]

@OliverM It made more sense to me to have the buttons themselves fit to the baseline there.

[pjhawksr]

@jakegiltsoff Thanks!

[OliverM]

Yeah, there's no non-button text on either side so it makes sense that the visual rhythm would match the button borders. By way of background, I'm designing forms with 20+ input fields of various types, each with text labels, so the workaround above is great to have.