diff --git a/doc/kss/templates/default/kss-assets/kss.css b/doc/kss/templates/default/kss-assets/kss.css index cc8b0a2..05c64e4 100644 --- a/doc/kss/templates/default/kss-assets/kss.css +++ b/doc/kss/templates/default/kss-assets/kss.css @@ -595,3 +595,12 @@ #kssref-base-backgrounds-gradient div[class*=bg] { padding: 4rem; margin: 3rem; } + +#kssref-slide-background-anim .slide { + clip: rect(0px, 200px, 200px, 0px); + position: absolute; } + +#kssref-slide-background-anim .kss-modifier__example { + width: 200px; + height: 200px; + margin: 0 auto; } diff --git a/doc/kss/templates/default/kss-assets/kss.scss b/doc/kss/templates/default/kss-assets/kss.scss index 4af70cc..234a73c 100644 --- a/doc/kss/templates/default/kss-assets/kss.scss +++ b/doc/kss/templates/default/kss-assets/kss.scss @@ -790,3 +790,13 @@ $kss-vertical-rhythm : $kss-font-size * 1.5; margin: 3rem; } } + +#kssref-slide-background-anim .slide { + clip: rect(0px, 200px, 200px, 0px); + position: absolute; +} +#kssref-slide-background-anim .kss-modifier__example { + width: 200px; + height: 200px; + margin: 0 auto; +} diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html index 34abe95..227c1eb 100644 --- a/doc/styleguide/index.html +++ b/doc/styleguide/index.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • diff --git a/doc/styleguide/item-base-backgrounds-gradient.html b/doc/styleguide/item-base-backgrounds-gradient.html index 6ccafe2..b04d0f2 100644 --- a/doc/styleguide/item-base-backgrounds-gradient.html +++ b/doc/styleguide/item-base-backgrounds-gradient.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • diff --git a/doc/styleguide/item-base-backgrounds-transparent.html b/doc/styleguide/item-base-backgrounds-transparent.html index 996c35c..aa4986a 100644 --- a/doc/styleguide/item-base-backgrounds-transparent.html +++ b/doc/styleguide/item-base-backgrounds-transparent.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • diff --git a/doc/styleguide/item-base-backgrounds.html b/doc/styleguide/item-base-backgrounds.html index 59b9518..519abde 100644 --- a/doc/styleguide/item-base-backgrounds.html +++ b/doc/styleguide/item-base-backgrounds.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -75,19 +80,19 @@
    - Primary -Secondary -Light -Black -Black blue -Blue -Brown -Gray -Green -Purple -Red -White -Facebook + Primary #44d +Secondary #67d +Light #f7f9fb +Black #000 +Black blue #123 +Blue #346 +Brown #f9f8f2 +Gray #d5d9e2 +Green #077 +Purple #62b +Red #c23 +White #fff +Facebook #3b5998
    @@ -97,19 +102,19 @@ Markup - 
    <span class="bg-primary size-20">Primary</span>
-<span class="bg-secondary size-20">Secondary</span>
-<span class="bg-light size-20">Light</span>
-<span class="bg-black size-20">Black</span>
-<span class="bg-black-blue size-20">Black blue</span>
-<span class="bg-blue size-20">Blue</span>
-<span class="bg-brown size-20">Brown</span>
-<span class="bg-gray size-20">Gray</span>
-<span class="bg-green size-20">Green</span>
-<span class="bg-purple size-20">Purple</span>
-<span class="bg-red size-20">Red</span>
-<span class="bg-white size-20">White</span>
-<span class="bg-facebook size-20">Facebook</span>
    + 
    <span class="bg-primary size-20">Primary #44d</span>
