Stylus tools

Styles generation

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()

Utilities

Gets the size of unit of baseline grid.

gu(1)

Gets the height of line of body text.

line(1)

Do the same as .clearfix class.

clearfix()

Media queries

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.

+media-up(breakpoint)

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: block

+media-down(breakpoint)

Creates media query of at most the maximum breakpoint width. No query for the largest breakpoint.

+media-down('md') { ... }

+media-between(breakpoint)

Creates media query that spans multiple breakpoint widths.

+media-between('md', 'lg') { ... }

+media-only(breakpoint)

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') { ... }

breakpoint-infix()

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"

Build custom utilities

With +media-up() and breakpoint-infix() you can create you own responsive utilities. This example shows how standard flex utilities are created.

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.


Grid