Multiple Breakpoint with respective Grid column and Gutter Width
npm install custom-gridnpm i custom-grid to install this package.
@import "~custom-grid/scss/bootstrap-grid";
import './style.scss';
const path = require('path');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(sa|sc|c)ss$/,
use: [miniCssExtractPlugin.loader,'css-loader', 'sass-loader'],
}
]
},
plugins: [
new miniCssExtractPlugin({
filename: 'style.css'
})
]
};
`
Usage of SCSS function
Example to call sass function to create container or row or columns with respect to different breakpoints
`
.newfluidcontainer {
@include make-container();
}
.newcontainer {
@include make-container();
@include make-container-max-widths();
}
.newrow {
@include make-row();
}
.newclass {
@include make-col-ready();
@include make-column(2, xs);
@include make-col-offset(1, 4);
@include media-breakpoint-down(xs) {
margin-top: 32px;
}
@include media-breakpoint-up(sm) {
@include make-column(4, sm);
@include make-col-offset(0, 8);
}
}
`
OR you can use old school style
``