Stylus variables

With stylus you can change number of grid columns, breapoints ans other utilities.

These are all available Stylus variables.

// Amount of columns in grid 
// Example: if you set it to 16, than classes like .col-16 .col-sm-16 will be available
$grid-columns = 12

// Grid tiers
// Breakpoints' and screen's min-width value for each of them
$grid-breakpoints = {
    xs: 0,     // Extra small screen / phone
    sm: 576px, // Small screen / phone
    md: 768px, // Medium screen / tablet
    lg: 992px, // Large screen / desktop
    xl: 1200px // Extra large screen / wide desktop
}

// max-width of .container at every breakpoint except `xs`
// on `xs` the width of .container will be 100%
$container-max-widths = {
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
}

// Settings for width (.w-50) and height (.h-100) utilities
$sizes = {
    '25': 25%,
    '50': 50%,
    '75': 75%,
    '100': 100%,
    auto: auto
}

// Settings for spacing utilities
$spacers = {
    '0':    0,
    '01':   gu(1),
    '1':    var(--space-1),
    '2':    var(--space-2),
    '3':    var(--space-3),
    '4':    var(--space-4),
    '5':    var(--space-5)
    'auto': s('auto')
}

To generate styles with you settings:

// Import library
@import 'setka'

// Set variables
$grid-breakpoints = {
    xs: 0, 
    sm: 400px, 
    md: 600px,
    lg: 800px,
    xl: 1050px,
    hd: 1800px
}

// Then generate Setka's styles
setka()

Grid