![]() Thinking in these terms will help us scale our system much easier. These values will are specific to the CSS rule we’re creating There might be some guessing and tweaking involved to get the perfect numbers. These values are intrinsic to the font we’re using. These values are properties of the design system we’re working with. If we’re thinking in terms of systems, will notice that there are three types of variables we are working with: Variable Type Instead of dumping all of our code into a single SCSS mixin, let’s organize it a bit better. This way, any margins set between the two elements will be pixel perfect because they won’t be fighting with the line box spacing. For any set of text block elements without margins, the two elements should bump against each other. Now we can then plug those numbers into the Basekick formula above (with the help of SCSS functions and mixins) and that will give us the result below. If our default grid row height is 4 and our type row span is 8, that would leave us with line-height: 32px.
0 Comments
Leave a Reply. |