CSS Functions - Mathematics in the Style of Egyptian Scribes

Welcome to the Giza Necropolis of CSS mathematics! Just as the ancient Egyptians used advanced mathematics to build pyramids, we can use CSS Functions to create dynamic, responsive, and flexible styles. Discover mathematical functions that are revolutionizing the way we write CSS!

What Are CSS Functions?

CSS Functions are built-in functions that perform calculations and return values. They allow you to create dynamic styles without JavaScript!

The most important mathematical functions:

• calc()

  - basic calculations

• min()

  - smallest value

• max()

  - largest value

• clamp()

  - value within range

• minmax()

  - for CSS Grid

Egyptian analogy: It's like an Egyptian scribe performing precise calculations for pyramid construction - mathematics built directly into the plans!

calc() - Basic Calculations

calc()

allows you to perform mathematical operations with different units:

Basic Syntax

1.element {
2  /* Addition */
3  width: calc(100% - 50px);
4
5  /* Subtraction */
6  height: calc(100vh - 80px);
7
8  /* Multiplication */
9  font-size: calc(16px * 1.5);
10
11  /* Division */
12  padding: calc(20px / 2);
13
14  /* Combinations */
15  margin: calc((100% - 960px) / 2);
16}

Important rules:

• Spaces around + and - are REQUIRED:

  calc(100% - 50px)

  correct,

  calc(100%-50px)

  incorrect
• Spaces around * and / are optional
• You can mix units (%, px, rem, vh, etc.)
• You can nest calc()

Practical calc() Examples

1. Layout with Sidebar

1.container {
2  display: flex;
3}
4
5.sidebar {
6  width: 250px;
7  flex-shrink: 0;
8}
9
10.main-content {
11  /* Width = 100% minus sidebar minus gap */
12  width: calc(100% - 250px - 20px);
13}

2. Full Height Minus Header and Footer

1.main {
2  /* 100vh minus header height (80px) and footer (60px) */
3  min-height: calc(100vh - 80px - 60px);
4}

3. Responsive Padding

1.section {
2  /* Padding grows with screen size */
3  padding: calc(20px + 2vw);
4  /* At 320px: 20px + 6.4px = 26.4px */
5  /* At 1920px: 20px + 38.4px = 58.4px */
6}

4. Grid with Gap

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, calc((100% - 40px) / 3));
4  gap: 20px;
5  /* 3 columns, 2 gaps of 20px = 40px total gap */
6}

5. Aspect Ratio Box (before aspect-ratio property)

1.aspect-16-9 {
2  width: 100%;
3  /* 9/16 = 0.5625 = 56.25% */
4  padding-bottom: calc(9 / 16 * 100%);
5  position: relative;
6}
7
8.aspect-16-9 > * {
9  position: absolute;
10  top: 0;
11  left: 0;
12  width: 100%;
13  height: 100%;
14}

min() - Smallest Value

min()

returns the smallest value from those given. Ideal for setting maximum limits!

1.element {
2  /* Never more than 800px, but can be smaller */
3  width: min(800px, 100%);
4
5  /* Equivalent to: */
6  width: 100%;
7  max-width: 800px;
8}

Practical min() Examples

1. Responsive Max-Width

1.container {
2  /* Maximum 1200px, but 90% on small screens */
3  width: min(1200px, 90%);
4  margin: 0 auto;
5}

2. Responsive Font-Size

1h1 {
2  /* Maximum 48px, but scales with screen */
3  font-size: min(48px, 5vw);
4}

3. Padding with Limit

1.section {
2  /* Padding grows, but maximum 80px */
3  padding: min(80px, 5vw);
4}

4. Multi-Column with min()

1.grid {
2  display: grid;
3  /* Columns minimum 250px, maximum equal parts */
4  grid-template-columns: repeat(auto-fit, min(250px, 100%));
5  gap: 20px;
6}

max() - Largest Value

max()

returns the largest value from those given. Ideal for setting minimum limits!

1.element {
2  /* Never smaller than 200px, but can be larger */
3  width: max(200px, 50%);
4
5  /* Equivalent to: */
6  width: 50%;
7  min-width: 200px;
8}

Practical max() Examples

1. Responsive Min-Width

1.card {
2  /* Minimum 300px, but can grow */
3  width: max(300px, 30%);
4}

2. Font-Size with Minimum

1body {
2  /* Minimum 16px, but grows with screen */
3  font-size: max(16px, 1vw);
4}

3. Spacing with Minimum

1.section {
2  /* Minimum 20px padding, even on small screens */
3  padding: max(20px, 3vw);
4}

4. Grid Columns with Minimum

1.grid {
2  /* Columns minimum 200px */
3  grid-template-columns: repeat(auto-fit, minmax(max(200px, 25%), 1fr));
4}

clamp() - Value Within Range

clamp()

is the most powerful function - it returns a value constrained to a range!

Syntax:

clamp(minimum, preferred, maximum)

1.element {
2  /* Minimum 16px, preferred 2vw, maximum 32px */
3  font-size: clamp(16px, 2vw, 32px);
4}

How it works:

1. If preferred < minimum -> return minimum
2. If preferred > maximum -> return maximum
3. Otherwise -> return preferred

Practical clamp() Examples

1. Fluid Typography - BEST USE CASE

1h1 {
2  /* Font size from 24px to 64px, scales smoothly */
3  font-size: clamp(24px, 4vw + 1rem, 64px);
4}
5
6h2 {
7  font-size: clamp(20px, 3vw + 1rem, 48px);
8}
9
10h3 {
11  font-size: clamp(18px, 2.5vw + 1rem, 36px);
12}
13
14p {
15  font-size: clamp(16px, 1vw + 0.5rem, 20px);
16}
17
18/* One typography system for all screens! */

2. Container Width

1.container {
2  /* From 320px to 1200px, scales smoothly */
3  width: clamp(320px, 90%, 1200px);
4  margin: 0 auto;
5}

3. Spacing System

1:root {
2  /* Fluid spacing from small to large screens */
3  --spacing-xs: clamp(0.5rem, 1vw, 1rem);
4  --spacing-sm: clamp(1rem, 2vw, 1.5rem);
5  --spacing-md: clamp(1.5rem, 3vw, 2.5rem);
6  --spacing-lg: clamp(2rem, 4vw, 4rem);
7  --spacing-xl: clamp(3rem, 6vw, 6rem);
8}
9
10.section {
11  padding: var(--spacing-lg);
12  margin-bottom: var(--spacing-md);
13}

4. Line Height

1p {
2  font-size: clamp(16px, 1vw + 0.5rem, 20px);
3  /* Line height also fluid! */
4  line-height: clamp(1.5, 0.5vw + 1.3, 1.8);
5}

5. Grid Gap

1.grid {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4  /* Fluid gap */
5  gap: clamp(1rem, 2vw, 3rem);
6}

6. Button Padding

1.button {
2  /* Padding grows with screen size */
3  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
4  font-size: clamp(14px, 1.5vw, 18px);
5}

Advanced Combinations

calc() + min/max/clamp

1.element {
2  /* Width with dynamic padding */
3  width: calc(min(1200px, 100%) - 2rem);
4
5  /* Height with minimum and dynamic offset */
6  height: calc(max(400px, 50vh) - 80px);
7
8  /* Proportional padding with limits */
9  padding: calc(clamp(1rem, 3vw, 3rem) * 0.5);
10}

Nested Functions

1.container {
2  /* Maximum 1400px, but minimum 90%, with padding */
3  width: calc(min(1400px, 90%) - clamp(1rem, 3vw, 3rem) * 2);
4}

CSS Variables + Functions

1:root {
2  --base-spacing: 1rem;
3  --multiplier: 2;
4  --max-spacing: 4rem;
5}
6
7.element {
8  /* Dynamic spacing with variables */
9  padding: clamp(
10    var(--base-spacing),
11    calc(var(--base-spacing) * var(--multiplier)),
12    var(--max-spacing)
13  );
14}

Complete Fluid Typography System

