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 _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.
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 themain 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?
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.
Try it for free.
Top comments (1)
I also think that understanding mathematics helps a lot in programming and development, so I try to analyze some theorems more, so that later it gives me advantage. I use plainmath.net/secondary/algebra/al... to use examples to analyze topics of interest to me and to understand the issue more deeply. I recommend all students who are looking for an additional source of mathematics or have problems with an example to pay attention to this resource.