+<span class="bg-secondary size-20">Secondary #67d</span>
+<span class="bg-light size-20">Light #f7f9fb</span>
+<span class="bg-black size-20">Black #000</span>
+<span class="bg-black-blue size-20">Black blue #123</span>
+<span class="bg-blue size-20">Blue #346</span>
+<span class="bg-brown size-20">Brown #f9f8f2</span>
+<span class="bg-gray size-20">Gray #d5d9e2</span>
+<span class="bg-green size-20">Green #077</span>
+<span class="bg-purple size-20">Purple #62b</span>
+<span class="bg-red size-20">Red #c23</span>
+<span class="bg-white size-20">White #fff</span>
+<span class="bg-facebook size-20">Facebook #3b5998</span>
    diff --git a/doc/styleguide/item-base.html b/doc/styleguide/item-base.html index 47ad905..2855af3 100644 --- a/doc/styleguide/item-base.html +++ b/doc/styleguide/item-base.html @@ -51,14 +51,19 @@ +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • diff --git a/doc/styleguide/item-flexblock-blink.html b/doc/styleguide/item-flexblock-blink.html new file mode 100644 index 0000000..5828477 --- /dev/null +++ b/doc/styleguide/item-flexblock-blink.html @@ -0,0 +1,241 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2.1 + + #Flexblock.Blink + + + Flexblocks + +

    + +
    +

    Auto-fill & Equal height columns

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .blink +
    +
    + Linkable block +
    +
    + +
    +
    +
    + .border +
    +
    + With border +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock [modifier class]">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock.scss, line 6 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-clients.html b/doc/styleguide/item-flexblock-clients.html new file mode 100644 index 0000000..b5e84f0 --- /dev/null +++ b/doc/styleguide/item-flexblock-clients.html @@ -0,0 +1,216 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2.2 + + #Flexblock.Clients + + + Clients + +

    + +
    +

    Highlight clients information

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .border +
    +
    + with border +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock clients [modifier class]">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-clients.scss, line 5 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-features.html b/doc/styleguide/item-flexblock-features.html new file mode 100644 index 0000000..d892e61 --- /dev/null +++ b/doc/styleguide/item-flexblock-features.html @@ -0,0 +1,213 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2.3 + + #Flexblock.Features + + + Features + +

    + +
    +

    Special features

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
      +
    • +
      +

      100% customizable

      + Well documented. +
      +
      • +
    • +
      + $48 +

      Extra virgin olive oil

      + The Spanish caviar. +
      +
      • +
    • +
      +

      + Ultra-fast Wifi +

      + Simple file sharing. +
      +
      • +
    +
    +
    + +
    + .border +
    +
    + with border +
    +
    +
      +
    • +
      +

      100% customizable

      + Well documented. +
      +
      • +
    • +
      + $48 +

      Extra virgin olive oil

      + The Spanish caviar. +
      +
      • +
    • +
      +

      + Ultra-fast Wifi +

      + Simple file sharing. +
      +
      • +
    +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-features.scss, line 5 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-gallery-overlay.html b/doc/styleguide/item-flexblock-gallery-overlay.html new file mode 100644 index 0000000..7453e8d --- /dev/null +++ b/doc/styleguide/item-flexblock-gallery-overlay.html @@ -0,0 +1,190 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2.4.1 + + #Flexblock.Gallery.Overlay + + + Gallery + Overflow + +

    + +
    +

    Beautiful gallery with overlay content

    + +
    + +
    + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>New York</h2>
+        <p>1,234 rooms</p>
+      </div>
+      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>uWatch</h2>
+        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>Ellen Daniels</h2>
+        <p>CEO</p>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-gallery.scss, line 50 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-gallery.html b/doc/styleguide/item-flexblock-gallery.html new file mode 100644 index 0000000..e1f309b --- /dev/null +++ b/doc/styleguide/item-flexblock-gallery.html @@ -0,0 +1,202 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2.4 + + #Flexblock.Gallery + + + Gallery + +

    + +
    +

    Beautiful gallery

    + +
    + +
    + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+        <figcaption>
