Merge pull request #16 from maitrakhatri/simplified-grid

feat: simplified grid DONE
maitrakhatri · Feb 9, 2022 · 362dd2c · 362dd2c
2 parents 6d7e083 + eb25d96
commit 362dd2c
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 2 deletions.
diff --git a/CSS/Components/simplified-grid/index.html b/CSS/Components/simplified-grid/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>simplified  grid</title>
+    <link rel="stylesheet" href="simplified-grid.css">
+    <style>
+        /* JUST FOR DISPLAY PURPOSES. NOT A PART OF COMPONENT */
+        .grid-item {
+            padding: 1rem 2rem;
+            text-align: center;
+            background-color: #333333;
+            color: white;
+            margin: 1rem;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="grid-container grid-col-2">
+        <div class="grid-item">item1</div>
+        <div class="grid-item">item2</div>
+    </div>
+
+    <div class="grid-container grid-col-3">
+        <div class="grid-item">item1</div>
+        <div class="grid-item">item2</div>
+        <div class="grid-item">item3</div>
+    </div>
+
+</body>
+</html>
diff --git a/CSS/Components/simplified-grid/simplified-grid.css b/CSS/Components/simplified-grid/simplified-grid.css
@@ -0,0 +1,13 @@
+@import url(../../style.css);
+
+.grid-container {
+    display: grid;
+}
+
+.grid-col-2 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-col-3 {
+    grid-template-columns: repeat(3, 1fr);
+}
diff --git a/CSS/style.css b/CSS/style.css
@@ -14,6 +14,7 @@
 @import url(./Components/input/input.css);
 @import url(./Components/text-utilities/text-utilities.css);
 @import url(./Components/navigation/navigation.css);
+@import url(./Components/simplified-grid/simplified-grid.css);
 
 /* FONT */
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');

diff --git a/docs/components.html b/docs/components.html
@@ -9,6 +9,7 @@
     <title>gozo UI | Components</title>
     <link rel="stylesheet" href="./docs.css">
     <link rel="icon" type="image/x-icon" href="../assets/gozo-logo-540p.ico">
+    <script src="../JS/app.js"></script>
 </head>
 <body>
 
@@ -880,7 +881,7 @@ <h3 class="sub-section-title">Classic Navbar</h3>
 
         </div>
 
-        <div id="Slider" class="section">
+        <div id="slider" class="section">
 
             <h2 class="section-title">Slider</h2>
             <p>Slider is used to select input within a given range.</p>
@@ -903,8 +904,40 @@ <h3>JS used in Slider</h3>
             </div>
         </div>
 
+        <div id="simplified-grid" class="section">
+
+            <h2 class="section-title">Simplified Grid</h2>
+            <h3 class="sub-section-title">Grid 2</h3>
+            <p>Grid with 2 items and 2 columns</p>
+
+            <div class="component-container grid-show-container">
+                <div class="grid-container grid-col-2">
+                    <div class="grid-item">item1</div>
+                    <div class="grid-item">item2</div>
+                </div>
+            </div>
+
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522grid-container%2520grid-col-2%2522%253E%250A%2509%253Cdiv%2520class%253D%2522grid-item%2522%253Eitem1%253C%252Fdiv%253E%250A%2520%2509%253Cdiv%2520class%253D%2522grid-item%2522%253Eitem2%253C%252Fdiv%253E%250A%253C%252Fdiv%253E" style="width: 462px; height: 243px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
+            </div>
+
+            <h3 class="sub-section-title">Grid 3</h3>
+            <p>Grid with 3 items and 3 columns</p>
+
+            <div class="component-container grid-show-container">
+                <div class="grid-container grid-col-3">
+                    <div class="grid-item">item1</div>
+                    <div class="grid-item">item2</div>
+                    <div class="grid-item">item3</div>
+                </div>
+            </div>
+
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253Cdiv%2520class%253D%2522grid-container%2520grid-col-3%2522%253E%250A%2509%253Cdiv%2520class%253D%2522grid-item%2522%253Eitem1%253C%252Fdiv%253E%250A%2520%2509%253Cdiv%2520class%253D%2522grid-item%2522%253Eitem2%253C%252Fdiv%253E%250A%2520%2509%253Cdiv%2520class%253D%2522grid-item%2522%253Eitem3%253C%252Fdiv%253E%250A%253C%252Fdiv%253E" style="width: 462px; height: 262px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"></iframe>
+            </div>
+        </div>
+
     </main>
 
-<script src="../JS/app.js"></script>
 </body>
 </html>
diff --git a/docs/docs.css b/docs/docs.css
@@ -231,4 +231,16 @@ button#bfc-show {
 
 .navbar-container {
     width:auto;
+}
+
+.grid-item {
+    padding: 1rem 2rem;
+    text-align: center;
+    background-color: #333333;
+    color: white;
+    margin: 1rem;
+}
+
+.grid-show-container {
+    width: auto;
 }