# Math and front-end

If you were one of those kids that wondered why you had to attend all those math classes and learn about angles and algebra, well, so was I. Ill admit, I was too restless and easily bored to be a good student in a classroom setting. But as I got older, I realised that certain mathematical principles actually had practical applications in my day-to-day work (Not calculus though, I mean, Im not a rocket scientist).

The question of whether you need to be good at math to be a good web developer boils down to what your definition of being good at math entails. If your definition of being good at math refers to understanding pure mathematical concepts like analysis or calculus, which involves a lot of proofs and theorems, then I have to admit, you dont use those skills in web design/development.

But although the practical skills required are probably at the high school level, its a matter of applying those arithmetic skills and knowledge of geometry in the context of web design.

For example, using the border-width hack to create triangles involves both a knowledge of how the browser renders borders and the application of trigonometry to realise that the property is hackable.

So lets take a look at some of the aspects of web development where math can come in handy.

## Arithmetic

Arithmetic is a branch of mathematics that deals with properties of the counting (and also whole) numbers and fractions and the basic operations applied to these numbers. Alexander Bogomolny

This seems unremarkably basic, but if youre doing any type of responsive design, and lets be honest, responsive design IS the norm nowadays, arithmetic is totally relevant to you. What does arithmetic have to do with design, you may ask? Plenty. But before that, lets talk about CSS units and values, because thats what were going to be counting.

Numbers feature quite heavily in CSS, as property values, mostly. And the specification that covers this is the CSS Values and Units Module Level 3. The key function behind the arithmetic of CSS is the `calc()` function, which supports the four basic operations of addition, subtraction, multiplication and division.

Back in the day when web design was mostly fixed- width, designers and developers would produce pixel-perfect designs that only worked when viewed at specific viewport widths. But as the number of different screen sizes that users would use to browse the web grew exponentially, fixed- width designs didnt really fit the bill anymore.

It made a lot more sense to let the browser figure out the sizing of elements on the page depending on the viewport size instead, using percentages, font-relative units like `em`s or `ch`s, and more recently, viewport units. The `calc` function works with combinations of CSS values of different units, handling the tricky computation for us so we can focus on designing and building the layouts and components we want.

A common requirement in many designs is to make sure the footer is stuck to the bottom of the viewport even if there isnt enough content to fill the height of the viewport.

Now, there are several different ways to achieve such an effect, but using `calc` is elegant enough to ensure that the footer never ends up floating when there isnt enough content, yet still remain within the document flow.

Heres some very basic markup, consisting of a `header`, `main` and `footer` elements.

``````<header>Header</header>
<main>Main</main>
<footer>Footer</footer>``````

To make sure the footer stays at the bottom of the page regardless of the amount of content within the `main` element, the `main` element needs to have a minimum height of 100% of the viewport height less the height of the header and footer, or:

``100% viewport height  ( height of header + height of footer)``

Translating that into CSS (this assumes browser styles have been reset):

``````main {
min-height: calc(100vh - 2em);
}``````

Without additional styling, the height of the header and footer should both be `1em` due to the text within them. Using `min-height` instead of `height` ensures that if there is more content than the height of the viewport, it will flow as per normal.

The `footer` is always at the bottom.

### Fluid typography

While were on the topic of responsive design, lets also use some math to figure out our font sizes for different viewport widths. Font sizes can take more than just px or em units, we can use viewport units to define font sizes as well. A problem with this approach is that if the viewport gets too small, your font could potentially shrink to an illegible size.

To combat this, we can use `calc` to provide a minimum font-size like the example below:

``body { font-size: calc(1em + 1vw); }``

If you do require more control over your font sizes, then more variables need to be added to the equation. The concept of precise fluid font sizes was pioneered by Mike Riethmuller in his article, Precise control over responsive typography, and was an extension of the idea of molten leading by Tim Brown. Mike Riethmullers equation looks something like this:

Florens Verschelde then did a deep dive into the mathematics behind CSS locks in his article The math of CSS locks, by expressing the font-size / line-height calculation as a linear function. Linear functions can be plotted on graphs, which makes it easier to visualise relationship between font-size / line-height with the viewport size.

Graph from The math of CSS locks by Florens Verschelde

## Geometry

Geometry is a branch of mathematics that is concerned with the properties of configurations of geometric objects - points, (straight) lines, and circles being the most basic of these. Alexander Bogomolny

### Drawing shapes with CSS

Geometry can help with understanding how to create shapes with just CSS. Lets take the simple `border-radius` property, for example, which is used to round the corners of an elements outside borders. Most of us just put in a single value and call it a day, but the `border-radius` property is a little more complicated than that.

`border-radius` is actually a shorthand for all 4 `border-*-radius` properties, where `*` refers to `top-left`, `top-right`, `bottom-left` or `bottom-right`. And it can take up to 2 values, separated with a `/`, where the first value is the horizontal radius, while the second value is the vertical radius. Heres a diagram to visualisation purposes:

And when we use percentages as values, the horizontal radius will be a percentage of the width of the border box while the vertical radius will be a percentage of the height of the border box. So thats why setting a `border-radius: 50%` gives us a perfect circle or ellipse.

Moving onto something more interesting, but also requires borders, we have triangles. Pure CSS triangles are made possible by hacking the borders of an element. When we create borders around an element, the edges of these borders meet diagonally, and we can see this if we apply a sufficiently thick border width to our element. They are trapeziums.

If we set the width and height of the element to 0, the trapeziums then become triangles, and voila, weve got our pure CSS triangles.

So lets say we dont want the triangles in a set of four, which is probably the usual case, the other three borders should be made invisible, by setting the adjacent borders colour to `transparent` and omitting the opposite border altogether.

``````.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid gray;
}``````

And maybe we dont always want isosceles triangles (thats what you get by setting all the border widths to the same value), so some geometry comes into play. The handy Pythagorean theorem can be used to calculate what the height of the triangle should be like so:

``````.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: calc(100px * 0.866) solid gray;
}``````

## Wrapping up

Mathematics may seem like something that is far from the creative visual aspect of web design and development but it does have a number of practical applications, so why not brush off that high school math textbook of yours and see if there is anything in there that can inspire you to explore CSS in ways you never thought of before?