Responsive typography (Flow Text css)

Question

Responsive typography (Flow Text css)

Asked 9 years ago

Viewed 345 times

1

Well, I was studying on responsive texts and found the css class of Materialize that leaves the texts responsive according to the width of the screen. Open the source code to try to understand how it worked but can’t, will someone help me?

// Flowtext
$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default; 

.flow-text{
      font-weight: 300;
      $i: 0;
      @while $i <= $intervals {
        @media only screen and (min-width : 360 + ($i * $interval-size)) {
          font-size: 1.2rem * (1 + (.02 * $i));
        }
        @media only screen and (min-width : 0 + ($i * $interval-size)) {
          line-height: .8rem * (1 + (.13 * $i));
        }
        $i: $i + 1;
      }
    }

1 answer

Browser other questions tagged css css3 sass

You are not signed in. Login or sign up in order to post.

by Caio Felipe Pereira • **4,570** points · Answer 1 · 2015-06-02T13:08:13+00:00

In my answer, I’m going to assume you didn’t understand absolutely nothing of the code. So, forgive me for the dictatorship or if by chance I speak many obvious:

SASS ?

The code you posted is SASS. Acronym for Syntactically Awesome Style Sheets, It’s one of several CSS extension languages out there, and in particular, my favorite. SASS has two syntaxes and thus two file formats: the .scss and the .sass. The fundamental difference between the two is that the latter is based on indentation (as well as the python). It uses this indentation to define the code blocks. For example:
```
//.sass
body
    .wrapper
        h2
            color: red
```
Amounts to:
```
//.scss
body{
    .wrapper{
        h2{
            color:red;
        }
    }
}
```
And both are compiled to
```
//.css
body .wrapper h2{
    color:red;
}
```
You can play a little with both syntaxes in this playground, and read the documentation here.

What SASS does is basically give you a quicker alternative to writing some selectors that would be complicated or repetitive to build on pure CSS, or use a lot of mathematical logic. Precisely the case of your code.
Media queries

Media queries are, in a very crude way, conditions to your style rules. If you have something like
```
//.sass
@media print
    body
        width: 100%
```
The property will only be applied at the time of printing. (In this case, <body> with 100% of width). Behold here the truck of things you can do with them.

Speaking specifically of his code, what he does is use the super powers of SASS to create a series of media queries that would be extremely complicated to build without he. These media queries are responsible for making the text responsive.

In the beginning, we have these 3 variables (variables in SASS are defined by the presence of the caractér $)

// Flowtext 
$range : $large-screen - $small-screen !default; 
$intervals: 20 !default; 
$interval-size: $range / $intervals !default;

See that the variable $range depends on the other two, which are $large-screen and $small-screen. I did a search inside the framework, and found the following values:

$small-screen: 600px !default;
$large-screen: 1200px !default;

From these two values, it is defined the size of the range in which the media queries will act ($interval-size). The following logic is very straightforward: it sets a default value for font-weight class .flow-text, as well as an accountant $i which is declared as 0. It is used to control the loop that will create the (20) media queries, which will define font-size and line-height of everything within this class for a series (20) of different cuts. These values are defined in units rem. Therefore, the complete code

// Flowtext

//.scss
$small-screen: 600px !default;
$large-screen: 1200px !default;

$range : $large-screen - $small-screen !default; 
$intervals: 20 !default; 
$interval-size: $range / $intervals !default; 

.flow-text{ 
    font-weight: 300; 
    $i: 0; 
    @while $i <= $intervals { 
        @media only screen and (min-width : 360 + ($i * $interval-size)) {
            font-size: 1.2rem * (1 + (.02 * $i)); 
        } 
        @media only screen and (min-width : 0 + ($i * $interval-size)) { 
            line-height: .8rem * (1 + (.13 * $i)); 
        } 
        $i: $i + 1; 
    } 
}

Compiled, stay (get ready):

.flow-text {
    font-weight: 300;
}

