dzakh / custom-gutters-bootstrap-plugin Goto Github PK
View Code? Open in Web Editor NEWSetup a custom gutters width for different screen breakpoints with the very minimalistic plugin.
License: MIT License
Setup a custom gutters width for different screen breakpoints with the very minimalistic plugin.
License: MIT License
Tried using this but it throws an error, which I think is probably expected in more recent versions of sass:
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.Recommendation: math.div($grid-gutter-width, 2) or calc($grid-gutter-width / 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
Easy to fix! See below
@use "sass:math";
$grid-gutter-widths: (
xs: 30px,
) !default;
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
@include media-breakpoint-up($grid-breakpoint) {
$grid-gutter-half-width: math.div($grid-gutter-width, 2);
.row:not(.no-gutters) {
margin-right: -$grid-gutter-half-width;
margin-left: -$grid-gutter-half-width;
}
.row:not(.no-gutters) > .col,
.row:not(.no-gutters) > [class*="col-"] {
padding-right: $grid-gutter-half-width;
padding-left: $grid-gutter-half-width;
}
}
}
An issue with the approach of this plugin is that it only redefines the classes used by bootstrap.
However if you reach for Bootstrap's grid mixins to apply your grids, it will ignore responsive gutters.
This is easy to solve if we provide a modified version of Bootstrap's grid mixin files to import instead:
Replacing @import "bootstrap/scss/mixins/grid-framework"
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@mixin make-grid-columns(
$columns: $grid-columns,
$gutter: $grid-gutter-width,
$breakpoints: $grid-breakpoints
) {
// Common properties for all breakpoints
%grid-column {
position: relative;
width: 100%;
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
@include media-breakpoint-up($grid-breakpoint) {
$grid-gutter-half-width: math.div($grid-gutter-width, 2);
padding-right: $grid-gutter-half-width;
padding-left: $grid-gutter-half-width;
}
}
}
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@if $columns > 0 {
// Allow columns to stretch full width below their breakpoints
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@extend %grid-column;
}
}
}
.col#{$infix},
.col#{$infix}-auto {
@extend %grid-column;
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
@if $grid-row-columns > 0 {
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}
}
.col#{$infix}-auto {
@include make-col-auto();
}
@if $columns > 0 {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@include make-col($i, $columns);
}
}
}
.order#{$infix}-first {
order: -1;
}
.order#{$infix}-last {
order: $columns + 1;
}
@for $i from 0 through $columns {
.order#{$infix}-#{$i} {
order: $i;
}
}
@if $columns > 0 {
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not($infix == "" and $i == 0) {
// Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-offset($i, $columns);
}
}
}
}
}
}
}
Replacing @import "bootstrap/scss/mixins/grids"
@use "sass:math";
$grid-gutter-widths: (
xs: 30px,
) !default;
/// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
margin-right: auto;
margin-left: auto;
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
@include media-breakpoint-up($grid-breakpoint) {
$grid-gutter-half-width: math.div($grid-gutter-width, 2);
padding-right: $grid-gutter-half-width;
padding-left: $grid-gutter-half-width;
}
}
}
@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
@include media-breakpoint-up($grid-breakpoint) {
$grid-gutter-half-width: math.div($grid-gutter-width, 2);
margin-right: -$grid-gutter-half-width;
margin-left: -$grid-gutter-half-width;
}
}
}
// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths(
$max-widths: $container-max-widths,
$breakpoints: $grid-breakpoints
) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
@include media-breakpoint-up($grid-breakpoint) {
$grid-gutter-half-width: math.div($grid-gutter-width, 2);
padding-right: $grid-gutter-half-width;
padding-left: $grid-gutter-half-width;
}
}
}
@mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 percentage(divide($size, $columns));
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage(divide($size, $columns));
}
@mixin make-col-auto() {
flex: 0 0 auto;
width: auto;
max-width: 100%; // Reset earlier grid tiers
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
> * {
flex: 0 0 divide(100%, $count);
max-width: divide(100%, $count);
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.