Foundation is mobile-first: unprefixed or small-* rules apply from the smallest screens; medium-*, large-*, and xlarge-* layer on at defined min-widths from Sass settings.
Breakpoint vocabulary
small-12— full width on the default (small) rangemedium-8 medium-offset-2— eight columns wide, offset two, from medium upshow-for-medium-only— visibility tied to breakpoints (covered in helpers)small-up-2 medium-up-3ongrid-x— equal columns without sizing every child
Default breakpoints align with common device ranges; customize in Sass if your design system uses different cut points—same idea as overriding Bootstrap’s $grid-breakpoints.
Important interview questions and answers
- Q: What is mobile-first in Foundation?
A: Base styles target the smallest screens; larger breakpoints add classes that override width and visibility as viewport grows. - Q: How do offsets work?
A:medium-offset-2inserts empty track space before a cell from that breakpoint up—useful for centered narrower columns.
Self-check
- Which class centers an eight-column card with two-column margins on each side at medium+?
- What is the difference between
medium-up-3on the row vsmedium-4on each cell?
Interview prep
- What does medium-6 mean?
At the medium breakpoint and up, the cell spans half the horizontal track (6 of 12 columns in the default mental model).