+          <h2>uWatch</h2>
+          <p>By Jane Doe</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+        <figcaption>
+          <h2>Ellen Daniels</h2>
+          <p>CEO</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+        <figcaption>
+          <h2>New York</h2>
+          <p>3,456 rooms</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-gallery.scss, line 7 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-metrics.html b/doc/styleguide/item-flexblock-metrics.html new file mode 100644 index 0000000..07a0e1a --- /dev/null +++ b/doc/styleguide/item-flexblock-metrics.html @@ -0,0 +1,195 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2.5 + + #Flexblock.Metrics + + + Metrics + +

    + +
    +

    Bla bla bla

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
      +
    • Founded + 2016 +
      • +
    • + 24M + Subscribers +
      • +
    • + Revenue: + $16M +
      • +
    • + Monthly Growth + 64% +
      • +
    +
    +
    + +
    + .border +
    +
    + with border +
    +
    +
      +
    • Founded + 2016 +
      • +
    • + 24M + Subscribers +
      • +
    • + Revenue: + $16M +
      • +
    • + Monthly Growth + 64% +
      • +
    +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock metrics  [modifier class]">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-metrics.scss, line 5 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock.html b/doc/styleguide/item-flexblock.html new file mode 100644 index 0000000..58c46b1 --- /dev/null +++ b/doc/styleguide/item-flexblock.html @@ -0,0 +1,146 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2 + + #Flexblock + + + Flexblock + +

    + + +
    + + + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-layout-alignment.html index eb44311..fb49b80 100644 --- a/doc/styleguide/item-layout-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -52,7 +57,7 @@

    - 2.1 + 3.1 #Layout.Alignment diff --git a/doc/styleguide/item-layout-radius.html b/doc/styleguide/item-layout-radius.html index 966ca49..281c351 100644 --- a/doc/styleguide/item-layout-radius.html +++ b/doc/styleguide/item-layout-radius.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -52,7 +57,7 @@

    - 2.2 + 3.2 #Layout.Radius diff --git a/doc/styleguide/item-layout-shadow.html b/doc/styleguide/item-layout-shadow.html index 43330fd..fb5437e 100644 --- a/doc/styleguide/item-layout-shadow.html +++ b/doc/styleguide/item-layout-shadow.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -52,7 +57,7 @@

    - 2.3 + 3.3 #Layout.Shadow diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-layout-sizes.html index f1c56f6..a83889c 100644 --- a/doc/styleguide/item-layout-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -52,7 +57,7 @@

    - 2.4 + 3.4 #Layout.Sizes diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html index 4e7f919..2b7787c 100644 --- a/doc/styleguide/item-layout.html +++ b/doc/styleguide/item-layout.html @@ -31,32 +31,37 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout @@ -78,7 +83,7 @@

    - 2 + 3 #Layout diff --git a/doc/styleguide/item-slide-background-anim.html b/doc/styleguide/item-slide-background-anim.html new file mode 100644 index 0000000..9888121 --- /dev/null +++ b/doc/styleguide/item-slide-background-anim.html @@ -0,0 +1,134 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 4.1.1 + + #Slide.Background.Anim + + + Animated + +

    + + +
    + +
    +
    + Example +
    + + +
    +
    + +
    +
    +
    + +
    + +
    + + Markup + + 
    <section class="aligncenter bg-black">
+  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 140 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-slide-background-video.html b/doc/styleguide/item-slide-background-video.html index 824a34e..237d3b0 100644 --- a/doc/styleguide/item-slide-background-video.html +++ b/doc/styleguide/item-slide-background-video.html @@ -31,14 +31,19 @@ 1Base

    • +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -52,7 +57,7 @@

    - 3.1.1 + 4.1.2 #Slide.Background.Video diff --git a/doc/styleguide/item-slide-background.html b/doc/styleguide/item-slide-background.html index 02f64a1..b6b6fed 100644 --- a/doc/styleguide/item-slide-background.html +++ b/doc/styleguide/item-slide-background.html @@ -31,14 +31,19 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -52,7 +57,7 @@

    - 3.1 + 4.1 #Slide.Background diff --git a/doc/styleguide/item-slide.html b/doc/styleguide/item-slide.html index e716723..41763b5 100644 --- a/doc/styleguide/item-slide.html +++ b/doc/styleguide/item-slide.html @@ -31,25 +31,36 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • @@ -116,19 +121,19 @@
    - Primary -Secondary -Light -Black -Black blue -Blue -Brown -Gray -Green -Purple -Red -White -Facebook + Primary #44d +Secondary #67d +Light #f7f9fb +Black #000 +Black blue #123 +Blue #346 +Brown #f9f8f2 +Gray #d5d9e2 +Green #077 +Purple #62b +Red #c23 +White #fff +Facebook #3b5998
    @@ -138,19 +143,19 @@ Markup - 
    <span class="bg-primary size-20">Primary</span>
