From 78c930baa579af9dea1b0a4f44b1d5caefdc7acc Mon Sep 17 00:00:00 2001 From: deoostfrees <68224180+deoostfrees@users.noreply.github.com> Date: Thu, 20 Jul 2023 10:57:59 +0200 Subject: [PATCH] [TASK] Optimize demo --- demo.html | 578 ++++++++++++++++++++++++++---------------------------- 1 file changed, 281 insertions(+), 297 deletions(-) diff --git a/demo.html b/demo.html index 21820cb..e402f61 100644 --- a/demo.html +++ b/demo.html @@ -139,10 +139,9 @@

.container

-    <div class="container">
+<div class="container">
 
-    </div>
-
+</div>

If needed, you can also use .container--small for a smaller width:

@@ -151,22 +150,20 @@

.container

-    <div class="container container--small">
+<div class="container container--small">
 
-    </div>
-
+</div>

.flex

.flex is the wrapper for columns.

-    <div class="container">
-      <div class="flex">
+<div class="container">
+  <div class="flex">
 
-      </div>
-    </div>
-
+ </div> +</div>

.flex__

@@ -184,15 +181,14 @@

.flex__

-    <div class="flex">
-      <div class="flex__2"></div>
-      <div class="flex__10"></div>
-      <div class="flex__8"></div>
-      <div class="flex__4"></div>
-      <div class="flex__7"></div>
-      <div class="flex__5"></div>
-    </div>
-
+<div class="flex"> + <div class="flex__2"></div> + <div class="flex__10"></div> + <div class="flex__8"></div> + <div class="flex__4"></div> + <div class="flex__7"></div> + <div class="flex__5"></div> +</div>

.flex__auto

@@ -209,14 +205,13 @@

.flex__auto

-    <div class="flex">
-      <div class="flex__6"></div>
-      <div class="flex__auto"></div>
-      <div class="flex__auto"></div>
-      <div class="flex__8"></div>
-      <div class="flex__auto"></div>
-    </div>
-
+<div class="flex"> + <div class="flex__6"></div> + <div class="flex__auto"></div> + <div class="flex__auto"></div> + <div class="flex__8"></div> + <div class="flex__auto"></div> +</div>

Nesting

@@ -236,17 +231,16 @@

Nesting

+<div class="flex">
+  <div class="flex__lg-4"></div>
+  <div class="flex__lg-8">
     <div class="flex">
-      <div class="flex__lg-4"></div>
-      <div class="flex__lg-8">
-        <div class="flex">
-          <div class="flex__6"></div>
-          <div class="flex__auto"></div>
-          <div class="flex__auto"></div>
-        </div>
-      </div>
+      <div class="flex__6"></div>
+      <div class="flex__auto"></div>
+      <div class="flex__auto"></div>
     </div>
-
+ </div> +</div>

Responsive Layouts

@@ -269,26 +263,14 @@

Responsive Layouts

-    <div class="flex">
-      <div class="flex__md-6 flex__lg-3"></div>
-      <div class="flex__md-6 flex__lg-3"></div>
-      <div class="flex__md-6 flex__lg-3"></div>
-      <div class="flex__md-6 flex__lg-3"></div>
-    </div>
-
- -

These breakpoints can be customized/expanded using SCSS variables:

+<div class="flex"> + <div class="flex__md-6 flex__lg-3"></div> + <div class="flex__md-6 flex__lg-3"></div> + <div class="flex__md-6 flex__lg-3"></div> + <div class="flex__md-6 flex__lg-3"></div> +</div> - 
-    // Breakpoints map
-    // Based on 16px
-    $gibki-breakpoints: (
-      'sm': 31.25em, // 500px
-      'md': 43.75em, // 700px
-      'lg': 62.5em,  // 1000px
-      'xl': 75em     // 1200px
-    );
-
+

These breakpoints can be customized/expanded using Sass variables.

Wrapping

