Jellyfish is designed to be flexible, allowing an infinite number of user-defined (and user-named) breakpoints.
These are declared through the $breakpoints SCSS map. Upon code compile, css class names will be generated for each breakpoint, for columns .$breakpoint-* and modifiers .order-$breakpoint-*, .hide-$breakpoint-*.
md: (
breakpoint: 900px,
container-width: 90%,
container-max-width: 1140px,
container-gutter: 0px,
root-font-size: 18px,
root-line-height: 1.6,
col-gutter: get-size(2),
),
Jellyfish is mobile-first, so breakpoint settings will inherit upwards if not defined. Rather than targetting specific devices, the default breakpoints are set to sensible agnostic sizes.
Note: The $breakpoints map is merged with map-merge() into defaults, so if you need to remove an item for your project, you will need to use map.remove().
Note: Javascript also requires breakpoints to be defined. These are defined through the Javascript variable breakPoints and must be manually kept in sync with the SCSS breakpoints.
| Term | Description |
|---|---|
| breakpoint | The width at which the breakpoint will take effect. This must be provided in px and will be converted to an em value through the breakpoint mixin. This variable is required. |
| container-width | The width of the .container element at this breakpoint - should be provided as %, px or rem. |
| container-max-width | The maximum width of the .container element at this breakpoint - should be provided as px or rem. |
| container-gutter | Padding applied to the left and right of the .container element - this should be provided as px value. |
| col-gutter | Padding applied to the left and right of .col elements - this should be provided as a px value. This variable is required. |
| root-font-size | Global base font size (applied to body) which will affect all elements sized with em. Useful for improving legibility at different breakpoints. This should be provided as a px value. |
| root-line-height | Global base line-height (applied to body) which will affect all elements that do not have a line-height applied. Can be provided as a number, em or px. |
Note: You can also configure settings for the smallest devices (i.e. before any media queries are activated) by setting the following variables: $base-col-name, $root-font-size, $root-line-height, $base-container-gutter, $base-col-gutter
Jellyfish comes with three media query mixins. These mixins are flexible, allowing you to specify either a $breakpoint name from your breakpoint map or a px value. The below examples are all valid uses of the media query mixins.
// 1. Use the mixin within an element declaration
body {
@include above(sm) {
background-color: #ff3c74;
}
}
// 2. Add element declarations within the mixin
@include between(sm,md) {
.element {
background: linear-gradient(to right, #ff3c74 0%, #ffa0cd 100%);
}
}
.element {
// Pass a pixel value
@include below(600px) {
transform: rotate(100deg);
}
// Mix pixel values with breakpoint names
@include between(600px,lg) {
transition-duration: 10s;
}
// Pass a breakpoint name
@include above(lg) {
transition-timing-function: cubic-bezier(0.9, 0.1, .2, .4);
}
}
| Mixin | Result |
|---|---|
| @include above($min) {...} | CSS contained within the brackets will apply above the given breakpoint, until overwritten by specificity or a higher breakpoint. |
| @include between($min, $max) {...} | CSS will apply between the two specified breakpoints only. |
| @include below($max) {...} | CSS applies below the given breakpoint, unless overridden by specificity. As a general rule, it's best to use above() rather than below(). |