From 369c8b0008c128891ced32c7cd19a3e0ea33684b Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 10:59:30 +0400 Subject: [PATCH 01/19] Create default mixin --- src/scss/_base.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scss/_base.scss b/src/scss/_base.scss index a70383b..d9a2fa0 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -8,6 +8,12 @@ $breakpoints: ( ) !default; // ********** MAIN MIXINS ********** +@mixin default($class, $property, $value) { + .#{$class} { + #{$property}: #{$value}; + } +} + @mixin global($class, $property, $value) { .#{$class}, .#{$class}-all > * { From e307538db0c4241efb3e13968dd4966f99b851a7 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:00:05 +0400 Subject: [PATCH 02/19] Switch to default @include --- src/scss/_anima.scss | 4 ++-- src/scss/_base.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/_anima.scss b/src/scss/_anima.scss index 4ab95d4..6a7d1aa 100644 --- a/src/scss/_anima.scss +++ b/src/scss/_anima.scss @@ -115,10 +115,10 @@ $animation-direction: ( /********** ANIMATION OPTIONS **********/ @each $type, $option in $animation-options { @each $key, $value in $option { - @include anima($key, "animation-#{$type}", "var(--animation-#{$type}-#{$key})"); + @include default("anima-#{$key}", "animation-#{$type}", "var(--animation-#{$type}-#{$key})"); } } @each $key, $value in $animation-direction { - @include anima($key, "animation-direction", $value); + @include default("anima-#{$key}", "animation-direction", $value); } diff --git a/src/scss/_base.scss b/src/scss/_base.scss index d9a2fa0..529f82e 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -139,7 +139,7 @@ $text-align: ( ) !default; @each $key, $value in $text-align { - @include global("#{$key}", "text-align", $value); + @include default("#{$key}", "text-align", $value); } /********** TEXT TRANSFORM **********/ From 8145d15d5bc395ad35f51b9d69a718b5add1d53a Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:00:22 +0400 Subject: [PATCH 03/19] Remove useless anima mixin --- src/scss/_anima.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/scss/_anima.scss b/src/scss/_anima.scss index 6a7d1aa..e6fd4c5 100644 --- a/src/scss/_anima.scss +++ b/src/scss/_anima.scss @@ -100,13 +100,6 @@ $animation-direction: ( animation-duration: var(--animation-duration); } -// ********** OPTIONS MIXIN ********** -@mixin anima($class, $property, $value) { - .anima-#{$class} { - #{$property}: #{$value}; - } -} - /********** ANIMATION NAME **********/ @each $key, $value in $transforms { @include states("anima-#{$key}", "animation-name", $key); From 9db4d62d630c36193cca284f822f57c902c3bab7 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:00:36 +0400 Subject: [PATCH 04/19] Remove useless deco-none --- src/scss/_base.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 529f82e..bc74abf 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -155,7 +155,6 @@ $trans: ( /********** TEXT DECORATION LINE **********/ $text-decoration-line: ( - "none": none, "over": overline, "through": line-through ) !default; From 1f2a725d15cfcbb91f8c75d5676c9d809a2041a3 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:02:02 +0400 Subject: [PATCH 05/19] Add class infos to index --- src/index.html | 119 ++++++++++++++++++++++++------------------------- 1 file changed, 59 insertions(+), 60 deletions(-) diff --git a/src/index.html b/src/index.html index aa8a572..e586c23 100644 --- a/src/index.html +++ b/src/index.html @@ -30,25 +30,25 @@

Colors

Hues

-
    -
  • Red
    • -
  • Orange
    • -
  • Yellow
    • -
  • Green
    • -
  • Sky
    • -
  • Blue
    • -
  • Violet
    • -
  • Pink
    • +
      +
    • Red : class="red"
      • +
    • Orange : class="orange"
      • +
    • Yellow : class="yellow"
      • +
    • Green : class="green"
      • +
    • Sky : class="sky"
      • +
    • Blue : class="blue"
      • +
    • Violet : class="violet"
      • +
    • Pink : class="pink"

