Typography.
One special thing about the SpaceFramework, is typography. By defining the x-height and cap-height of each font we can create endless alignment possibilities. This gives you a free hand in realizing your designs exactly how it originally was intended.
Vertical alignment
When you apply vertical alignment on your text you can decide how your text is vertical aligned and create a nice vertical rhythm / pattern.
A reason you want to do this is to have exactly the right amount of spacing between each heading, paragraph, images e.t.c.
Default text
Compare the other alignment types with this default one. This is how the browser renders your text by default.
Align baseline
With baseline alignment you focus on aligning a text on the bottom of the character. This is called the baseline.
Align capline
With capline alignment you focus on aligning a text on the top of a uppercase character. This is called the capline
Align median
With median alignment you focus on aligning a text on the top of a lowercase character. This is called the median
Fit
Fit removes whitespace from the first text line of the first element. This can be used to have text exactly aligned to your padding.
Fit has to be combined with align-baseline
Default text
Compare the other alignment types with this default one. This is how the browser renders your text by default. Notice the space between the text and the blue marked padding. We want to get rid of this!
Fit
Default fit removes all white space at the first line of the first element. No longer your text will be aligned on the virtual grid. But your paddings are exact.
Fit up
Fit up removes all white space at the first line of the first element but makes sure everything stays on the virtual grid, it will go up to the next virtual line
Fit down
Fit down removes all white space at the first line of the first element but makes sure everything stays on the virtual grid, it will go down to the next virtual line
Trim
By using trim you no longer need to remove margins manually from the first- and last-child. Trim does it all.
Trim makes the way free to build modular components without the need to worry about those extra margins. They simply get removed. This way you can just add margins at the top and bottom of each component so they always end up nicely in a modular way and use margins the way it was intended
Default text
This is a default text, notice the default margins at the top and the bottom.
Trim
With trim the top- and the bottom-margin are removed from the first- and last-child
Trim top
With trim-top the top margin of the first child is removed.
Trim bottom
With trim-bottom the bottom margin of the last child is removed.
Text presets
By centralizing all typography at one place, you never have to maintain text styles at different places or write down the same CSS code all over again. All you need to do is choose the right text style at the right place.
You can use classes or the SCSS mixin to apply the right text style. This way you can say for example:
- i want to apply the heading-1 text-preset too all h1 elements
- and i want to apply the link text-preset to all a elements.
- This specific h1 element need to have hero text-preset
Especially when working together with Designers using text-presets are very useful. This is because you can match the text-presets exactly with the styles created in for example Sketch or AdobeXD. Resulting in a workflow where you can synchronize front-end with the design at all times.