@media only screen and (min-width: 360px) {
    .flow-text {
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 0px) {
    .flow-text {
        line-height: 0.8rem;
    }
}

@media only screen and (min-width: 390px) {
    .flow-text {
        font-size: 1.224rem;
    }
}

@media only screen and (min-width: 30px) {
    .flow-text {
        line-height: 0.904rem;
    }
}

@media only screen and (min-width: 420px) {
    .flow-text {
        font-size: 1.248rem;
    }
}

@media only screen and (min-width: 60px) {
    .flow-text {
        line-height: 1.008rem;
    }
}

@media only screen and (min-width: 450px) {
    .flow-text {
        font-size: 1.272rem;
    }
}

@media only screen and (min-width: 90px) {
    .flow-text {
        line-height: 1.112rem;
    }
}

@media only screen and (min-width: 480px) {
    .flow-text {
        font-size: 1.296rem;
    }
}

@media only screen and (min-width: 120px) {
    .flow-text {
        line-height: 1.216rem;
    }
}

@media only screen and (min-width: 510px) {
    .flow-text {
        font-size: 1.32rem;
    }
}

@media only screen and (min-width: 150px) {
    .flow-text {
        line-height: 1.32rem;
    }
}

@media only screen and (min-width: 540px) {
    .flow-text {
        font-size: 1.344rem;
    }
}

@media only screen and (min-width: 180px) {
    .flow-text {
        line-height: 1.424rem;
    }
}

@media only screen and (min-width: 570px) {
    .flow-text {
        font-size: 1.368rem;
    }
}

@media only screen and (min-width: 210px) {
    .flow-text {
        line-height: 1.528rem;
    }
}

@media only screen and (min-width: 600px) {
    .flow-text {
        font-size: 1.392rem;
    }
}

@media only screen and (min-width: 240px) {
    .flow-text {
        line-height: 1.632rem;
    }
}

@media only screen and (min-width: 630px) {
    .flow-text {
        font-size: 1.416rem;
    }
}

@media only screen and (min-width: 270px) {
    .flow-text {
        line-height: 1.736rem;
    }
}

@media only screen and (min-width: 660px) {
    .flow-text {
        font-size: 1.44rem;
    }
}

@media only screen and (min-width: 300px) {
    .flow-text {
        line-height: 1.84rem;
    }
}

@media only screen and (min-width: 690px) {
    .flow-text {
        font-size: 1.464rem;
    }
}

@media only screen and (min-width: 330px) {
    .flow-text {
        line-height: 1.944rem;
    }
}

@media only screen and (min-width: 720px) {
    .flow-text {
        font-size: 1.488rem;
    }
}

@media only screen and (min-width: 360px) {
    .flow-text {
        line-height: 2.048rem;
    }
}

@media only screen and (min-width: 750px) {
    .flow-text {
        font-size: 1.512rem;
    }
}

@media only screen and (min-width: 390px) {
    .flow-text {
        line-height: 2.152rem;
    }
}

@media only screen and (min-width: 780px) {
    .flow-text {
        font-size: 1.536rem;
    }
}

@media only screen and (min-width: 420px) {
    .flow-text {
        line-height: 2.256rem;
    }
}

@media only screen and (min-width: 810px) {
    .flow-text {
        font-size: 1.56rem;
    }
}

@media only screen and (min-width: 450px) {
    .flow-text {
        line-height: 2.36rem;
    }
}

@media only screen and (min-width: 840px) {
    .flow-text {
        font-size: 1.584rem;
    }
}

@media only screen and (min-width: 480px) {
    .flow-text {
        line-height: 2.464rem;
    }
}

@media only screen and (min-width: 870px) {
    .flow-text {
        font-size: 1.608rem;
    }
}

@media only screen and (min-width: 510px) {
    .flow-text {
        line-height: 2.568rem;
    }
}

@media only screen and (min-width: 900px) {
    .flow-text {
        font-size: 1.632rem;
    }
}

@media only screen and (min-width: 540px) {
    .flow-text {
        line-height: 2.672rem;
    }
}

@media only screen and (min-width: 930px) {
    .flow-text {
        font-size: 1.656rem;
    }
}

@media only screen and (min-width: 570px) {
    .flow-text {
        line-height: 2.776rem;
    }
}

@media only screen and (min-width: 960px) {
    .flow-text {
        font-size: 1.68rem;
    }
}

@media only screen and (min-width: 600px) {
    .flow-text {
        line-height: 2.88rem;
    }
}

Notice the childbirth that would be writing (and calculating! ) these media queries without the power of preprocessing. It is worth remembering that the values on which the calculations are based (i.e., font-size: 1.2rem * (1 + (.02 * $i));, were defined by the authors of the framework. They possibly did tests and more tests to conclude that the calculation that must be done is exactly this and that the values that they result in are the ones that provide the result that they were looking for. You can change these values and see the result.