@@ -302,11 +284,10 @@

Wrapping

-    <div class="flex">
-      <div class="flex__6"></div>
-      <div class="flex__8"></div>
-    </div>
-
+<div class="flex"> + <div class="flex__6"></div> + <div class="flex__8"></div> +</div>

.flex--wrap-reverse

@@ -320,11 +301,10 @@

.flex--wrap-reverse

-    <div class="flex flex-wrap-reverse">
-      <div class="flex__6"></div>
-      <div class="flex__8"></div>
-    </div>
-
+<div class="flex flex-wrap-reverse"> + <div class="flex__6"></div> + <div class="flex__8"></div> +</div>

.flex--nowrap

@@ -338,24 +318,16 @@

.flex--nowrap

-    <div class="flex flex--nowrap">
-      <div class="flex__6"></div>
-      <div class="flex__8"></div>
-    </div>
-
+<div class="flex flex--nowrap"> + <div class="flex__6"></div> + <div class="flex__8"></div> +</div>

Gutters

-

The columns and rows have horizontal and vertical spacing. These can be customized using CSS Custom properties:

- - 
-      // Gutter width
-      // Based on 16px
-      --gibki-gutter-vertical: 1.5rem; // 24px
-      --gibki-gutter-horizontal: 1.5rem; // 24px
-
+

The columns and rows have horizontal and vertical spacing. These can be customized using CSS Custom properties.

-

You can remove the spacing with .flex--no-gutters.

+

You can remove the spacing with .flex--no-gutters.

flex flex--no-gutters
@@ -367,13 +339,12 @@

Gutters

-    <div class="flex flex--no-gutters">
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-    </div>
-
+<div class="flex flex--no-gutters"> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> +</div>

You can also only remove the horizontal gutters with .flex--no-horizontal-gutters.

@@ -387,13 +358,12 @@

Gutters

-    <div class="flex flex--no-horizontal-gutters">
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-    </div>
-
+<div class="flex flex--no-horizontal-gutters"> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> +</div>

Or you remove only the vertical gutters with .flex--no-vertical-gutters.

@@ -407,13 +377,12 @@

Gutters

-    <div class="flex flex--no-vertical-gutters">
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-      <div class="flex__md-6"></div>
-    </div>
-
+<div class="flex flex--no-vertical-gutters"> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> + <div class="flex__md-6"></div> +</div>

Directions

@@ -427,11 +396,10 @@

Directions

-    <div class="flex">
-      <div class="flex__4"></div>
-      <div class="flex__8"></div>
-    </div>
-
+<div class="flex"> + <div class="flex__4"></div> + <div class="flex__8"></div> +</div>

.flex--row-reverse

@@ -445,11 +413,10 @@

.flex--row-reverse

-    <div class="flex flex--row-reverse">
-      <div class="flex__4"></div>
-      <div class="flex__8"></div>
-    </div>
-
+<div class="flex flex--row-reverse"> + <div class="flex__4"></div> + <div class="flex__8"></div> +</div>

.flex--column

@@ -463,11 +430,10 @@

.flex--column

-    <div class="flex flex--column">
-      <div class="flex__4"></div>
-      <div class="flex__8"></div>
-    </div>
-
+<div class="flex flex--column"> + <div class="flex__4"></div> + <div class="flex__8"></div> +</div>

.flex--column-reverse

@@ -481,11 +447,10 @@

.flex--column-reverse

-    <div class="flex flex--column-reverse">
-      <div class="flex__4"></div>
-      <div class="flex__8"></div>
-    </div>
-
+<div class="flex flex--column-reverse"> + <div class="flex__4"></div> + <div class="flex__8"></div> +</div>

Horizontal Alignment

@@ -500,12 +465,11 @@

Horizontal Alignment

-    <div class="flex">
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-    </div>
-
+<div class="flex"> + <div class="flex__3"></div> + <div class="flex__3"></div> + <div class="flex__3"></div> +</div>

