colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
46 lines (45 loc) • 1.3 kB
text/stylus
// Breakpoints RWD
//
// Colette provide a collection of breakpoints and media queries, available in a `$breakpoints` hash.
//
// We handle 3 default primary breakpoints and related media queries:
// ```stylus
// $breakpoints-main ?= {
// 'sm': "screen and (min-width: 420px)"
// 'md': "screen and (min-width: 768px)"
// 'lg': "screen and (min-width: 960px)"
// }
// ```
// We can also define secondary breakpoints within the `$breakpoints-tweak` collection (which is empty by default).
//
// Colette allows you to:
// - change primary breakpoints by updating the `$breakpoints-main` within your stylesheet,
// - and/or define additional breakpoints by filling the `$breakpoints-tweak`.
//
// Both collections are merged within `$breakpoints`.
//
// **Usage example**
// ```stylus
// /* stylus file */
// @media $breakpoints.lg
// // styles
// ```
//
// will compile to
// ```css
// /* CSS file */
// @media screen and (min-width: 960px)
// /* styles */
// ```
//
// Weight: -1
//
// Styleguide: Settings.Breakpoints
$breakpoints-main ?= {
'sm': "screen and (min-width: 420px)"
'md': "screen and (min-width: 768px)"
'lg': "screen and (min-width: 960px)"
}
/* Secondary breakpoints */
$breakpoints-tweak ?= {}
$breakpoints ?= merge($breakpoints-main, $breakpoints-tweak)