From 4e3e49768f9c2dbd81f4f70c9310ed1e231f1801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Sacrist=C3=A1n?= Date: Thu, 19 Oct 2017 21:39:31 +0200 Subject: [PATCH] kss - Multipurpose blocks --- .../item-multipurpose-blocks-activity.html | 8 + .../item-multipurpose-blocks-clients.html | 11 ++ .../item-multipurpose-blocks-features.html | 8 + ...m-multipurpose-blocks-gallery-overlay.html | 2 +- .../item-multipurpose-blocks-gallery.html | 8 + .../item-multipurpose-blocks-metrics.html | 8 + .../item-multipurpose-blocks-plans.html | 8 + .../item-multipurpose-blocks-reasons.html | 8 + .../item-multipurpose-blocks-specs.html | 84 +++++---- .../item-multipurpose-blocks-steps.html | 8 + doc/styleguide/item-multipurpose-blocks.html | 14 ++ .../section-multipurpose-blocks.html | 167 ++++++++++++++---- src/scss/modules/_flexblock-activity.scss | 3 + src/scss/modules/_flexblock-clients.scss | 4 + src/scss/modules/_flexblock-features.scss | 3 + src/scss/modules/_flexblock-gallery.scss | 3 + src/scss/modules/_flexblock-metrics.scss | 3 + src/scss/modules/_flexblock-plans.scss | 3 + src/scss/modules/_flexblock-reasons.scss | 3 + src/scss/modules/_flexblock-specs.scss | 41 +++-- src/scss/modules/_flexblock-steps.scss | 3 + src/scss/modules/_flexblock.scss | 5 + 22 files changed, 308 insertions(+), 97 deletions(-) diff --git a/doc/styleguide/item-multipurpose-blocks-activity.html b/doc/styleguide/item-multipurpose-blocks-activity.html index 3dfa29d..8f376aa 100644 --- a/doc/styleguide/item-multipurpose-blocks-activity.html +++ b/doc/styleguide/item-multipurpose-blocks-activity.html @@ -91,6 +91,14 @@ +
+ Demos +
+
diff --git a/doc/styleguide/item-multipurpose-blocks-clients.html b/doc/styleguide/item-multipurpose-blocks-clients.html index 6ef1124..c3a8128 100644 --- a/doc/styleguide/item-multipurpose-blocks-clients.html +++ b/doc/styleguide/item-multipurpose-blocks-clients.html @@ -91,6 +91,17 @@
+
+ Demos +
+
diff --git a/doc/styleguide/item-multipurpose-blocks-features.html b/doc/styleguide/item-multipurpose-blocks-features.html index 48a4cde..5edb0f2 100644 --- a/doc/styleguide/item-multipurpose-blocks-features.html +++ b/doc/styleguide/item-multipurpose-blocks-features.html @@ -91,6 +91,14 @@
+
+ Demos +
+
diff --git a/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html b/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html index 443873e..3a121b9 100644 --- a/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html +++ b/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html @@ -169,7 +169,7 @@
- Source: modules/_flexblock-gallery.scss, line 44 + Source: modules/_flexblock-gallery.scss, line 47
diff --git a/doc/styleguide/item-multipurpose-blocks-gallery.html b/doc/styleguide/item-multipurpose-blocks-gallery.html index 39b9a1a..dd898aa 100644 --- a/doc/styleguide/item-multipurpose-blocks-gallery.html +++ b/doc/styleguide/item-multipurpose-blocks-gallery.html @@ -91,6 +91,14 @@
+
+ Demos +
+
diff --git a/doc/styleguide/item-multipurpose-blocks-metrics.html b/doc/styleguide/item-multipurpose-blocks-metrics.html index 5d306f6..e68ccb3 100644 --- a/doc/styleguide/item-multipurpose-blocks-metrics.html +++ b/doc/styleguide/item-multipurpose-blocks-metrics.html @@ -91,6 +91,14 @@
+
+ Demos +
+
diff --git a/doc/styleguide/item-multipurpose-blocks-plans.html b/doc/styleguide/item-multipurpose-blocks-plans.html index 6355c4b..bc45b31 100644 --- a/doc/styleguide/item-multipurpose-blocks-plans.html +++ b/doc/styleguide/item-multipurpose-blocks-plans.html @@ -91,6 +91,14 @@
+
+ Demos +
+
diff --git a/doc/styleguide/item-multipurpose-blocks-reasons.html b/doc/styleguide/item-multipurpose-blocks-reasons.html index 1a199b2..1847c40 100644 --- a/doc/styleguide/item-multipurpose-blocks-reasons.html +++ b/doc/styleguide/item-multipurpose-blocks-reasons.html @@ -91,6 +91,14 @@
+
+ Demos +
+
diff --git a/doc/styleguide/item-multipurpose-blocks-specs.html b/doc/styleguide/item-multipurpose-blocks-specs.html index cf9e3bc..67e3527 100644 --- a/doc/styleguide/item-multipurpose-blocks-specs.html +++ b/doc/styleguide/item-multipurpose-blocks-specs.html @@ -91,6 +91,14 @@
+
+ Demos +
+
@@ -100,25 +108,25 @@
    -
  • -
    -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
