Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 3 extra large grid with SASS
// for background see http://stackoverflow.com/a/25644266/526258
@import "bootstrap";
// XLarge screen
$screen-xl: 1600px;
$screen-xl-min: $screen-xl;
$screen-xl-hugedesktop: $screen-xl-min;
// So media queries don't overlap when required, provide a maximum
$screen-lg-max: ($screen-xl-min - 1);
//== Container sizes
// Large screen / wide desktop
$container-xlarge-desktop: ((1540px + $grid-gutter-width));
$container-xl: $container-xlarge-desktop;
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
@media (min-width: $screen-xl-min) {
width: $container-xl;
}
}
@mixin make-grid-xlcolumns($i: 1, $list: ".col-xl-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xl-#{$i}";
}
#{$list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
@include make-grid-xlcolumns();
@media (min-width: $screen-xl-min) {
@include make-grid(xl);
}
// Generate the large columns
@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@media (min-width: $screen-xl-min) {
float: left;
width: percentage(($columns / $grid-columns));
}
}
@mixin make-xl-column-offset($columns) {
@media (min-width: $screen-xl-min) {
margin-left: percentage(($columns / $grid-columns));
}
}
@mixin make-xl-column-push($columns) {
@media (min-width: $screen-xl-min) {
left: percentage(($columns / $grid-columns));
}
}
@mixin make-xl-column-pull($columns) {
@media (min-width: $screen-xl-min) {
right: percentage(($columns / $grid-columns));
}
}
//////
// Visibility utilities
@include responsive-invisibility('.visible-xl');
.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block {
display: none !important;
}
@media (min-width: $screen-xl-min) {
@include responsive-visibility('.visible-xl');
}
.visible-xl-block {
@media (min-width: $screen-xl-min) {
display: block !important;
}
}
.visible-xl-inline {
@media (min-width: $screen-xl-min) {
display: inline !important;
}
}
.visible-xl-inline-block {
@media (min-width: $screen-xl-min) {
display: inline-block !important;
}
}
@media (min-width: $screen-xl-min) {
@include responsive-invisibility('.hidden-xl');
}
@bradbamford

This comment has been minimized.

Copy link

@bradbamford bradbamford commented Aug 11, 2015

This is great, but isn't it missing all the .visible and .hidden utilities classes that need to be added/updated ?

@kivervinicius

This comment has been minimized.

Copy link

@kivervinicius kivervinicius commented Dec 17, 2019

Add xxl

// XLarge screen
$screen-xl: 1600px;
$screen-xl-min: $screen-xl;
$screen-xl-hugedesktop: $screen-xl-min;

$screen-xxl: 1900px;
$screen-xxl-min: $screen-xxl;
$screen-xxl-hugedesktop: $screen-xxl-min;

// So media queries don't overlap when required, provide a maximum
$screen-lg-max: ($screen-xl-min - 1);
$screen-xl-max: ($screen-xxl-min - 1);

//== Container sizes
// Large screen / wide desktop
$container-xlarge-desktop: ((1540px + $grid-gutter-width));
$container-xl: $container-xlarge-desktop;
$container-xxlarge-desktop: ((1840px + $grid-gutter-width));
$container-xxl: $container-xxlarge-desktop;

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
    @media (min-width: $screen-xl-min) {
        width: $container-xl;
    }
    @media (min-width: $screen-xxl-min) {
        width: $container-xxl;
    }
}

@mixin make-grid-extra-columns($i: 1, $list: ".col-xl-#{$i}, .col-xxl-#{$i}") {

    @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col-xl-#{$i}, .col-xxl-#{$i}";
    }

    #{$list} {
        position: relative;
        // Prevent columns from collapsing when empty
        min-height: 1px;
        // Inner gutter via padding
        padding-left: ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }

}

@include make-grid-extra-columns();

@media (min-width: $screen-xl-min) {
    @include make-grid(xl);
}

@media (min-width: $screen-xxl-min) {
    @include make-grid(xxl);
}

// Generate the large columns
// XL
@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left: ($gutter / 2);
    padding-right: ($gutter / 2);

    @media (min-width: $screen-xl-min) {
        float: left;
        width: percentage(($columns / $grid-columns));
    }
}

@mixin make-xl-column-offset($columns) {
    @media (min-width: $screen-xl-min) {
        margin-left: percentage(($columns / $grid-columns));
    }
}

@mixin make-xl-column-push($columns) {
    @media (min-width: $screen-xl-min) {
        left: percentage(($columns / $grid-columns));
    }
}

@mixin make-xl-column-pull($columns) {
    @media (min-width: $screen-xl-min) {
        right: percentage(($columns / $grid-columns));
    }
}

// XXL
@mixin make-xxl-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left: ($gutter / 2);
    padding-right: ($gutter / 2);

    @media (min-width: $screen-xxl-min) {
        float: left;
        width: percentage(($columns / $grid-columns));
    }
}

@mixin make-xxl-column-offset($columns) {
    @media (min-width: $screen-xxl-min) {
        margin-left: percentage(($columns / $grid-columns));
    }
}

@mixin make-xxl-column-push($columns) {
    @media (min-width: $screen-xxl-min) {
        left: percentage(($columns / $grid-columns));
    }
}

@mixin make-xxl-column-pull($columns) {
    @media (min-width: $screen-xxl-min) {
        right: percentage(($columns / $grid-columns));
    }
}

// Visibility utilities

@include responsive-invisibility('.visible-xl');
@include responsive-invisibility('.visible-xxl');

.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xxl-block,
.visible-xxl-inline,
.visible-xxl-inline-block {
    display: none !important;
}


@media (min-width: $screen-xl-min) {
    @include responsive-visibility('.visible-xl');
}

@media (min-width: $screen-xxl-min) {
    @include responsive-visibility('.visible-xxl');
}
// XL
.visible-xl-block {
    @media (min-width: $screen-xl-min) {
        display: block !important;
    }
}

.visible-xl-inline {
    @media (min-width: $screen-xl-min) {
        display: inline !important;
    }
}

.visible-xl-inline-block {
    @media (min-width: $screen-xl-min) {
        display: inline-block !important;
    }
}
// XXL
.visible-xxl-block {
    @media (min-width: $screen-xxl-min) {
        display: block !important;
    }
}

.visible-xxl-inline {
    @media (min-width: $screen-xxl-min) {
        display: inline !important;
    }
}

.visible-xxl-inline-block {
    @media (min-width: $screen-xxl-min) {
        display: inline-block !important;
    }
}

// XL
@media (min-width: $screen-xl-min) {
    @include responsive-invisibility('.hidden-xl');
}
// XXL
@media (min-width: $screen-xxl-min) {
    @include responsive-invisibility('.hidden-xxl');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment