Sassline v2.0

Originally published May 25, 2014

I thought it was about time to get stuck back into developing Sassline, so over the last couple of weeks I’ve been spending my evenings playing with Sass 3.3 and seeing what it can do. Sass maps are certainly my favourite addition and turned out to be really useful for some things I planned to do. I didn’t know the best way to approach using them, as I obviously hadn’t seen them used before. After trying out a few methods, I’ve gone with what I think is the best way to use them for now and time will tell if it is!

Sassline 2.0 has been massively refactored and rewritten. The mixins that are the real power behind it still have the same basic idea but are now much nicer to use. They are also more flexible, letting you output values for a single breakpoint or all breakpoints at once. It also has a really exciting addition of a method to use a responsive modular-scale. This allows you to select a modular-scale per breakpoint to get the most appropriate values to use at that viewport size to size your type. You can then select a value (i.e. alpha) from these scales and set it for all breakpoints. I feel like this is a real missing step for most people who work with a modular-scale — the choice of scale is usually based around what is best for one particular size and this doesn’t always translate responsively.

Another addition is a greatly improved method of setting text to the baseline — the main aim of Sassline after all! Using a technique outlined in this post by Razvan Onofrei we can get around the way that CSS sets type and work to an actual baseline grid on the web. It is actually really simple to work cap-height value for each typeface against the grid that is included, and once you have these values the grid can be discarded.

Getting started with Sassline

Here is a quick outline how I work with Sassline to hopefully make it make some more sense to you. Feel free to use it how you see fit and let me know if you have any preferences on how things could be done differently.

Step 1. Start with the type

Choose your typefaces and get working with them in browser straight away so you can get a feel for how they work at various sizes and the right sizes to use them. It is handy to set a Sass map for each typeface used in the _variables.scss partial (see the examples in there already and ignore the cap-height variable for now). From here, choose the size and the line-height of body copy you want to use. Half the value of the line-height (in pixels) and set this as the rootsize. This will be the measurement of the baseline grid and you can now use this with 1rem. From the body copy you can also choose the measure and set the max-width for the container and start thinking about breakpoints.

Modular-scale

Once you have your body copy setup you can think about the modular-scale. Work out the sizes that you need for all the various elements of type in the design and use modularscale.com to choose a suitable scale. Set all the values from the scale that you need in the _modular-scale.scss partial.

Breakpoints

Now it’s time to set the breakpoints and repeat these decisions for each breakpoint that is needed.

Step 2. Setting to the baseline

Time to look back at that cap-height value. The cap-height should be thought of as the equivalent of x-height but for capital letters. Using this height we can accurately set text to a baseline grid on the web. Due to the way CSS renders the space around text, we need to shift the text down by a value of font-size / 2 * (line-height — cap-height). If we want the text below it to sit directly on the next baseline, we need to have a negative margin-bottom of the same value. To get 1 baseline worth of space between them we need to get 1rem minus this value (and so on).

To work out the cap-height toggle the grid and experiment with changing the value for one typeface at a time. It will most likely be something between 0.6 and 0.8. Check at all the breakpoints and once you have it correct the text will sit on the baseline throughout.

Step 3. Using the mixins

Take a look in the _mixins.scss partial and have a read through the comments on the mixins to find out a bit more about exactly what they are doing. Here is a quick run-down.

Breakpoint mixin

Call the breakpoint mixin with @include breakpoint(break-1) to get the first breakpoint you set in the variables break-2 for the second and so on. These work mobile first. You can also choose pixel values to use for minor breakpoints i.e. @include breakpoint(700). If you want to use a min to max or just a max breakpoint this is possible too. @include breakpoint(450, 600) will give you a min-width of 400px and max-width of 600px, and set the first variable to 0 to get just a max-width.

All the breakpoints are outputted in ems (rather than the pixel values that are inputted). These are more widely supported than using rems for breakpoints.

Rootsize mixin

This mixin will get all the rootsize variables and set them to the right breakpoint. Call @include rootsize on the html element.

Maxwidth

Set the max-width for the container from the max-width variables to get the right measure for each breakpoint.

Fontsize mixin

The fontsize mixin will set your text in rems with values inputted in pixel form (i.e. 16) or from values from the modular-scale (i.e. epsilon). You can choose to set it for one breakpoint at a time with @include fontsize(16, 0) for the base size or @include fontsize(16, 1) in the first breakpoint, and so on. Alternatively you can set it for all breakpoints at once with @include fontsize(16, all).

If you are using the responsive modular-scale the mixin will grab the correct variable for the breakpoint and again output it one breakpoint at a time or for all breakpoints at once.

Note this will only work for the number of breakpoints you have i.e. if you have set 4 breakpoint variables and try to use @include fontsize(16, 5) it will not output anything. That would be silly.

Baseline mixin

This is what will set your type to the baseline. If you don’t want to get down to this level of precision then you can just use the fontsize mixin and effectively work in the same way as Sassline v1.1 using rems to set the spacing between elements to get a good vertical rhythm.

Lets run through what it does: @include baseline($fontsize: 16, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 0). Once again you set the font-size first and should use the value you have previously set in the fontsize mixin. Next set which font you are using with the variable name from the Sass map. Then what line-height is being used — 2 is the default as this is what will be inherited from body but you can change this if needed (i.e. in headings). The value for $below should be how many baseline spaces should be set beneath it. Finally chose a breakpoint or set it for all.

Sassline mixin

This does the same as both the fontsize and baseline mixin at once. I would mostly recommend using this one, as it saves you from repeating yourself, but if you prefer you have the ability to use each separately (which can be helpful when you are not setting fontsize but only baseline spacing for an element with inherited font-size values).

That should be enough to get you started. Remember that the typography styles are scoped to the .typeset class so they wont interfere with global styles, but you can change this is you prefer. Let me know if you have and questions and feel free to add issues etc on github.

Originally published at jakegiltsoff.co.uk/posts/sassline-v2–0 on May 25, 2014