+
  • +
    +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
    @@ -129,25 +137,25 @@ Markup 
    <ul class="flexblock specs">
-    <li>
-      <div>
-        <h2>Ultra-Fast WiFi</h2>
-        Simple and secure file sharing.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>All day battery life</h2>
-        Your battery worries may be over.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>Lifetime Warranty </h2>
-        We'll fix it or if we can't, we'll replace it.
-      </div>
-    </li>
-    </ul>
    + <li> + <div> + <h2>Ultra-Fast WiFi</h2> + Simple and secure file sharing. + </div> + </li> + <li> + <div> + <h2>All day battery life</h2> + Your battery worries may be over. + </div> + </li> + <li> + <div> + <h2>Lifetime Warranty </h2> + We'll fix it or if we can't, we'll replace it. + </div> + </li> +</ul>
    diff --git a/doc/styleguide/item-multipurpose-blocks-steps.html b/doc/styleguide/item-multipurpose-blocks-steps.html index e3eea0b..48b769f 100644 --- a/doc/styleguide/item-multipurpose-blocks-steps.html +++ b/doc/styleguide/item-multipurpose-blocks-steps.html @@ -91,6 +91,14 @@
    +
    + Demos +
    +
    diff --git a/doc/styleguide/item-multipurpose-blocks.html b/doc/styleguide/item-multipurpose-blocks.html index 428bb22..a4764f8 100644 --- a/doc/styleguide/item-multipurpose-blocks.html +++ b/doc/styleguide/item-multipurpose-blocks.html @@ -143,6 +143,20 @@
    +
    + Demos +
    +
    diff --git a/doc/styleguide/section-multipurpose-blocks.html b/doc/styleguide/section-multipurpose-blocks.html index 463a790..a7f0e5f 100644 --- a/doc/styleguide/section-multipurpose-blocks.html +++ b/doc/styleguide/section-multipurpose-blocks.html @@ -143,6 +143,20 @@
    +
    + Demos +
    +
    @@ -292,6 +306,14 @@
    +
    + Demos +
    +
    @@ -418,6 +440,17 @@
    +
    + Demos +
    +
    @@ -542,6 +575,14 @@
    +
    + Demos +
    +
    @@ -663,6 +704,14 @@
    +
    + Demos +
    +
    @@ -851,7 +900,7 @@
    - Source: modules/_flexblock-gallery.scss, line 44 + Source: modules/_flexblock-gallery.scss, line 47
    @@ -871,6 +920,14 @@
    +
    + Demos +
    +
    @@ -974,6 +1031,14 @@
    +
    + Demos +
    +
    @@ -1122,6 +1187,14 @@
    +
    + Demos +
    +
    @@ -1182,6 +1255,14 @@
    +
    + Demos +
    +
    @@ -1191,25 +1272,25 @@
      -
    • -
      -

      Ultra-Fast WiFi

      - Simple and secure file sharing. -
      -
      • -
    • -
      -

      All day battery life

      - Your battery worries may be over. -
      -
      • -
    • -
      -

      Lifetime Warranty

      - We'll fix it or if we can't, we'll replace it. -
      -
      • -
    +
  • +
    +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
    @@ -1220,25 +1301,25 @@ Markup 
    <ul class="flexblock specs">