1:root {
2  /* Viewport units for scaling */
3  --fluid-min-width: 320;
4  --fluid-max-width: 1920;
5
6  /* Font sizes */
7  --fluid-xs: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
8  --fluid-sm: clamp(0.875rem, 0.75vw + 0.625rem, 1rem);
9  --fluid-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
10  --fluid-md: clamp(1.125rem, 1.5vw + 0.75rem, 1.5rem);
11  --fluid-lg: clamp(1.5rem, 2vw + 1rem, 2rem);
12  --fluid-xl: clamp(2rem, 3vw + 1.25rem, 3rem);
13  --fluid-2xl: clamp(2.5rem, 4vw + 1.5rem, 4rem);
14  --fluid-3xl: clamp(3rem, 5vw + 2rem, 5rem);
15}
16
17body {
18  font-size: var(--fluid-base);
19  line-height: clamp(1.5, 0.3vw + 1.4, 1.7);
20}
21
22h1 {
23  font-size: var(--fluid-3xl);
24  line-height: 1.1;
25}
26
27h2 {
28  font-size: var(--fluid-2xl);
29  line-height: 1.2;
30}
31
32h3 {
33  font-size: var(--fluid-xl);
34  line-height: 1.3;
35}
36
37.small {
38  font-size: var(--fluid-sm);
39}
40
41.large {
42  font-size: var(--fluid-lg);
43}

Other Useful CSS Functions

attr() - Get Attribute

1.tooltip::after {
2  content: attr(data-tooltip);
3  /* Use attribute value as content */
4}

var() - CSS Variables

1:root {
2  --primary-color: #3498db;
3  --spacing: 20px;
4}
5
6.element {
7  color: var(--primary-color);
8  padding: var(--spacing);
9
10  /* With fallback */
11  background: var(--secondary-color, #2ecc71);
12}

rgb(), rgba(), hsl(), hsla()

1.element {
2  /* RGB */
3  color: rgb(52, 152, 219);
4
5  /* RGBA with alpha */
6  background: rgba(52, 152, 219, 0.5);
7
8  /* HSL (Hue, Saturation, Lightness) */
9  color: hsl(204, 70%, 53%);
10
11  /* HSLA */
12  background: hsla(204, 70%, 53%, 0.5);
13}

url() - External Resources

1.element {
2  background-image: url('pyramid.jpg');
3  list-style-image: url('hieroglyph.svg');
4}

Performance and Browser Support

Browser support:

• calc()

  - everywhere (since 2013)

• min()

  ,

  max()

  - Chrome 79+, Firefox 75+, Safari 11.1+ (2020)

• clamp()

  - Chrome 79+, Firefox 75+, Safari 13.1+ (2020)

Performance:

• Functions are calculated ONLY when values change
• Better than JavaScript for simple calculations
• GPU-accelerated when used with transform

Fallbacks for older browsers:

1.element {
2  /* Fallback */
3  font-size: 20px;
4
5  /* Modern browsers */
6  font-size: clamp(16px, 2vw, 32px);
7}
8
9/* Or with @supports */
10@supports (font-size: clamp(16px, 2vw, 32px)) {
11  .element {
12    font-size: clamp(16px, 2vw, 32px);
13  }
14}

Best Practices

1. Use clamp() for fluid typography - one system for all screens
2. Combine with CSS Variables - easier maintenance
3. Test at various resolutions - especially edge cases
4. Add fallbacks - for older browsers
5. Document ranges - comments helpful for others

1/* Well documented */
2h1 {
3  /* 24px @ 320px -> 64px @ 1920px */
4  font-size: clamp(24px, 1.5rem + 2.5vw, 64px);
5}

Summary

CSS Functions - applications:

• calc() - basic calculations, mixing units
• min() - maximum limits (max-width without max-width)
• max() - minimum limits (min-width without min-width)
• clamp() - values within range, fluid typography

Advantages:

• Dynamic values without JavaScript
• Automatic responsiveness
• Fewer media queries
• Smooth scaling

Best use cases:

• Fluid typography system
• Responsive spacing
• Container widths
• Layout calculations

Remember: CSS Functions are like the mathematics of Egyptian scribes - precise calculations built directly into stylesheets, allowing you to create dynamic, responsive designs without JavaScript!