Breakpoints
$tg-[name]-[feature]
Primary breakpoints
Analytics have helped us define four primary breakpoints which allow us to control layout based on the browser width.
Use minmax
| Breakpoint description | Name | Size range | Features (default min |
|---|---|---|---|
| Small | sm | 0 - 767px | min, max |
| Medium | md | 768 - 1023px | min, max |
| Large | lg | 1024 - 1439px | min, max |
| Extra large | xl | 1440px + | min |
Secondary breakpoints
| Breakpoint description | Name | Size range | Features (default min |
|---|---|---|---|
| Small-medium | sd | 480px - 767px | min, max |
| Medium-large | mg | 960px - 1023px | min, max |
| Large-extra large | ll | 1280px - 1439px | min, max |
| Extra extra large | xxl | 1600px + | min |
Additional breakpoints
| Breakpoint description | Name | Size range | Features |
|---|---|---|---|
| Small-small | ss | 479px | max |
| Medium-small | ms | 959px | max |
| Large-medium | lm | 1279px | max |
For example, when using with media queries:
- Recommended - Breakpoints larger than:
@media (min-width: $tg-sm-min) - Breakpoints small than:
@media (max-width: $tg-sm-max) - Breakpoints only between:
@media (min-width: $tg-md-min) and (max-width: $tg-md-max)