@ithaka/bonsai
Version:
ITHAKA core styling
28 lines (21 loc) • 728 B
Markdown
title: Media Query
description: Support for adjusting visual design on a variety of screen sizes.
sass: ./scss/_mediaquery.scss
js: ./js/bonsai.mediaquery.js
foundation: http://foundation.zurb.com/sites/docs/media-queries.html
## How to use
### Defining breakpoints
Bonsai comes with many breakpoints built-in. Classes and breakpoint values are defined in separate variables.
```
$bonsai-breakpoint-classes: (small, medium, large, xlarge, xxlarge) !default;
$bonsai-breakpoints: (
small: 0,
medium: 560px,
large: 760px,
xlarge: 1024px,
xxlarge: 1280px
) !default;
```
If there exists a defined breakpoint class in `$bonsai-breakpoint-classes` then it must be a breakpoint value in `$bonsai-breakpoints`.