b224

Author: UnderlineWords

package.json

@@ -14,9 +14,10 @@
     "multi-theme"
   ],
   "scripts": {
-    "prod"    : "sass src/punica.scss dist/punica.min.css --no-source-map --style compressed",
-    "unminify": "sass src/punica.scss dist/punica.css --no-source-map",
-    "watch"   : "npm run prod -- -w"
+    "prod"          : "sass src/punica.scss dist/punica.min.css --no-source-map --style compressed",
+    "unminify"      : "sass src/punica.scss dist/punica.css --no-source-map",
+    "unminify-watch": "npm run unminify -- -w",
+    "watch"         : "npm run prod -- -w"
   },
   "dependencies": {
     "sass": "1.82.0"

src/Core/Global/Mixins.scss

@@ -14,7 +14,7 @@
 @mixin breakpoints(
 	$size, $width: 'min-width'
 ) {
-	@media only screen and ($width: $size) {
+	@media ($width: $size) {
 		@content;
 	}
 }

src/Modules/Elements/Grid/Grid.scss

@@ -10,16 +10,28 @@
 @if enabled('elements', 'grid') {
 	$column-size: elements('grid', 'columns', 'size');
 
-	.#{class('grid', 'container')} {
+	// Containers
+	.#{class('grid', 'container')},
+	[class^="#{class('grid', 'container')}-"] {
 		width  : elements('grid', 'container', 'width');
 		margin : elements('grid', 'container', 'margin');
 		padding: 0 elements('grid', 'container', 'padding');
 	}
 	@include breakpoints(elements('grid', 'breakpoints', 'medium'), 'max-width') {
-		.#{class('grid', 'container')} {
+		.#{class('grid', 'container')},
+		[class^="#{class('grid', 'container')}-"] {
 			padding: 0 calc(elements('grid', 'container', 'padding') / 3);
 		}
 	}
+	@each $label, $breakpoint in elements('grid', 'container', 'viewports') {
+		@include breakpoints($breakpoint) {
+			.#{class('grid', 'container')}-#{$label} {
+				max-width: calc(#{$breakpoint} - 1.7%);
+			}
+		}
+	}
+
+	// Row
 	.#{class('grid', 'row')} {
 		display              : grid;
 		grid-gap             : elements('grid', 'gap');
@@ -36,12 +48,14 @@
 			}
 		}
 	}
+
 	// Default Grid System
 	@for $id from 1 through $column-size {
 		.#{class('grid', 'column')}-#{$id} {
 			grid-column: span #{$id};
 		}
 	}
+
 	// Breakpoints
 	@each $label, $breakpoint in elements('grid', 'viewports') {
 		@include breakpoints($breakpoint) {
@@ -52,6 +66,7 @@
 			}
 		}
 	}
+	
 	// Offset
 	@if features('elements', 'grid', 'offset') {
 		@each $label, $breakpoint in elements('grid', 'viewports') {

src/options.scss

@@ -1204,7 +1204,14 @@ $options: (
 			'container': (
 				'width'  : 100%,
 				'padding': 40px, // for left and right sides
-				'margin' : 0 auto
+				'margin' : 0 auto,
+				'viewports': ( // only for containers
+					('sm', 500px),
+					('md', 768px),
+					('lg', 992px),
+					('xl', 1260px),
+					('xxl', 1400px)
+				)
 			),
 			'breakpoints': (
 				'extra-small'      : 0,