Bootstrap Container Based Grid - Using Bootstrap as Reference

container-based-grid.less

@import (reference) "../bootstrap-less/bootstrap.less";
@import "../bootstrap-less/mixins/grid.less";

@max-amount-columns: 12;

.custom-col(@sizeCateg, @col-index: @max-amount-columns, @column-val: @max-amount-columns) when (@col-index > 0) {

    (~".col-@{sizeCateg}-@{col-index}") {

        & when (@sizeCateg = 'xs'){
            .make-lg-column(@column-val);
            .make-md-column(@column-val);  
            .make-sm-column(@column-val);  
        }

        & when (@sizeCateg = 'sm') {
            .make-lg-column(@column-val);
            .make-md-column(@column-val);            
        }

        & when (@sizeCateg = 'md') {
            .make-lg-column(@column-val);
        }
    }

    .custom-col(@sizeCateg, @col-index - 1, @column-val);
}

.custom-grid-xs {
    .custom-col('sm');
    .custom-col('md');
    .custom-col('lg');
}

.custom-grid-sm {
    .custom-col('md');
    .custom-col('lg');
}

.custom-grid-md {
    .custom-col('lg');
}

.custom-grid-lg, .custom-grid-xl {
    
}

script.ts

    type ContainerSizeType = "xs" | "sm" | "md" | "lg" | "xl";

    interface IContainerSize {

        name(): ContainerSizeType;
    }

    class ContainerSizeFactory {
        getInstance(sizeType: ContainerSizeType) {
            switch (sizeType) {
                case "xs":
                    return new XtraSmallSize();
                case "sm":
                    return new SmallSize();
                case "md":
                    return new MediumSize();
                case "lg":
                    return new LargeSize();
                case "xl":
                    return new XtraLargeSize();
                default:
                    throw `size ${sizeType} not defined`;
            }
        }
    }

    abstract class ContainerSize implements IContainerSize {

        protected codeName: ContainerSizeType = "md";
        protected weight: number;

        name(): ContainerSizeType { return this.codeName as ContainerSizeType; }
        size(): number { return this.weight; }
    }

    class XtraSmallSize extends ContainerSize {
        codeName: ContainerSizeType = "xs";
        weight: number = 1;
    }

    class SmallSize extends ContainerSize {
        codeName: ContainerSizeType = "sm";
        weight: number = 2;
    }

    class MediumSize extends ContainerSize {
        codeName: ContainerSizeType = "md";
        weight: number = 3;
    }

    class LargeSize extends ContainerSize {
        codeName: ContainerSizeType = "lg";
        weight: number = 4;
    }

    class XtraLargeSize extends ContainerSize {
        codeName: ContainerSizeType = "xl";
        weight: number = 5;
    }

    class Breakpoint {

        constructor(
            public min: number,
            public max: number,
            public sizeCategory: ContainerSize) { }

        isMatched(size: number) {
            if (!this.min && !this.max) throw 'min and max cannot be both undefined or null';

            if (!this.min)
                return size <= this.max;

            if (!this.max)
                return size >= this.min;

            return size >= this.min && size <= this.max;
        }
    }

    const breakpoints = [
        new Breakpoint(null, 575, new XtraSmallSize()),
        new Breakpoint(576, 767, new SmallSize()),
        new Breakpoint(768, 991, new MediumSize()),
        new Breakpoint(992, 1199, new LargeSize()),
        new Breakpoint(1200, null, new XtraLargeSize())
    ];

    class BreakpointFinder {
        constructor(
            private allBreakpoints: Breakpoint[]
        ) {

        }

        find(size: number): Breakpoint {
            for (let breakpoint of this.allBreakpoints) {
                if (!breakpoint.isMatched(size)) continue;

                return breakpoint;
            }

            return null;
        }
    }