Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ADDED: Utility: Grid: Grid will allow to create complex grid layout using the CSS classes: 'row, col-(sm/md/lg)-1/12'. #101

Merged
merged 3 commits into from
Feb 14, 2023
+167 −4
Merged

ADDED: Utility: Grid: Grid will allow to create complex grid layout using the CSS classes: 'row, col-(sm/md/lg)-1/12'. #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32842e9
ADDED: Utility: Grid: Grid will allow to create complex grid layout u…
SagnikGanguly96 Feb 14, 2023
711c33c
UPDATED: package.json
SagnikGanguly96 Feb 14, 2023
14f29b5
UPDATED: Build config
SagnikGanguly96 Feb 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/config.js
View file
Open in desktop

Large diffs are not rendered by default.

160 changes: 160 additions & 0 deletions demos/grids.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 2 additions & 1 deletion demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
4 changes: 3 additions & 1 deletion src/css/utilities/autogrid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down