liveBook · Manning

Mathematical expression

As explained in Math for Web Design

An expression is a collection of values and symbols that performs a calculation and produces a result.

A mathematical expression combines values and symbols to perform a calculation and produce a result. In frontend work, the values may be numbers, variables, object properties, or function results. The input values are operands; the symbols that act on them are operators. section 1.4.1 section 2.1

The four standard arithmetic operators support common layout, typography, and pricing calculations:

Algebraic expressions use unknown or changing quantities. A responsive width can subtract a fixed gap from the parent width, while JavaScript can subtract a header height from window.innerHeight. The same pattern supports scroll-based opacity and motion calculated from speed and time. section 1.4.2

A responsive CSS calculation

Use width: calc(100% - 2rem); rather than placing the arithmetic directly in a declaration. CSS arithmetic expressions belong inside a math function such as calc(). Addition and subtraction require spaces around the operator, compatible units may be mixed, and parentheses can control precedence. section 3.2.1 section 3.3.2

Table 1.1 Some frontend arithmetic examples

Task

Code

Operation

Set an element’s width in CSS.

.card { width: calc(100px + 50px + 20px); }

Addition (+)

Calculate the discounted price in a JavaScript statement.

const discountedPrice = 21.55 - 5;

Subtraction (-)

Determine a fixed font size for an element in CSS.

h1 { font-size: calc(16px * 2.5); }

Multiplication (*)

Calculate the pre-tax price in JavaScript.

const originalPrice = 21.55 / 0.08;

Division (/)

Compare arithmetic expressions used for CSS dimensions, font sizes, and JavaScript prices. section 1.4.1

CSS also evaluates expressions involving variables and Grid proportions. Multiplication or division requires a scalar operand, and two unit-bearing values cannot be multiplied or divided. In Grid, 1fr 2fr 1fr becomes x + 2x + x = w, allowing the browser to recalculate proportional tracks as available width changes. section 3.3.2 section 4.1.3

How Math for Web Design covers it

How deep it goes
Defines operands, operators, variables, and algebra, then explains CSS syntax, units, scalars, precedence, and Grid recalculation.
Examples
Uses widths, font sizes, prices, scroll opacity, motion, CSS variables, and proportional Grid columns as concrete examples.
What it assumes
Assumes basic CSS and JavaScript contexts while teaching arithmetic terminology and algebraic expressions from foundational definitions.
What you can do after
Apply it via CSS calc() and JavaScript expressions to calculate responsive, dynamic, and proportional interface values.
How it connects
Connects expressions with algebra, CSS math functions, JavaScript, CSS variables, browser dimensions, and CSS Grid.
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.