Screen Shot 2014-05-31 at 15.33.36

Design,Typography

Responsive line breaks – SASS mixin

7 Jun , 2014  

No-one likes a messy break up!

My current project is a site that has a long tagline that accurately describes exactly what the site is for.

I know! I tried suggesting a catchy 4 word one that poetically hints at what’s what – but no dice!

Screen Shot 2014-06-07 at 10.52.43

On a nice big desktop screen this looks fine. Hey job done, time to head home!

Not so fast there mister – sit back down! What about a slightly smaller screen?

Screen Shot 2014-06-07 at 10.56.31

So at this size screen we need a line break somewhere in the middle to give us nice tidy 2 lines of roughly equal length.

Well this shouldn’t be too hard, a <br> element is just a normal inline element and we can use display to show it or not.

We give it a class name and drop it into our html. Then hide it and use a media query to show it when the screen drops below the relevant size – et voila!

<h2>A rather long tagline describing exactly what <br class="one-br">the website is for instead of a snappy slogan</h2>
br.one-br {
  display: none;
  @media (max-width: 1500px){
    display:inline;
  }
}

Screen Shot 2014-06-07 at 11.10.41

It’s hometime (starts to close laptop, whistling merrily).

Wait there – whats this? Just a bit smaller and…

Screen Shot 2014-06-07 at 11.12.53

Slumps back into chair sighing.

No thats all right, we can repeat the same process with another couple of breakpoints giving us 3 lines of tidy text – erm.

Screen Shot 2014-06-07 at 11.16.44

So now we need to  give a lower limit to showing the 2 line break. Like this see!

br.one-br {
  display: none;
  @media (max-width: 1500px) and (min-width: 1001px){
    display:inline;
  }
}
 
br.two-br {
  display: none;
  @media (max-width: 1000px){
    display:inline;
  }
}

Screen Shot 2014-06-07 at 11.21.53

Big sigh of relief! I can just about make the next train if I leave now, bye!

And a bit smaller?

Screen Shot 2014-06-07 at 11.24.55

Bite me! No actually don’t do that! We could extend this and add in 4-line break tags as well but I’m going to stick my neck out and say that when you have 4 lines then what you have there my friend is just plain inline text – let it flow naturally! So we add a lower limit on displaying the 3-line breaks and at the very small size it goes back to being flowing text.

br.two-br {
  display: none;
  @media (max-width: 1000px) and (min-width:600px){
    display:inline;
  }
}

Screen Shot 2014-06-07 at 11.28.09

Can I go home now?

I suppose so, but you know, this seems useful. This seems like the kind of thing I’d like available on any project. Like a… SASS mixin kinda thing!

Don’t want much do you? OK – here it is re-written as a mixin. In a lovely codepen.Happy Pappy?

See the Pen Responsive Line Breaks – SCSS Mixin by Tony Hill (@Designmite) on CodePen.0

Hmm.

What now?

Well my site has set breakpoints. Do I have to type the same numbers in every time I use it?

Here it is with default values. Change them to reflect your breakpoints and you’re good to go!

See the Pen Responsive Line Breaks – SCSS Mixin – with defaults by Tony Hill (@Designmite) on CodePen.0

Right then what’s next? I’m on fire! You gotta the problem – I gotta the solution!

Are you still here? Didn’t you have a train to catch?

Nice.

 

 

 

 

 


Leave a Reply

Your email address will not be published. Required fields are marked *