Breakpoints

Define your breakpoints once, and Sass handles the rest. All breakpoints are defined in the Breakpoint and Grid Variables section of timber.scss.liquid. Easily change, add, or remove the breakpoints and names to suit your needs. These are the default breakpoints:

• Small: 480px
• Medium: 768px
• Large: 769px

$breakpoints is broken down into four lines, each a breakpoint: 'small', 'medium', 'medium-down', and 'large'. These are the names used in your classes to define each column width. A .grid__item div with a class of large--one-half will span 50% of its parent above 769px. Any screen size below that breakpoint will default to (mobile-first) 100%.

$viewportIncrement: 1px;

$small: 480px;
$medium: 768px;
$large: 769px;

$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$preLarge: $large - $viewportIncrement;

/* The following are dependencies of csswizardry grid */
$breakpoints: (
  'small' '(max-width: #{$small})',
  'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})',
  'medium-down' '(max-width: #{$medium})',
  'large' '(min-width: #{$large})'
);