.flex--right

@@ -520,12 +484,11 @@

.flex--right

-    <div class="flex flex--right">
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-    </div>
-
+<div class="flex flex--right"> + <div class="flex__3"></div> + <div class="flex__3"></div> + <div class="flex__3"></div> +</div>

.flex--center

@@ -540,12 +503,11 @@

.flex--center

-    <div class="flex flex--center">
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-    </div>
-
+<div class="flex flex--center"> + <div class="flex__3"></div> + <div class="flex__3"></div> + <div class="flex__3"></div> +</div>

.flex--space-between

@@ -560,12 +522,11 @@

.flex--space-between

-    <div class="flex flex--space-between">
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-    </div>
-
+<div class="flex flex--space-between"> + <div class="flex__3"></div> + <div class="flex__3"></div> + <div class="flex__3"></div> +</div>

.flex--space-around

@@ -580,12 +541,11 @@

.flex--space-around

-    <div class="flex flex--space-around">
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-      <div class="flex__3"></div>
-    </div>
-
+<div class="flex flex--space-around"> + <div class="flex__3"></div> + <div class="flex__3"></div> + <div class="flex__3"></div> +</div>

Vertical Alignment

@@ -604,194 +564,218 @@

.flex--stretch

-    <div class="flex">
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+<div class="flex"> + <div class="flex__4"></div> + <div class="flex__4"></div> + <div class="flex__4"></div> +</div>

You can also apply .flex--stretch to individual columns if necessary.

-
flex flex--top -
-
flex--stretch
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
flex flex--top +
+
flex--stretch
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
-
- 
-    <div class="flex flex--top">
-      <div class="flex__4 flex--stretch"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+ 
+<div class="flex flex--top">
+  <div class="flex__4 flex--stretch"></div>
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+</div>
-

.flex--top

+

.flex--top

-

The columns are positioned at the top of the container.

+

The columns are positioned at the top of the container.

-
flex flex--top -
-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
flex flex--top +
+
Lorem ipsum dolor sit amet.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
-
- 
-    <div class="flex flex--top">
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+ 
+<div class="flex flex--top">
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+</div>
-

You can also apply .flex--top to individual columns.

+

You can also apply .flex--top to individual columns.

-
flex -
-
flex--top
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
flex +
+
flex--top
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
-
- 
-    <div class="flex">
-      <div class="flex__4 flex--top"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+ 
+<div class="flex">
+  <div class="flex__4 flex--top"></div>
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+</div>
-

.flex--bottom

+

.flex--bottom

-

The columns are positioned at the bottom of the container.

+

The columns are positioned at the bottom of the container.

-
flex flex--bottom -
-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
flex flex--bottom +
+
Lorem ipsum dolor sit amet.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
-
- 
-    <div class="flex flex--bottom">
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+ 
+<div class="flex flex--bottom">
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+</div>
-

You can also apply .flex--bottom to individual columns.

+

You can also apply .flex--bottom to individual columns.

-
flex -
-
flex--bottom
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
flex +
+
flex--bottom
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
-
- 
-    <div class="flex">
-      <div class="flex__4 flex--bottom"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+ 
+<div class="flex">
+  <div class="flex__4 flex--bottom"></div>
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+</div>
-

.flex--middle

+

.flex--middle

-

The columns are positioned at the vertical center of the container.

+

The columns are positioned at the vertical center of the container.

-
flex flex--middle -
-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
flex flex--middle +
+
Lorem ipsum dolor sit amet.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
-
- 
-    <div class="flex flex--middle">
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+ 
+<div class="flex flex--middle">
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+</div>
-

You can also apply .flex--middle to individual columns.

+

You can also apply .flex--middle to individual columns.

-
flex -
-
flex--middle
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
flex +
+
flex--middle
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+
-
- 
-    <div class="flex">
-      <div class="flex__4 flex--middle"></div>
-      <div class="flex__4"></div>
-      <div class="flex__4"></div>
-    </div>
-
+ 
+<div class="flex">
+  <div class="flex__4 flex--middle"></div>
+  <div class="flex__4"></div>
+  <div class="flex__4"></div>
+</div>
-

