June 6, 2019
Today I worked on the UI kit for TAP using Fabricator.
- I wrote a mixin for outlining text with an IE fallback
@mixin font-outline($stroke, $fill, $default, $width) {
color: $default;
@supports
((-webkit-text-stroke-color: $stroke)
and
(-webkit-text-fill-color: $fill))
or
((-moz-text-stroke-color: $stroke)
and
(-moz-text-fill-color: $fill)) {
text-stroke: $width $stroke;
-webkit-text-stroke: $width $stroke;
-webkit-text-fill-color: $fill;
-moz-text-stroke: $width $gray1;
-moz-text-fill-color: $fill;
}
// paint-order: stroke fill;
}
// then include
@include font-outline($gray3, transparent, $text-light, 1.5px);
I also learned how to set a background image on text.
background-image: url('../images/grit_text_black.png');
// background-size: 200%;
background-position: center center;
background-clip: text;
@supports (-webkit-text-fill-color: transparent) {
-webkit-text-fill-color: transparent;
}
Then I used some sass interpolation to make translating his pixel style guides easier.
16 is my base font size.
font-size: #{(48/16)}em;
@include breakpoint(large) {
font-size: #{(76/16)}em;
}
@include breakpoint(xlarge) {
font-size: #{(95/16)}em;
}