-    <li>
-      <div>
-        <h2>Ultra-Fast WiFi</h2>
-        Simple and secure file sharing.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>All day battery life</h2>
-        Your battery worries may be over.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>Lifetime Warranty </h2>
-        We'll fix it or if we can't, we'll replace it.
-      </div>
-    </li>
-    </ul>
    + <li> + <div> + <h2>Ultra-Fast WiFi</h2> + Simple and secure file sharing. + </div> + </li> + <li> + <div> + <h2>All day battery life</h2> + Your battery worries may be over. + </div> + </li> + <li> + <div> + <h2>Lifetime Warranty </h2> + We'll fix it or if we can't, we'll replace it. + </div> + </li> +</ul>
    @@ -1262,6 +1343,14 @@
    +
    + Demos +
    +
    diff --git a/src/scss/modules/_flexblock-activity.scss b/src/scss/modules/_flexblock-activity.scss index 27b3512..528d5ef 100644 --- a/src/scss/modules/_flexblock-activity.scss +++ b/src/scss/modules/_flexblock-activity.scss @@ -47,6 +47,9 @@ // // // +// Demos: +// [CVs](https://webslides.tv/demos/components#slide=43) +// // Styleguide Multipurpose blocks.Activity .flexblock.activity { flex-direction: column; diff --git a/src/scss/modules/_flexblock-clients.scss b/src/scss/modules/_flexblock-clients.scss index e87806b..a01f2d1 100644 --- a/src/scss/modules/_flexblock-clients.scss +++ b/src/scss/modules/_flexblock-clients.scss @@ -28,6 +28,10 @@ // // // +// Demos: +// [Clients](https://webslides.tv/demos/components#slide=37) +// [With border](https://webslides.tv/demos/components#slide=38) +// // .border - with border // // Styleguide Multipurpose blocks.Clients diff --git a/src/scss/modules/_flexblock-features.scss b/src/scss/modules/_flexblock-features.scss index 8d2c94e..fdd59f3 100644 --- a/src/scss/modules/_flexblock-features.scss +++ b/src/scss/modules/_flexblock-features.scss @@ -27,6 +27,9 @@ // // // +// Demos: +// [Features](https://webslides.tv/demos/components#slide=40) +// // .border - with border // // Styleguide Multipurpose blocks.Features diff --git a/src/scss/modules/_flexblock-gallery.scss b/src/scss/modules/_flexblock-gallery.scss index a29b8c6..4b38ee7 100644 --- a/src/scss/modules/_flexblock-gallery.scss +++ b/src/scss/modules/_flexblock-gallery.scss @@ -39,6 +39,9 @@ // // // +// Demos: +// [Portfolio](https://webslides.tv/demos/components#slide=44) +// // Styleguide Multipurpose blocks.Gallery // Gallery + Overflow diff --git a/src/scss/modules/_flexblock-metrics.scss b/src/scss/modules/_flexblock-metrics.scss index 3146ade..20b6f6a 100644 --- a/src/scss/modules/_flexblock-metrics.scss +++ b/src/scss/modules/_flexblock-metrics.scss @@ -21,6 +21,9 @@ // // // +// Demos: +// [Metrics](https://webslides.tv/demos/components#slide=47) +// // .border - with border // // Styleguide Multipurpose blocks.Metrics diff --git a/src/scss/modules/_flexblock-plans.scss b/src/scss/modules/_flexblock-plans.scss index db4480e..179e831 100644 --- a/src/scss/modules/_flexblock-plans.scss +++ b/src/scss/modules/_flexblock-plans.scss @@ -36,6 +36,9 @@ // // // +// Demos: +// [Plans](https://webslides.tv/demos/components#slide=48) +// // .blink - block linkable // // Styleguide Multipurpose blocks.Plans diff --git a/src/scss/modules/_flexblock-reasons.scss b/src/scss/modules/_flexblock-reasons.scss index 2f077ce..1c6f57a 100644 --- a/src/scss/modules/_flexblock-reasons.scss +++ b/src/scss/modules/_flexblock-reasons.scss @@ -14,6 +14,9 @@ // // // +// Demos: +// [Reasons](https://webslides.tv/demos/classes#slide=55) +// // Styleguide Multipurpose blocks.Reasons .flexblock.reasons { li { diff --git a/src/scss/modules/_flexblock-specs.scss b/src/scss/modules/_flexblock-specs.scss index 4944748..f9bb761 100644 --- a/src/scss/modules/_flexblock-specs.scss +++ b/src/scss/modules/_flexblock-specs.scss @@ -4,25 +4,28 @@ // // Markup: //
      -//
    • -//
      -//

      Ultra-Fast WiFi

      -// Simple and secure file sharing. -//
      -//
      • -//
    • -//
      -//

      All day battery life

      -// Your battery worries may be over. -//
      -//
      • -//
    • -//
      -//

      Lifetime Warranty

      -// We'll fix it or if we can't, we'll replace it. -//
      -//
      • -//
    +//
  • +//
    +//

    Ultra-Fast WiFi

    +// Simple and secure file sharing. +//
    +//
    • +//
  • +//
    +//

    All day battery life

    +// Your battery worries may be over. +//
    +//
    • +//
  • +//
    +//

    Lifetime Warranty

    +// We'll fix it or if we can't, we'll replace it. +//
    +//
    • +// +// +// Demos: +// [Specs](https://webslides.tv/demos/classes#slide=37) // // Styleguide Multipurpose blocks.Specs diff --git a/src/scss/modules/_flexblock-steps.scss b/src/scss/modules/_flexblock-steps.scss index ef831e8..9cb2136 100644 --- a/src/scss/modules/_flexblock-steps.scss +++ b/src/scss/modules/_flexblock-steps.scss @@ -30,6 +30,9 @@ // // // +// Demos: +// [Steps](https://webslides.tv/demos/components#slide=39) +// // Styleguide Multipurpose blocks.Steps .steps li { width: 100%; diff --git a/src/scss/modules/_flexblock.scss b/src/scss/modules/_flexblock.scss index 8da7513..5db3dcc 100644 --- a/src/scss/modules/_flexblock.scss +++ b/src/scss/modules/_flexblock.scss @@ -26,6 +26,11 @@ // // // +// Demos: +// [Normal](https://webslides.tv/demos/components#slide=27) +// [Block link](https://webslides.tv/demos/components#slide=34) +// [Border](https://webslides.tv/demos/components#slide=29) +// // .blink - Linkable block // .border - With border //