Grayscale

-
    -
  • Black
    • -
  • Gray
    • -
  • Silver
    • -
  • White
    • +
      +
    • Black : class="black"
      • +
    • Gray : class="gray"
      • +
    • Silver : class="silver"
      • +
    • White : class="white"
@@ -58,25 +58,25 @@

Background Colors

Hues

-
    -
  • Red
    • -
  • Orange
    • -
  • Yellow
    • -
  • Green
    • -
  • Sky
    • -
  • Blue
    • -
  • Violet
    • -
  • Pink
    • +
      +
    • Red : class="bg-red"
      • +
    • Orange : class="bg-orange"
      • +
    • Yellow : class="bg-yellow"
      • +
    • Green : class="bg-green"
      • +
    • Sky : class="bg-sky"
      • +
    • Blue : class="bg-blue"
      • +
    • Violet : class="bg-violet"
      • +
    • Pink : class="bg-pink"

Grayscale

-
    -
  • Black
    • -
  • Gray
    • -
  • Silver
    • -
  • White
    • +
      +
    • Black : class="bg-black"
      • +
    • Gray : class="bg-gray"
      • +
    • Silver : class="bg-silver"
      • +
    • White : class="bg-white"
@@ -87,19 +87,19 @@

Fonts

Font Families

    -
  • Times, Serif
    • -
  • Helvetica, Sans-Serif
    • -
  • Courier, Monospace
    • -
  • Mistral, Cursive
    • -
  • Impact, Fantasy
    • +
  • Times, Serif : class="serif"
    • +
  • Helvetica, Sans-Serif : class="sans-serif"
    • +
  • Courier, Monospace : class="monospace"
    • +
  • Mistral, Cursive : class="cursive"
    • +
  • Impact, Fantasy : class="fantasy"

Fonts

    -
  • Bold
    • -
  • Italic
    • +
  • Bold : class="bold"
    • +
  • Italic : class="italic"
@@ -109,55 +109,54 @@

Text

Text Align

-
    -
  • Center
    • -
  • Justify
    • -
  • Left
    • -
  • Right
    • +
      +
    • Center : class="center"
      • +
    • Justify : class="justify"
      • +
    • Left : class="left"
      • +
    • Right : class="right"

Text Transform

    -
  • Capitalize
    • -
  • Uppercase
    • -
  • Lowercase
    • +
  • Capitalize : class="cap"
    • +
  • Uppercase : class="up"
    • +
  • Lowercase : class="low"

Text Decoration Line

    -
  • None
    • -
  • Underline
    • -
  • Overline
    • -
  • Line-Through
    • +
  • Underline : class="deco"
    • +
  • Overline : class="deco-over"
    • +
  • Line-Through : class="deco-through"

Text Decoration Style

    -
  • Dashed
    • -
  • Dotted
    • -
  • Double
    • -
  • Solid
    • -
  • Wavy
    • +
  • Dashed : class="deco-dash"
    • +
  • Dotted : class="deco-dot"
    • +
  • Double : class="deco-double"
    • +
  • Solid : class="deco"
    • +
  • Wavy : class="deco-wavy"

Text Decoration Color

    -
  • Red
    • -
  • Orange
    • -
  • Yellow
    • -
  • Green
    • -
  • Sky
    • -
  • Blue
    • -
  • Violet
    • -
  • Pink
    • +
  • Red : class="deco-red"
    • +
  • Orange : class="deco-orange"
    • +
  • Yellow : class="deco-yellow"
    • +
  • Green : class="deco-green"
    • +
  • Sky : class="deco-sky"
    • +
  • Blue : class="deco-blue"
    • +
  • Violet : class="deco-violet"
    • +
  • Pink : class="deco-pink"
