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. Iβll 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, Iβm 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 donβt use those skills in web design/development.

But although the practical skills required are probably at the high school level, itβs 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 letβs 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 youβre doing any type of responsive design, and letβs 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, letβs talk about CSS units and values because thatβs what weβre 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 didnβt 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

s or *em*

s, and more recently, viewport units. The *ch*`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.

#### The floating footerΒ problem

A common requirement in many designs is to make sure the footer is βstuckβ to the bottom of the viewport even if there isnβt 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 isnβt enough content, yet still remain within the document flow.

Hereβs 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.

#### Fluid typography

While weβre on the topic of responsive design, letβs 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 Riethmullerβs 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 the relationship between font-size/line-height with the viewport size.

### 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. Letβs take the simple `border-radius`

property, for example, which is used to round the corners of an elementβs 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. Hereβs a diagram for 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 thatβs 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, weβve got our pure CSS triangles.

So letβs say we donβt 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 donβt always want isosceles triangles (thatβs 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?

## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If youβre interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps β Start monitoring for free.