first commit

layout/style-scss/_container.scss

@@ -0,0 +1,74 @@
+@mixin min($bp, $max: "null", $device: "screen") {
+	@if $max == "null" {
+		@media only #{$device} and (min-width: #{$bp}) {
+			@content;
+		}
+	} @else {
+		@media only #{$device} and (min-width: #{$bp}) and (max-width: #{$max}) {
+			@content;
+		}
+	}
+}
+
+@function bp($bp) {
+	@return map-get($breakpoints, $bp);
+}
+
+$breakpoints: (
+	na: 0px,
+	// For BS grid
+	xs: 576px,
+	// Smartphone
+	sm: 768px,
+	// Tablets
+	md: 992px,
+	// Tablets Landscape and small desktops
+	lg: 1200px,
+	// Desktops
+	xl: 1532px,
+	// Large Desktop,,
+);
+
+@function container($container-size, $true-val: false) {
+	@return map-get($container-sizes, $container-size);
+}
+
+$container-sizes: (
+	sm: map-get($breakpoints, sm) - 30px,
+	md: map-get($breakpoints, md) - 40px,
+	lg: map-get($breakpoints, lg) - 50px,
+	xl: map-get($breakpoints, xl) - 100px,
+);
+
+.container {
+	padding-right: 1rem;
+	padding-left: 1rem;
+
+	&:not(.is-fluid) {
+		margin: 0 auto;
+
+		@each $bp, $container-size in $container-sizes {
+			@include min(#{bp(#{$bp})}) {
+				width: 100%;
+				max-width: container(#{$bp});
+			}
+		}
+	}
+}
+
+@each $bp, $container-size in $container-sizes {
+	.container-#{$bp} {
+		margin: 0 auto;
+		padding-right: 1rem;
+		padding-left: 1rem;
+		width: 100%;
+
+		$i: index($container-sizes, $bp $container-size);
+
+		@for $j from $i through length($container-sizes) {
+			@include min(#{bp(nth(nth($container-sizes, $j), 1))}) {
+				max-width: container(#{nth(nth($container-sizes, $j), 1)});
+			}
+		}
+	}
+}