[K7] Font sizing, weights, families and mixins #12879
Conversation
style_guides/scss_style_guide.md
Outdated
| ## Dealing with extends | ||
|
|
||
| You should try never to use the extends functionality in sass. The one exception is when you are extending placeholders to help control maintainabilty. General rule: if it creates an additive selector, it's usually a bad usage of extends. |
There was a problem hiding this comment.
Dumb question: what's an additive selector?
|
|
||
| @mixin fontSize($size: $kuiFontSize) { | ||
| font-size: $size; | ||
| font-size: convert-to-rem($size); |
There was a problem hiding this comment.
Can we add a comment explaining why we're using both px and rem?
There was a problem hiding this comment.
And why are we calling convert-to-rem when the name of the function is convertToRem?
| $kuiFontSizeM: $kuiFontSize; | ||
| $kuiFontSizeL: 24px; | ||
| $kuiFontSizeXL: 32px; | ||
| $kuiFontSizeXXL: 48px; |
There was a problem hiding this comment.
Should these other sizes be multiples of $kuiFontSize? So if $kuiSize changes, then everything changes?
There was a problem hiding this comment.
Also, is there a reason not to convert these variables to rem here in their definition?
There was a problem hiding this comment.
I'd like to still try and account for older versions of IE since we target enterprise. the fontSize mixin basically spits out both, but I need a base pixel value to output.
| } | ||
|
|
||
| %kuiFontSizeXXL { | ||
| font-size: rem($kuiFontSizeXXL); |
There was a problem hiding this comment.
What's the rem function? Where does this come from and what's the difference with convertToRem?
snide
added
the
Team:Platform-Design
Sets up mixins and placeholders for typography.
Sets up mixins and placeholders for typography.
Sets up mixins and placeholders for typography.
Sets up mixins and placeholders for typography.
Replaces #12876
Scaffolding and mixins for dealing with font sizing and weights. Dupes rems in so we can scale.