Stylus tools
Generate all styles of Setka's.
setka()Or generate partially, pick what you need.
setka-base-styles() // required
setka-debug()
setka-grid()
setka-display()
setka-float()
setka-flex()
setka-sizing()
setka-spacing()
setka-align()
setka-text()
setka-visibility()Gets the size of unit of
gu(1)Gets the height of line of body text.
line(1)Do the same as
clearfix()Setka gives block mixins to help you with media queries: +media-up(), +media-down(), +media-between() and +media-only(). They use $grid-breakpoints hash to retrieve values in pixels.
Creates media query of at least the minimum breakpoint width. No query for the smallest breakpoint.
+media-up('sm') { ... }
+media-up('md') { ... }
+media-up('lg') { ... }
+media-up('xl') { ... }
// Example
+media-up('sm')
.some-class
display: block
// or
.some-class
+media-up('sm')
display: blockCreates media query of at most the maximum breakpoint width. No query for the largest breakpoint.
+media-down('md') { ... }Creates media query that spans multiple breakpoint widths.
+media-between('md', 'lg') { ... }Creates media query between the breakpoint's minimum and maximum widths. No minimum for the smallest breakpoint, and no maximum for the largest one.
+media-only('md') { ... }Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
breakpoint-infix($name, $breakpoints = $grid-breakpoints)Examples.
breakpoint-infix('xs', (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "" (Returns a blank string)
breakpoint-infix('sm', (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "-sm"
With +media-up() and breakpoint-infix() you can create you own responsive utilities. This example shows how standard
for $breakpoint in keys($grid-breakpoints)
+media-up($breakpoint)
$infix = breakpoint-infix($breakpoint, $grid-breakpoints)
.flex{$infix}-row { flex-direction: row !important; }
.flex{$infix}-column { flex-direction: column !important; }
.flex{$infix}-row-reverse { flex-direction: row-reverse !important; }
.flex{$infix}-column-reverse { flex-direction: column-reverse !important; }
It generates a bunch of classes: .flex-row, .flex-sm-row, .flex-md-row, and so on.