From 5aa42db66cfd2bc612e315aa8131af33833f5fb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Sacrist=C3=A1n?= Date: Tue, 15 Aug 2017 20:46:19 +0200 Subject: [PATCH] KSS - backgrounds, colors, ... --- doc/styleguide/index.html | 5 + .../item-base-backgrounds-gradient.html | 5 + .../item-base-backgrounds-transparent.html | 5 + doc/styleguide/item-base-backgrounds.html | 5 + doc/styleguide/item-base.html | 5 + doc/styleguide/item-layout-alignment.html | 5 + doc/styleguide/item-layout-radius.html | 5 + doc/styleguide/item-layout-shadow.html | 5 + doc/styleguide/item-layout-sizes.html | 5 + doc/styleguide/item-layout.html | 5 + .../item-slide-background-position.html | 276 +++++++++++++ .../item-slide-background-video.html | 141 +++++++ doc/styleguide/item-slide-background.html | 276 +++++++++++++ doc/styleguide/item-slide.html | 117 ++++++ doc/styleguide/section-base.html | 5 + doc/styleguide/section-layout.html | 5 + doc/styleguide/section-slide.html | 370 ++++++++++++++++++ src/scss/modules/_slides-bg.scss | 39 +- 18 files changed, 1275 insertions(+), 4 deletions(-) create mode 100644 doc/styleguide/item-slide-background-position.html create mode 100644 doc/styleguide/item-slide-background-video.html create mode 100644 doc/styleguide/item-slide-background.html create mode 100644 doc/styleguide/item-slide.html create mode 100644 doc/styleguide/section-slide.html diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html index d7082b6..34abe95 100644 --- a/doc/styleguide/index.html +++ b/doc/styleguide/index.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-base-backgrounds-gradient.html b/doc/styleguide/item-base-backgrounds-gradient.html index cc6adfc..6ccafe2 100644 --- a/doc/styleguide/item-base-backgrounds-gradient.html +++ b/doc/styleguide/item-base-backgrounds-gradient.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-base-backgrounds-transparent.html b/doc/styleguide/item-base-backgrounds-transparent.html index 0ce2da6..996c35c 100644 --- a/doc/styleguide/item-base-backgrounds-transparent.html +++ b/doc/styleguide/item-base-backgrounds-transparent.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-base-backgrounds.html b/doc/styleguide/item-base-backgrounds.html index 58c2ed2..59b9518 100644 --- a/doc/styleguide/item-base-backgrounds.html +++ b/doc/styleguide/item-base-backgrounds.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-base.html b/doc/styleguide/item-base.html index 0a93f39..47ad905 100644 --- a/doc/styleguide/item-base.html +++ b/doc/styleguide/item-base.html @@ -56,6 +56,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-layout-alignment.html index 5431f23..eb44311 100644 --- a/doc/styleguide/item-layout-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-layout-radius.html b/doc/styleguide/item-layout-radius.html index e26318c..966ca49 100644 --- a/doc/styleguide/item-layout-radius.html +++ b/doc/styleguide/item-layout-radius.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-layout-shadow.html b/doc/styleguide/item-layout-shadow.html index 4dcb602..43330fd 100644 --- a/doc/styleguide/item-layout-shadow.html +++ b/doc/styleguide/item-layout-shadow.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-layout-sizes.html index f4e1637..f1c56f6 100644 --- a/doc/styleguide/item-layout-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -36,6 +36,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html index 578c4bd..4e7f919 100644 --- a/doc/styleguide/item-layout.html +++ b/doc/styleguide/item-layout.html @@ -62,6 +62,11 @@ +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/item-slide-background-position.html b/doc/styleguide/item-slide-background-position.html new file mode 100644 index 0000000..e657cc9 --- /dev/null +++ b/doc/styleguide/item-slide-background-position.html @@ -0,0 +1,276 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 3.1.1 + + #Slide.Background.Position + + + Slide backgrounds + +

    + + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
    + +
    +
    +
    + +
    + .background +
    +
    + Center. +
    +
    +
    + +
    +
    +
    +
    + .background-top +
    +
    + Top. +
    +
    +
    + +
    +
    +
    +
    + .background-bottom +
    +
    + Bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-center +
    +
    + Center. +
    +
    +
    + +
    +
    +
    +
    + .background-center-top +
    +
    + Center top. +
    +
    +
    + +
    +
    +
    +
    + .background-left-top +
    +
    + Left top. +
    +
    +
    + +
    +
    +
    +
    + .background-right-top +
    +
    + Right top. +
    +
    +
    + +
    +
    +
    +
    + .background-center-bottom +
    +
    + Center bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-left-bottom +
    +
    + Left bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-right-bottom +
    +
    + Right bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-left +
    +
    + Left. +
    +
    +
    + +
    +
    +
    +
    + .background-right +
    +
    + Right. +
    +
    +
    + +
    +
    +
    +
    + +
    + + Markup + + 
    <section>