-<span class="bg-secondary size-20">Secondary</span>
-<span class="bg-light size-20">Light</span>
-<span class="bg-black size-20">Black</span>
-<span class="bg-black-blue size-20">Black blue</span>
-<span class="bg-blue size-20">Blue</span>
-<span class="bg-brown size-20">Brown</span>
-<span class="bg-gray size-20">Gray</span>
-<span class="bg-green size-20">Green</span>
-<span class="bg-purple size-20">Purple</span>
-<span class="bg-red size-20">Red</span>
-<span class="bg-white size-20">White</span>
-<span class="bg-facebook size-20">Facebook</span>
    + 
    <span class="bg-primary size-20">Primary #44d</span>
+<span class="bg-secondary size-20">Secondary #67d</span>
+<span class="bg-light size-20">Light #f7f9fb</span>
+<span class="bg-black size-20">Black #000</span>
+<span class="bg-black-blue size-20">Black blue #123</span>
+<span class="bg-blue size-20">Blue #346</span>
+<span class="bg-brown size-20">Brown #f9f8f2</span>
+<span class="bg-gray size-20">Gray #d5d9e2</span>
+<span class="bg-green size-20">Green #077</span>
+<span class="bg-purple size-20">Purple #62b</span>
+<span class="bg-red size-20">Red #c23</span>
+<span class="bg-white size-20">White #fff</span>
+<span class="bg-facebook size-20">Facebook #3b5998</span>
    diff --git a/doc/styleguide/section-flexblock.html b/doc/styleguide/section-flexblock.html new file mode 100644 index 0000000..02a52e2 --- /dev/null +++ b/doc/styleguide/section-flexblock.html @@ -0,0 +1,881 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2 + + #Flexblock + + + Flexblock + +

    + + +
    + + + +
    +
    + +
    +

    + + + 2.1 + + #Flexblock.Blink + + + Flexblocks + +

    + +
    +

    Auto-fill & Equal height columns

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .blink +
    +
    + Linkable block +
    +
    + +
    +
    +
    + .border +
    +
    + With border +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock [modifier class]">
+  <li>
+    <a href="#">
+      Item 1
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 2
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 3
+     </a>
+  </li>
+  <li>
+    <a href="#">
+      Item 4
+     </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock.scss, line 6 +
    + +
    +
    + +
    +

    + + + 2.2 + + #Flexblock.Clients + + + Clients + +

    + +
    +

    Highlight clients information

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .border +
    +
    + with border +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock clients [modifier class]">
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/google.svg" alt="Google">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Client">
+      <figure>
+        <img class="blacklogo" src="/static/images/logos/microsoft.svg" alt="Microsoft">
+        <figcaption>
+          <h3>Interfaces</h3>
+          <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-clients.scss, line 5 +
    + +
    +
    + +
    +

    + + + 2.3 + + #Flexblock.Features + + + Features + +

    + +
    +

    Special features

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
      +
    • +
      +

      100% customizable

      + Well documented. +
      +
      • +
    • +
      + $48 +

      Extra virgin olive oil

      + The Spanish caviar. +
      +
      • +
    • +
      +

      + Ultra-fast Wifi +

      + Simple file sharing. +
      +
      • +
    +
    +
    + +
    + .border +
    +
    + with border +
    +
    +
      +
    • +
      +

      100% customizable

      + Well documented. +
      +
      • +
    • +
      + $48 +

      Extra virgin olive oil

      + The Spanish caviar. +
      +
      • +
    • +
      +

      + Ultra-fast Wifi +

      + Simple file sharing. +
      +
      • +
    +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock features">
+  <li>
+    <div>
+      <h2> <span>100<sup>%</sup></span> customizable</h2>
+      Well documented.
+    </div>
+  </li>
+  <li>
+    <div>
+      <span><sup>$</sup>48</span>
+      <h2>Extra virgin olive oil</h2>
+      The Spanish caviar.
+    </div>
+  </li>
+  <li>
+    <div>
+      <h2>
+        Ultra-fast Wifi
+      </h2>
+      Simple file sharing.
+    </div>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-features.scss, line 5 +
    + +
    +
    + +
    +

    + + + 2.4 + + #Flexblock.Gallery + + + Gallery + +

    + +
    +

    Beautiful gallery

    + +
    + +
    + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+        <figcaption>