From 78430c41e513dd769c433d150ca71319b3c54887 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:02:40 +0400 Subject: [PATCH 06/19] Switch display to boxes to index --- src/index.html | 39 ++++++++++++--------------------------- 1 file changed, 12 insertions(+), 27 deletions(-) diff --git a/src/index.html b/src/index.html index e586c23..0ebe25c 100644 --- a/src/index.html +++ b/src/index.html @@ -162,36 +162,21 @@

Text Decoration Color

-

Display

+

Boxes

-

Flex

- -
- -
-

Grid

- -
+

Border Style

-
-

Gap

- -
- -
-

Place Content

- -
- -
-

Place Items

- -
- -
-

Place Self

- +
    +
  • Dashed : class="bg-red"
    • +
  • Dotted : class="bg-orange"
    • +
  • Solid : class="bg-yellow"
    • +
  • Double : class="bg-green"
    • +
  • Groove : class="bg-sky"
    • +
  • Ridge : class="bg-blue"
    • +
  • Inset : class="bg-violet"
    • +
  • Outset : class="bg-pink"
    • +
From ef2a8e8979151816f65654063847b0f2f543c3b3 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:02:52 +0400 Subject: [PATCH 07/19] Add container to index --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 0ebe25c..0d66a0b 100644 --- a/src/index.html +++ b/src/index.html @@ -22,7 +22,7 @@ - +

Animadio Lab

From bc234561c5f3a68a72933234d67ecbae1c11d1b6 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:12:58 +0400 Subject: [PATCH 08/19] Change radius values --- src/scss/_boxes.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index aa0a660..e5bb878 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -115,8 +115,8 @@ $border-width: ( ) !default; $border-radius: ( - "curve": 20px, - "round": 50px, + "curve": 10px, + "round": 20px, "circle": 50% ) !default; From 753e28481ae84f61ae76bc83fa2c6b39a23f8640 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:13:19 +0400 Subject: [PATCH 09/19] Add all other border examples --- src/index.html | 57 ++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index 0d66a0b..6396090 100644 --- a/src/index.html +++ b/src/index.html @@ -165,17 +165,52 @@

Text Decoration Color

Boxes

-

Border Style

- -
    -
  • Dashed : class="bg-red"
    • -
  • Dotted : class="bg-orange"
    • -
  • Solid : class="bg-yellow"
    • -
  • Double : class="bg-green"
    • -
  • Groove : class="bg-sky"
    • -
  • Ridge : class="bg-blue"
    • -
  • Inset : class="bg-violet"
    • -
  • Outset : class="bg-pink"
    • +

    Border Style

    + +
      +
    • Dashed : class="bord-dash"
      • +
    • Dotted : class="bord-dot"
      • +
    • Solid : class="bord"
      • +
    • Double : class="bord-double"
      • +
    • Groove : class="bord-groove"
      • +
    • Ridge : class="bord-ridge"
      • +
    • Inset : class="bord-in"
      • +
    • Outset : class="bord-out"
      • +
    +
+ +
+

Border Width

+ +
    +
  • Small : class="bord-sm"
    • +
  • Medium : class="bord-md"
    • +
  • Large : class="bord-lg"
    • +
+
+ +
+

Border Color

+ +
    +
  • Red : class="bord-red"
    • +
  • Orange : class="bord-orange"
    • +
  • Yellow : class="bord-yellow"
    • +
  • Green : class="bord-green"
    • +
  • Sky : class="bord-sky"
    • +
  • Blue : class="bord-blue"
    • +
  • Violet : class="bord-violet"
    • +
  • Pink : class="bord-pink"
    • +
+
+ +
+

Border Radius

+ +
    +
  • Curve : class="bord-curve"
    • +
  • Round : class="bord-round"
    • +
  • Circle : class="bord-circle"