+  <span class="[modifier class]" style="background-image:url('http://lorempixel.com/250/250/')"></span>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 15 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-slide-background-video.html b/doc/styleguide/item-slide-background-video.html new file mode 100644 index 0000000..824a34e --- /dev/null +++ b/doc/styleguide/item-slide-background-video.html @@ -0,0 +1,141 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 3.1.1 + + #Slide.Background.Video + + + Video + +

    + + +
    + +
    +
    + Example +
    + + +
    +
    + +
    +

    .background-video

    +

    WebSlides is the easiest way to make HTML presentations. Inspire and engage.

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 92 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-slide-background.html b/doc/styleguide/item-slide-background.html new file mode 100644 index 0000000..02f64a1 --- /dev/null +++ b/doc/styleguide/item-slide-background.html @@ -0,0 +1,276 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 3.1 + + #Slide.Background + + + Backgrounds + +

    + + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
    + +
    +
    +
    + +
    + .background +
    +
    + Center. +
    +
    +
    + +
    +
    +
    +
    + .background-top +
    +
    + Top. +
    +
    +
    + +
    +
    +
    +
    + .background-bottom +
    +
    + Bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-center +
    +
    + Center. +
    +
    +
    + +
    +
    +
    +
    + .background-center-top +
    +
    + Center top. +
    +
    +
    + +
    +
    +
    +
    + .background-left-top +
    +
    + Left top. +
    +
    +
    + +
    +
    +
    +
    + .background-right-top +
    +
    + Right top. +
    +
    +
    + +
    +
    +
    +
    + .background-center-bottom +
    +
    + Center bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-left-bottom +
    +
    + Left bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-right-bottom +
    +
    + Right bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-left +
    +
    + Left. +
    +
    +
    + +
    +
    +
    +
    + .background-right +
    +
    + Right. +
    +
    +
    + +
    +
    +
    +
    + +
    + + Markup + + 
    <section>
+  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 15 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-slide.html b/doc/styleguide/item-slide.html new file mode 100644 index 0000000..e716723 --- /dev/null +++ b/doc/styleguide/item-slide.html @@ -0,0 +1,117 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 3 + + #Slide + + + Slide + +

    + + +
    + + + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-base.html b/doc/styleguide/section-base.html index fdc9829..06df6ce 100644 --- a/doc/styleguide/section-base.html +++ b/doc/styleguide/section-base.html @@ -56,6 +56,11 @@ 2Layout +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html index 0b08336..9b82164 100644 --- a/doc/styleguide/section-layout.html +++ b/doc/styleguide/section-layout.html @@ -62,6 +62,11 @@ +
  • + + 3Slide + +
    • diff --git a/doc/styleguide/section-slide.html b/doc/styleguide/section-slide.html new file mode 100644 index 0000000..ce72f8a --- /dev/null +++ b/doc/styleguide/section-slide.html @@ -0,0 +1,370 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 3 + + #Slide + + + Slide + +

    + + +
    + + + +
    +
    + +
    +

    + + + 3.1 + + #Slide.Background + + + Backgrounds + +

    + + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
    + +
    +
    +
    + +
    + .background +
    +
    + Center. +
    +
    +
    + +
    +
    +
    +
    + .background-top +
    +
    + Top. +
    +
    +
    + +
    +
    +
    +
    + .background-bottom +
    +
    + Bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-center +
    +
    + Center. +
    +
    +
    + +
    +
    +
    +
    + .background-center-top +
    +
    + Center top. +
    +
    +
    + +
    +
    +
    +
    + .background-left-top +
    +
    + Left top. +
    +
    +
    + +
    +
    +
    +
    + .background-right-top +
    +
    + Right top. +
    +
    +
    + +
    +
    +
    +
    + .background-center-bottom +
    +
    + Center bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-left-bottom +
    +
    + Left bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-right-bottom +
    +
    + Right bottom. +
    +
    +
    + +
    +
    +
    +
    + .background-left +
    +
    + Left. +
    +
    +
    + +
    +
    +
    +
    + .background-right +
    +
    + Right. +
    +
    +
    + +
    +
    +
    +
    + +
    + + Markup + + 
    <section>
+  <span class="[modifier class] bg-gray" style="background-image:url('http://lorempixel.com/150/150/')"></span>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 15 +
    + +
    +
    + +
    +

    + + + 3.1.1 + + #Slide.Background.Video + + + Video + +

    + + +
    + +
    +
    + Example +
    + + +
    +
    + +
    +

    .background-video

    +

    WebSlides is the easiest way to make HTML presentations. Inspire and engage.

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 92 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/src/scss/modules/_slides-bg.scss b/src/scss/modules/_slides-bg.scss index 9a9fdb7..420d91c 100644 --- a/src/scss/modules/_slides-bg.scss +++ b/src/scss/modules/_slides-bg.scss @@ -12,6 +12,27 @@ /*=== BG Positions === */ +// Backgrounds +// +// Markup: +//
    +// +//
    +// +// .background - Center. +// .background-top - Top. +// .background-bottom - Bottom. +// .background-center - Center. +// .background-center-top - Center top. +// .background-left-top - Left top. +// .background-right-top - Right top. +// .background-center-bottom - Center bottom. +// .background-left-bottom - Left bottom. +// .background-right-bottom - Right bottom. +// .background-left - Left. +// .background-right - Right. +// +// Styleguide Slide.Background .background { background-position: center; background-size: cover; @@ -68,10 +89,20 @@ } } - /*fullscreen video -