bootstrap-4-grid-styl/stylus/bootstrap/_variables.styl

Bootstrap 4 grid system and layout utilities using Stylus

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex = $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-grid-classes := true
$enable-print-styles := true

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer := 1rem
// $spacers = {} <- in sass was $spacers = () then map-merge
// stylelint-disable-next-line scss/dollar-variable-default
$spacers := {"0": 0, "1": ($spacer * .25), "2": ($spacer * .5), "3": $spacer, "4": ($spacer * 1.5), "5": ($spacer * 3)}

// This variable affects the `.h-*` and `.w-*` classes.
// $sizes = {}  <- in sass was $sizes = () then map-merge
// stylelint-disable-next-line scss/dollar-variable-default
$sizes := {"25": 25%, "50": 50%, "75": 75%, "100": 100%, "auto": auto}

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints := {xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px}

_assert-ascending($grid-breakpoints, "$grid-breakpoints")
_assert-starts-at-zero($grid-breakpoints)

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths := {sm: 540px, md: 720px, lg: 960px, xl: 1140px}

_assert-ascending($container-max-widths, "$container-max-widths")

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns := 12
$grid-gutter-width := 30px

// Printing
$print-page-size := a3
$print-body-min-width := $grid-breakpoints["lg"]