Reordering

+

Reordering

-

Use .flex--order- classes to control the visual order of your content.

+

Use .flex--order- classes to control the visual order of your content.

-
flex -
-
flex__6 flex--order-5
-
flex__6 flex--order-6 flex--order-lg-3
-
flex__6 flex--order-2
-
flex__6 flex--order-3 flex--order-lg-6
-
flex__6 flex--order-4
-
flex__6 flex--order-1
+
flex +
+
flex__6 flex--order-5
+
flex__6 flex--order-6 flex--order-lg-3
+
flex__6 flex--order-2
+
flex__6 flex--order-3 flex--order-lg-6
+
flex__6 flex--order-4
+
flex__6 flex--order-1
+
-
- 
-    <div class="flex">
-      <div class="flex__6 flex--order-5"></div>
-      <div class="flex__6 flex--order-6 flex--order-lg-3"></div>
-      <div class="flex__6 flex--order-2"></div>
-      <div class="flex__6 flex--order-3 flex--order-lg-6"></div>
-      <div class="flex__6 flex--order-4"></div>
-      <div class="flex__6 flex--order-1"></div>
-    </div>
-
+ 
+<div class="flex">
+  <div class="flex__6 flex--order-5"></div>
+  <div class="flex__6 flex--order-6 flex--order-lg-3"></div>
+  <div class="flex__6 flex--order-2"></div>
+  <div class="flex__6 flex--order-3 flex--order-lg-6"></div>
+  <div class="flex__6 flex--order-4"></div>
+  <div class="flex__6 flex--order-1"></div>
+</div>
-

Offsetting columns

+

Offsetting columns

-

Offset a column by adding .flex--offset- classes.

+

Offset a column by adding .flex--offset- classes.

-
flex -
-
flex__2
-
flex__8 flex--offset-2
-
flex__md-8 flex--offset-md-4
-
flex__6 flex__lg-4
-
flex__6 flex--offset-lg-2
+
flex +
+
flex__2
+
flex__8 flex--offset-2
+
flex__md-8 flex--offset-md-4
+
flex__6 flex__lg-4
+
flex__6 flex--offset-lg-2
+
-
- 
-    <div class="flex">
-      <div class="flex__2"></div>
-      <div class="flex__8 flex--offset-2"></div>
-      <div class="flex__md-8 flex--offset-md-4"></div>
-      <div class="flex__6 flex__lg-4"></div>
-      <div class="flex__6 flex--offset-lg-2"></div>
-    </div>
-
+ 
+<div class="flex">
+  <div class="flex__2"></div>
+  <div class="flex__8 flex--offset-2"></div>
+  <div class="flex__md-8 flex--offset-md-4"></div>
+  <div class="flex__6 flex__lg-4"></div>
+  <div class="flex__6 flex--offset-lg-2"></div>
+</div>
+ +

Variables

+ +

CSS custom properties

+ + 
+// Container max width
+// Based on 16px
+--gibki-container-max-width: 75rem; // 1200px
+--gibki-small-container-max-width: 38.25rem; // 612px
+
+// Container padding
+// Based on 16px
+--gibki-container-padding: 1.5rem; // 24px
+
+// Gutter width
+// Based on 16px
+--gibki-gutter-vertical: 1.5rem; // 24px
+--gibki-gutter-horizontal: 1.5rem; // 24px
+ +

Sass variables

+ + 
+// Breakpoints map
+// Based on 16px
+$gibki-breakpoints: (
+  'sm': 31.25em, // 500px
+  'md': 43.75em, // 700px
+  'lg': 62.5em,  // 1000px
+  'xl': 75em     // 1200px
+);
+
+// Available columns
+$gibki-columns: 12;