+          <h2>uWatch</h2>
+          <p>By Jane Doe</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+        <figcaption>
+          <h2>Ellen Daniels</h2>
+          <p>CEO</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <figure>
+        <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+        <figcaption>
+          <h2>New York</h2>
+          <p>3,456 rooms</p>
+        </figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-gallery.scss, line 7 +
    + +
    +
    + +
    +

    + + + 2.4.1 + + #Flexblock.Gallery.Overlay + + + Gallery + Overflow + +

    + +
    +

    Beautiful gallery with overlay content

    + +
    + +
    + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock gallery">
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>New York</h2>
+        <p>1,234 rooms</p>
+      </div>
+      <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>uWatch</h2>
+        <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <div class="overlay">
+        <h2>Ellen Daniels</h2>
+        <p>CEO</p>
+      </div>
+      <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-gallery.scss, line 50 +
    + +
    +
    + +
    +

    + + + 2.5 + + #Flexblock.Metrics + + + Metrics + +

    + +
    +

    Bla bla bla

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
      +
    • Founded + 2016 +
      • +
    • + 24M + Subscribers +
      • +
    • + Revenue: + $16M +
      • +
    • + Monthly Growth + 64% +
      • +
    +
    +
    + +
    + .border +
    +
    + with border +
    +
    +
      +
    • Founded + 2016 +
      • +
    • + 24M + Subscribers +
      • +
    • + Revenue: + $16M +
      • +
    • + Monthly Growth + 64% +
      • +
    +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock metrics  [modifier class]">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-metrics.scss, line 5 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html index 9b82164..e979605 100644 --- a/doc/styleguide/section-layout.html +++ b/doc/styleguide/section-layout.html @@ -31,32 +31,37 @@ 1Base +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout @@ -78,7 +83,7 @@

    - 2 + 3 #Layout @@ -99,7 +104,7 @@

    - 2.1 + 3.1 #Layout.Alignment @@ -190,7 +195,7 @@

    - 2.2 + 3.2 #Layout.Radius @@ -241,7 +246,7 @@

    - 2.3 + 3.3 #Layout.Shadow @@ -292,7 +297,7 @@

    - 2.4 + 3.4 #Layout.Sizes diff --git a/doc/styleguide/section-slide.html b/doc/styleguide/section-slide.html index ce72f8a..e7ace7a 100644 --- a/doc/styleguide/section-slide.html +++ b/doc/styleguide/section-slide.html @@ -31,25 +31,36 @@ 1Base

    • +
  • + + 2Flexblock + +
  • - 2Layout + 3Layout
  • - 3Slide + 4Slide
    • + +
    + +
    +

    + + + 4.1.1 + + #Slide.Background.Anim + + + Animated + +

    + + +
    + +
    +
    + Example +
    + + +
    +
    + +
    +
    +
    + +
    + +
    + + Markup + + 
    <section class="aligncenter bg-black">