From f152ac0a2726483ec5f107a66af4a4bea91fe364 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:27:56 +0400 Subject: [PATCH 10/19] Remove margin sides & add more default values --- src/scss/_boxes.scss | 27 +++++++-------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index e5bb878..63df009 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -60,27 +60,14 @@ $containers: ( } /********** MARGIN **********/ -$margin-sm: 5px !default; -$margin-md: 10px !default; -$margin-lg: 20px !default; - $margins: ( - "none": 0, - "sm": $margin-sm, - "md": $margin-md, - "lg": $margin-lg, - "top-sm": $margin-sm, - "top-md": $margin-md, - "top-lg": $margin-lg, - "right-sm": $margin-sm, - "right-md": $margin-md, - "right-lg": $margin-lg, - "bot-sm": $margin-sm, - "bot-md": $margin-md, - "bot-lg": $margin-lg, - "left-sm": $margin-sm, - "left-md": $margin-md, - "left-lg": $margin-lg + "none": 0, + "tn": 2px, + "sm": 5px, + "md": 10px, + "lg": 20px, + "xl": 50px, + "wd": 100px ) !default; [class*="mar-"] { From f74c0565bc270df2451d26f584583287a62e2f61 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:28:07 +0400 Subject: [PATCH 11/19] Remove padding sides & add more default values --- src/scss/_boxes.scss | 27 +++++++-------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index 63df009..1d0a9e1 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -138,27 +138,14 @@ $border-radius: ( } /********** PADDING **********/ -$padding-sm: 5px !default; -$padding-md: 10px !default; -$padding-lg: 20px !default; - $paddings: ( - "none": 0, - "sm": $padding-sm, - "md": $padding-md, - "lg": $padding-lg, - "top-sm": $padding-sm, - "top-md": $padding-md, - "top-lg": $padding-lg, - "right-sm": $padding-sm, - "right-md": $padding-md, - "right-lg": $padding-lg, - "bot-sm": $padding-sm, - "bot-md": $padding-md, - "bot-lg": $padding-lg, - "left-sm": $padding-sm, - "left-md": $padding-md, - "left-lg": $padding-lg + "none": 0, + "tn": 2px, + "sm": 5px, + "md": 10px, + "lg": 20px, + "xl": 50px, + "wd": 100px ) !default; [class*="pad-"] { From 6cae92b9e3bfce2d69d5debeb8d664dee24a2a96 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:28:57 +0400 Subject: [PATCH 12/19] Remove useless call for margin & update the main one --- src/scss/_boxes.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index 1d0a9e1..2822002 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -76,12 +76,8 @@ $margins: ( } } -@each $key, $value in $box-none { - @include global("mar-#{$key}", "margin#{$value}", "var(--margin-none)"); -} - -@each $key, $value in $box-size { - @include global("mar-#{$key}", "margin#{$value}", "var(--margin-#{$key})"); +@each $key, $value in $margins { + @include global("mar-#{$key}", "margin", "var(--margin-#{$key})"); } /********** BORDER **********/ From 804f24f6899d31a56b34933e2e51d66b9c0b075a Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:29:04 +0400 Subject: [PATCH 13/19] Remove useless call for padding & update the main one --- src/scss/_boxes.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index 2822002..06acd76 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -150,12 +150,8 @@ $paddings: ( } } -@each $key, $value in $box-none { - @include global("pad-#{$key}", "padding#{$value}", "var(--padding-none)"); -} - -@each $key, $value in $box-size { - @include global("pad-#{$key}", "padding#{$value}", "var(--padding-#{$key})"); +@each $key, $value in $paddings { + @include global("pad-#{$key}", "padding", "var(--padding-#{$key})"); } /********** HEIGHT **********/ From edeaad1edaabb1067c6053a25ecae17e9ffc8677 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:29:17 +0400 Subject: [PATCH 14/19] Remove useless boxes maps --- src/scss/_boxes.scss | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index 06acd76..2d941b1 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -1,30 +1,3 @@ -// ********** BOXES ********** -$box-none: ( - "none": "", - "top-none": "-top", - "right-none": "-right", - "bottom-none": "-bottom", - "left-none": "-left", -) !default; - -$box-size: ( - "sm": "", - "md": "", - "lg": "", - "top-sm": "-top", - "top-md": "-top", - "top-lg": "-top", - "right-sm": "-right", - "right-md": "-right", - "right-lg": "-right", - "bot-sm": "-bottom", - "bot-md": "-bottom", - "bot-lg": "-bottom", - "left-sm": "-left", - "left-md": "-left", - "left-lg": "-left" -) !default; - /********** CONTAINER **********/ $containers: ( "50": 50%, From aecf1c2d267a77ebc8c4c02cb39ed9b390c04a57 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Thu, 8 Dec 2022 11:29:53 +0400 Subject: [PATCH 15/19] Fix title for fonts to index --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 6396090..f052e04 100644 --- a/src/index.html +++ b/src/index.html @@ -96,7 +96,7 @@

Font Families

-

Fonts

+

Font Style & Weight

  • Bold : class="bold"
  • Italic : class="italic"
    • From b41e80a0436f93eb28a7836a914367be24f62427 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Fri, 9 Dec 2022 12:28:13 +0400 Subject: [PATCH 16/19] Switch bord & deco simple calls to .bord & .deco --- src/scss/_base.scss | 2 +- src/scss/_boxes.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/scss/_base.scss b/src/scss/_base.scss index bc74abf..79d0c44 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -159,7 +159,7 @@ $text-decoration-line: ( "through": line-through ) !default; -[class*="deco"] { +.deco { text-decoration-line: underline; } diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index 2d941b1..7a478b2 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -83,6 +83,9 @@ $border-radius: ( @each $key, $value in $border-radius { --border-radius-#{$key}: #{$value}; } +} + +.bord { border-style: solid; } From 7a0e3cf69bab21a4ff06b9238f2e775573a6f5e4 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Fri, 9 Dec 2022 12:28:38 +0400 Subject: [PATCH 17/19] Add overflow-wrap to tags --- src/scss/_tags.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/scss/_tags.scss b/src/scss/_tags.scss index 22d6873..971af74 100644 --- a/src/scss/_tags.scss +++ b/src/scss/_tags.scss @@ -26,6 +26,7 @@ body { --body-line-height: 1.6; --body-margin: auto; --body-max-width: 2000px; + --body-overflow: break-word; --body-padding: 0; margin: var(--body-margin); padding: var(--body-padding); @@ -33,6 +34,7 @@ body { line-height: var(--body-line-height); font-size: var(--body-font-size); font-family: var(--sans-serif); + overflow-wrap: var(--body-overflow); } main { From 0144932180512f361b597d228fda4822c0e0f16b Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Fri, 9 Dec 2022 12:29:20 +0400 Subject: [PATCH 18/19] Switch gap number & size to prevent errors with grid --- src/scss/_display.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/_display.scss b/src/scss/_display.scss index 325077a..282c85c 100644 --- a/src/scss/_display.scss +++ b/src/scss/_display.scss @@ -91,7 +91,7 @@ $gap: ( } @mixin gap($size, $type) { - [class*="gap-"][class*="-#{$size}#{$type}"] { + [class*="gap-"][class*="-#{$type}#{$size}"] { gap: var(--gap#{$size}); } } From 376ff42754ca22763cfc3da49cb95ad319ead19b Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Fri, 9 Dec 2022 12:30:03 +0400 Subject: [PATCH 19/19] Update index with new naming for gap, bord & deco --- src/index.html | 64 +++++++++++++++++++++++++------------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/index.html b/src/index.html index f052e04..c7bb262 100644 --- a/src/index.html +++ b/src/index.html @@ -30,7 +30,7 @@

    Colors

    Hues

    -
      +
      • Red : class="red"
      • Orange : class="orange"
      • Yellow : class="yellow"
        • @@ -44,7 +44,7 @@

        Hues

        Grayscale

        -
          +
          • Black : class="black"
          • Gray : class="gray"
          • Silver : class="silver"
            • @@ -58,7 +58,7 @@

            Background Colors

            Hues

            -
              +
              • Red : class="bg-red"
              • Orange : class="bg-orange"
              • Yellow : class="bg-yellow"
                • @@ -72,7 +72,7 @@

                Hues

                Grayscale

                -
                  +
                  • Black : class="bg-black"
                  • Gray : class="bg-gray"
                  • Silver : class="bg-silver"
                    • @@ -109,7 +109,7 @@

                    Text

                    Text Align

                    -
                      +
                      • Center : class="center"
                      • Justify : class="justify"
                      • Left : class="left"
                        • @@ -138,25 +138,25 @@

                        Text Decoration Line

                        Text Decoration Style

                          -
                        • Dashed : class="deco-dash"
                          • -
                        • Dotted : class="deco-dot"
                          • -
                        • Double : class="deco-double"
                          • +
                        • Dashed : class="deco deco-dash"
                          • +
                        • Dotted : class="deco deco-dot"
                          • +
                        • Double : class="deco deco-double"
                        • Solid : class="deco"
                          • -
                        • Wavy : class="deco-wavy"
                          • +
                        • Wavy : class="deco deco-wavy"

                        Text Decoration Color

                          -
                        • Red : class="deco-red"
                          • -
                        • Orange : class="deco-orange"
                          • -
                        • Yellow : class="deco-yellow"
                          • -
                        • Green : class="deco-green"
                          • -
                        • Sky : class="deco-sky"
                          • -
                        • Blue : class="deco-blue"
                          • -
                        • Violet : class="deco-violet"
                          • -
                        • Pink : class="deco-pink"
                          • +
                        • Red : class="deco deco-red"
                          • +
                        • Orange : class="deco deco-orange"
                          • +
                        • Yellow : class="deco deco-yellow"
                          • +
                        • Green : class="deco deco-green"
                          • +
                        • Sky : class="deco deco-sky"
                          • +
                        • Blue : class="deco deco-blue"
                          • +
                        • Violet : class="deco deco-violet"
                          • +
                        • Pink : class="deco deco-pink"
                    @@ -167,7 +167,7 @@

                    Boxes

                    Border Style

                    -
                      +
                      • Dashed : class="bord-dash"
                      • Dotted : class="bord-dot"
                      • Solid : class="bord"
                        • @@ -182,32 +182,32 @@

                        Border Style

                        Border Width

                        -
                          -
                        • Small : class="bord-sm"
                          • -
                        • Medium : class="bord-md"
                          • -
                        • Large : class="bord-lg"
                          • +
                            +
                          • Small : class="bord bord-sm"
                            • +
                          • Medium : class="bord bord-md"
                            • +
                          • Large : class="bord bord-lg"

                        Border Color

                        -
                          -
                        • Red : class="bord-red"
                          • -
                        • Orange : class="bord-orange"
                          • -
                        • Yellow : class="bord-yellow"
                          • -
                        • Green : class="bord-green"
                          • -
                        • Sky : class="bord-sky"
                          • -
                        • Blue : class="bord-blue"
                          • -
                        • Violet : class="bord-violet"
                          • -
                        • Pink : class="bord-pink"
                          • +
                            +
                          • Red : class="bord bord-red"
                            • +
                          • Orange : class="bord bord-orange"
                            • +
                          • Yellow : class="bord bord-yellow"
                            • +
                          • Green : class="bord bord-green"
                            • +
                          • Sky : class="bord bord-sky"
                            • +
                          • Blue : class="bord bord-blue"
                            • +
                          • Violet : class="bord bord-violet"
                            • +
                          • Pink : class="bord bord-pink"

                        Border Radius

                        -
                          +
                          • Curve : class="bord-curve"
                          • Round : class="bord-round"
                          • Circle : class="bord-circle"