bootstrap-4-grid-styl

1.0.4 • Public • Published

Bootstrap 4 Grid System (Flex)

Bootstrap v4.1.3 grid system and layout utilities using Stylus

A Stylus implementation of Bootstrap 4 grid system Original code from Twitter Bootstrap 4 https://v4-alpha.getbootstrap.com/layout/grid/#sass-mixins

Utlilities:

  • display
  • flex
  • sizing
  • spacing
  • visibility

How to use in css file

@import "../../../node_modules/bootstrap-4-grid-styl/css/grid.min.css";

How to use in *.styl files example and custom configuration

$grid-breakpoints = {xs: 0, sm: 600px, md: 800px, lg: 1000px, xl: 1300px}
 
@import "../../../node_modules/bootstrap-4-grid-styl/stylus/grid.styl"

Available variables (Default)

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 = {"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 := {"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}

Grid containers

Define the maximum width of .container for different screen sizes.

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

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"]

Package Sidebar

Install

npm i bootstrap-4-grid-styl

Weekly Downloads

575

Version

1.0.4

License

MIT

Unpacked Size

80.1 kB

Total Files

27

Last publish

Collaborators

  • inshou