+  <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 140 +
    +
    @@ -281,7 +339,7 @@

    - 3.1.1 + 4.1.2 #Slide.Background.Video diff --git a/src/scss/_color.scss b/src/scss/_color.scss index 6c16551..50dfb86 100644 --- a/src/scss/_color.scss +++ b/src/scss/_color.scss @@ -109,19 +109,19 @@ Slides - Backgrounds
    // Colors we use for backgrounds. // // Markup: -// Primary -// Secondary -// Light -// Black -// Black blue -// Blue -// Brown -// Gray -// Green -// Purple -// Red -// White -// Facebook +// Primary #44d +// Secondary #67d +// Light #f7f9fb +// Black #000 +// Black blue #123 +// Blue #346 +// Brown #f9f8f2 +// Gray #d5d9e2 +// Green #077 +// Purple #62b +// Red #c23 +// White #fff +// Facebook #3b5998 // // Styleguide Base.backgrounds @each $name, $color in $bg-colors { diff --git a/src/scss/modules/_flexblock-clients.scss b/src/scss/modules/_flexblock-clients.scss index b202fb4..816abb1 100644 --- a/src/scss/modules/_flexblock-clients.scss +++ b/src/scss/modules/_flexblock-clients.scss @@ -2,6 +2,40 @@ 6.2 Clients Logos
      ======================================================================= */ +// Clients +// +// Highlight clients information +// +// Markup: +// +// +// .border - with border +// +// Styleguide Flexblock.Clients + .flexblock.clients.blink li > a, .flexblock.clients li { padding: 0; diff --git a/src/scss/modules/_flexblock-features.scss b/src/scss/modules/_flexblock-features.scss index 822b898..9f8951b 100644 --- a/src/scss/modules/_flexblock-features.scss +++ b/src/scss/modules/_flexblock-features.scss @@ -2,6 +2,38 @@ 6.1 Features
        ====================================================================== */ +// Features +// +// Special features +// +// Markup: +//
          +//
        • +//
          +//

          100% customizable

          +// Well documented. +//
          +//
          • +//
        • +//
          +// $48 +//

          Extra virgin olive oil

          +// The Spanish caviar. +//
          +//
          • +//
        • +//
          +//

          +// Ultra-fast Wifi +//

          +// Simple file sharing. +//
          +//
          • +//
        +// +// .border - with border +// +// Styleguide Flexblock.Features .flexblock.features { > li { border-radius: .4rem; diff --git a/src/scss/modules/_flexblock-gallery.scss b/src/scss/modules/_flexblock-gallery.scss index 953d543..ef40b60 100644 --- a/src/scss/modules/_flexblock-gallery.scss +++ b/src/scss/modules/_flexblock-gallery.scss @@ -4,6 +4,86 @@ Block Thumbnails li+.overlay+image img size recommended:800x600px =================================================== */ +// Gallery +// +// Beautiful gallery +// +// Markup: +// +// +// Styleguide Flexblock.Gallery + +// Gallery + Overflow +// +// Beautiful gallery with overlay content +// +// Markup: +// +// +// Styleguide Flexblock.Gallery.Overlay + .flexblock.gallery { li { margin-bottom: 4.8rem; diff --git a/src/scss/modules/_flexblock-metrics.scss b/src/scss/modules/_flexblock-metrics.scss index 8d9788a..616b930 100644 --- a/src/scss/modules/_flexblock-metrics.scss +++ b/src/scss/modules/_flexblock-metrics.scss @@ -2,6 +2,32 @@ 6.4 Block Numbers -
          =================================================== */ +// Metrics +// +// Bla bla bla +// +// Markup: +//
            +//
          • Founded +// 2016 +//
            • +//
          • +// 24M +// Subscribers +//
            • +//
          • +// Revenue: +// $16M +//
            • +//
          • +// Monthly Growth +// 64% +//
            • +//
          +// +// .border - with border +// +// Styleguide Flexblock.Metrics .metrics li { text-align: center; width: 100%; diff --git a/src/scss/modules/_flexblock.scss b/src/scss/modules/_flexblock.scss index 5103283..6d25319 100644 --- a/src/scss/modules/_flexblock.scss +++ b/src/scss/modules/_flexblock.scss @@ -3,6 +3,38 @@ Blocks Links li>a = .flexblock.blink (.blink required) ================================================================= */ +// Flexblocks +// +// Auto-fill & Equal height columns +// +// Markup: +// +// +// .blink - Linkable block +// .border - With border +// +// Styleguide Flexblock.Blink .flexblock { clear: both; display: flex; diff --git a/src/scss/modules/_slides-bg.scss b/src/scss/modules/_slides-bg.scss index 420d91c..edc2e2f 100644 --- a/src/scss/modules/_slides-bg.scss +++ b/src/scss/modules/_slides-bg.scss @@ -137,8 +137,14 @@ } } -/*=== Animated Background Image === */ - +// Animated +// +// Markup: +//
          +// +//
          +// +// Styleguide Slide.Background.Anim .background.anim { animation: anim 80s linear infinite; background-position: center top;