Merge pull request #101

ADDED: Utility: Grid: Grid will allow to create complex grid layout using the CSS classes: 'row, col-(sm/md/lg)-1/12'.
SGNetworksIndia · Feb 14, 2023 · 94f4668 · 94f4668
2 parents d8a3c4e + 14f29b5
commit 94f4668
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 4 deletions.
diff --git a/build/config.js b/build/config.js
diff --git a/demos/grids.html b/demos/grids.html
@@ -0,0 +1,160 @@
+<!--
+  ~ Copyright (c) 2022-2023 SGNetworks. All rights reserved.
+  ~
+  ~ The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification",  "Alteration", "Re-distribution" is completely prohibited.
+  ~ VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Grids - SGNUIKit Demo</title>
+		<script src="/src/js/SGNUIKit.loader.js"></script>
+		<!--<script src="/dist/js/SGNUIKit.loader.js"></script>-->
+		<style>
+			.row * {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+				font-family: "Arial", sans-serif;
+				font-size: 1.1em;
+			}
+
+			.row {
+				margin-top: 5px;
+			}
+
+			.row > [class^="col-"] {
+				/* background-color: #ef5350; */
+				background-image: var(--purple-gradient);
+				padding: 3%;
+				border-radius: 2rem;
+				text-align: right;
+				color: white;
+				box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19) !important;
+				transition: background-color 1s;
+			}
+
+			.row > [class^="col-"]:nth-child(2n):hover {
+				/* background-color: #42a5f5; */
+				background-image: var(--blue-gradient);
+			}
+
+			.row > [class^="col-"]:nth-child(2n+1):hover {
+				/* background-color: #66bb6a; */
+				background-image: var(--aqua-gradient);
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<div class="sgn-container p-0">
+				<!--<div class="sgn-code-snippets" sgn-snippet-title="1/12 Grid">
+					<div class="row sgn-code-snippet" sgn-snippet-lang="html" sgn-snippet-preview-tab="true">
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+						<div class="col-1">1/12</div>
+					</div>
+					<div class="sgn-code-snippet" sgn-snippet-lang="css">
+						.row {
+							width: 100%;
+							display: flex;
+							flex-wrap: wrap;
+						}
+
+						.col-1 {
+							width: 8.33333%;
+						}
+					</div>
+					<div class="sgn-code-snippet" sgn-snippet-lang="js">
+						$(function() {
+							const $snippets = $(".sgn-code-snippet");
+							$snippets.SGNCodeSnippet();
+						});
+					</div>
+				</div>-->
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="1/12 Grid">
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+					<div class="col-1">1/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="2/12 Grid">
+					<div class="col-2">2/12</div>
+					<div class="col-2">2/12</div>
+					<div class="col-2">2/12</div>
+					<div class="col-2">2/12</div>
+					<div class="col-2">2/12</div>
+					<div class="col-2">2/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="3/12 Grid">
+					<div class="col-3">3/12</div>
+					<div class="col-3">3/12</div>
+					<div class="col-3">3/12</div>
+					<div class="col-3">3/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="4/12 Grid">
+					<div class="col-4">4/12</div>
+					<div class="col-4">4/12</div>
+					<div class="col-4">4/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="6/12 Grid">
+					<div class="col-6">6/12</div>
+					<div class="col-6">6/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="7/12 Grid">
+					<div class="col-5">5/12</div>
+					<div class="col-7">7/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="8/12 Grid">
+					<div class="col-4">4/12</div>
+					<div class="col-8">8/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="9/12 Grid">
+					<div class="col-3">3/12</div>
+					<div class="col-9">9/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="10/12 Grid">
+					<div class="col-2">2/12</div>
+					<div class="col-10">10/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="10/12 Grid">
+					<div class="col-1">1/12</div>
+					<div class="col-11">11/12</div>
+				</div>
+
+				<div class="row sgn-code-snippet" sgn-snippet-title="12/12 Grid">
+					<div class="col-12">12/12</div>
+				</div>
+			</div>
+		</main>
+	</body>
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -40,6 +40,7 @@
 							<div class="list-view">
 								<a class="list-link" href="text-colors.html">Text Colours</a>
 								<a class="list-link" href="gradients.html">Gradients</a>
+								<a class="list-link" href="grids.html">Grids</a>
 								<a class="list-link" href="shapes.html">Shapes</a>
 								<a class="list-link" href="shadows.html">Shadows</a>
 							</div>
@@ -48,7 +49,7 @@
 							<div class="list-group-title">Addons</div>
 							<div class="list-view">
 								<a class="list-link" href="atom.html">SGNAtom</a>
-								<a class="list-link" href="addons/fullpage.html">fullPage.js</a>
+								<a class="list-link" href="addons/fullpage.html">SGNFullPage</a>
 							</div>
 						</div>
 					</div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sgnuikit",
-	"version": "1.1.4",
+	"version": "1.2.1",
 	"description": "SGNUIKit is a very powerful UI kit designed to allow web developers use the power of the kit to build efficient and beautiful websites. SGNUIKit is currently being used in all the websites by SGNetworks.",
 	"homepage": "https://sgnuikit.cdn.sgnetworks.eu.org",
 	"author": {

diff --git a/src/css/utilities/autogrid.css b/src/css/utilities/autogrid.css
@@ -1,10 +1,12 @@
 /*
- * Copyright (c) 2022 SGNetworks. All rights reserved.
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
  *
  * The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification",  "Alteration", "Re-distribution" is completely prohibited.
  * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
  */
 
+@import "grids.css";
+
 .auto-grid {
 	align-items: flex-start;
 	display: flex;