diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html index 28f1e68..7567beb 100644 --- a/doc/styleguide/index.html +++ b/doc/styleguide/index.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/item-avatars.html b/doc/styleguide/item-avatars.html index 509f014..d2eb0c2 100644 --- a/doc/styleguide/item-avatars.html +++ b/doc/styleguide/item-avatars.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/item-badgets.html b/doc/styleguide/item-badgets.html index dc27587..517a7e7 100644 --- a/doc/styleguide/item-badgets.html +++ b/doc/styleguide/item-badgets.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/item-base-backgrounds-gradient.html b/doc/styleguide/item-base-backgrounds-gradient.html index 53e819c..0bb4a3c 100644 --- a/doc/styleguide/item-base-backgrounds-gradient.html +++ b/doc/styleguide/item-base-backgrounds-gradient.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/item-base-backgrounds-transparent.html b/doc/styleguide/item-base-backgrounds-transparent.html index 18b4a06..897e117 100644 --- a/doc/styleguide/item-base-backgrounds-transparent.html +++ b/doc/styleguide/item-base-backgrounds-transparent.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/item-base-backgrounds.html b/doc/styleguide/item-base-backgrounds.html index ec1c3a2..c3da36a 100644 --- a/doc/styleguide/item-base-backgrounds.html +++ b/doc/styleguide/item-base-backgrounds.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/item-base.html b/doc/styleguide/item-base.html index b6fb773..f081aba 100644 --- a/doc/styleguide/item-base.html +++ b/doc/styleguide/item-base.html @@ -61,69 +61,84 @@ +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/item-blocks-cites.html b/doc/styleguide/item-blocks-cites.html new file mode 100644 index 0000000..49efd12 --- /dev/null +++ b/doc/styleguide/item-blocks-cites.html @@ -0,0 +1,205 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4.1 + + #Blocks.Cites + + + Cites + +

    + + +
    + +
    +
    + Example +
    + + +
    + Avatar @jlantunez +
    +
    + +
    + +
    + + Markup + + 
    <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
    +
    + +
    + Source: modules/_quotes.scss, line 28 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-blocks-cta-cover.html b/doc/styleguide/item-blocks-cta-cover.html new file mode 100644 index 0000000..bb3f156 --- /dev/null +++ b/doc/styleguide/item-blocks-cta-cover.html @@ -0,0 +1,221 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4.3 + + #Blocks.cta-cover + + + Headings + +

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

    HTML Presentations Made Easy

    +

    + + WebSlides + + Demos · Github +

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="cta-cover">
+  <h1><strong>HTML Presentations</strong> Made Easy</h1>
+  <p class="alignright">
+    <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
+      WebSlides
+    </a>
+    <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
+  </p>
+</div>
    +
    + +
    + Source: modules/_promos.scss, line 75 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-blocks-cta.html b/doc/styleguide/item-blocks-cta.html new file mode 100644 index 0000000..84eeccc --- /dev/null +++ b/doc/styleguide/item-blocks-cta.html @@ -0,0 +1,221 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4.2 + + #Blocks.CTA + + + Call to action + +

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

    $40

    +
    +
    +

    Watch TV shows anytime, anywhere

    +

    Lorem ipsum

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="cta">
+  <div class="number">
+    <p><span><sup>$</sup>40</span></p>
+  </div>
+  <div class="benefit">
+    <h2>Watch TV shows anytime, anywhere</h2>
+    <p>Lorem ipsum</p>
+  </div>
+</div>
    +
    + +
    + Source: modules/_promos.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-blocks-navigation.html b/doc/styleguide/item-blocks-navigation.html new file mode 100644 index 0000000..7e4f938 --- /dev/null +++ b/doc/styleguide/item-blocks-navigation.html @@ -0,0 +1,213 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4.4 + + #Blocks.Navigation + + + Slides navigation + +

    + + +
    + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
    +
    + +
    + Source: modules/_slides-navigation.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-blocks-quotes.html b/doc/styleguide/item-blocks-quotes.html new file mode 100644 index 0000000..7c90f3b --- /dev/null +++ b/doc/styleguide/item-blocks-quotes.html @@ -0,0 +1,209 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4.5 + + #Blocks.Quotes + + + Quotes + +

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

    "I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <blockquote>
+  <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
+</blockquote>
    +
    + +
    + Source: modules/_quotes.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-blocks-toc.html b/doc/styleguide/item-blocks-toc.html new file mode 100644 index 0000000..4dfa581 --- /dev/null +++ b/doc/styleguide/item-blocks-toc.html @@ -0,0 +1,253 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4.6 + + #Blocks.TOC + + + Table of contents + +

    + + +
    + +
    +
    + Example +
    + + +
    +
    +
      +
    1. + + Prologue: Learning to See + 01 + +
      2. +
    2. What is Design? + 04 +
      3. +
    3. + What is Beauty? + 08 +
        +
      1. Harmony + 12 +
        2. +
      2. Simplicity vs. Clarity + 14 +
        3. +
      +
      4. +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="toc">
+  <ol>
+    <li>
+      <a href="#" title="Go to Learning to see">
+      <span class="chapter">Prologue: Learning to See</span>
+      <span class="toc-page">01</span>
+      </a>
+    </li>
+    <li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
+      <span class="toc-page">04</span></a>
+    </li>
+    <li>
+      <a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
+      <span class="toc-page">08</span></a>
+      <ol>
+        <li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
+          <span class="toc-page">12</span></a>
+        </li>
+        <li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
+          <span class="toc-page">14</span></a>
+        </li>
+      </ol>
+    </li>
+  </ol>
+</div>
    +
    + +
    + Source: modules/_toc.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-blocks.html b/doc/styleguide/item-blocks.html new file mode 100644 index 0000000..8075f2e --- /dev/null +++ b/doc/styleguide/item-blocks.html @@ -0,0 +1,221 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4 + + #Blocks + + + Blocks + +

    + + +
    + + + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-buttons.html b/doc/styleguide/item-buttons.html index 0780b95..f8131dd 100644 --- a/doc/styleguide/item-buttons.html +++ b/doc/styleguide/item-buttons.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 4 + 5 #Buttons diff --git a/doc/styleguide/item-cards.html b/doc/styleguide/item-cards.html index c748891..48c7fa5 100644 --- a/doc/styleguide/item-cards.html +++ b/doc/styleguide/item-cards.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 5 + 6 #Cards diff --git a/doc/styleguide/item-elements-tables.html b/doc/styleguide/item-elements-tables.html new file mode 100644 index 0000000..f08a473 --- /dev/null +++ b/doc/styleguide/item-elements-tables.html @@ -0,0 +1,263 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 7.1 + + #Elements.Tables + + + Tables + +

    + + +
    + +
    +
    + Example +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    PlansGoodBetterAwesome
    PriceFree$6$10
    Access to exclusive contentNoNoYes
    Screens you can watch on at the same time12Unlimited
    +
    +
    + +
    + +
    + + Markup + + 
    <table>
+  <thead>
+   <tr>
+     <th>Plans</th>
+     <th>Good</th>
+     <th>Better</th>
+     <th>Awesome</th>
+   </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Price</td>
+      <td>Free</td>
+      <td>$6</td>
+      <td>$10</td>
+    </tr>
+    <tr>
+      <td>Access to exclusive content</td>
+      <td>No</td>
+      <td>No</td>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <td>Screens you can watch on at the same time</td>
+      <td>1</td>
+      <td>2</td>
+      <td>Unlimited</td>
+    </tr>
+  </tbody>
+</table>
    +
    + +
    + Source: modules/_tables.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-elements-try.html b/doc/styleguide/item-elements-try.html index 58d1c74..a2b1043 100644 --- a/doc/styleguide/item-elements-try.html +++ b/doc/styleguide/item-elements-try.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 6.1 + 7.2 #Elements.Try diff --git a/doc/styleguide/item-elements.html b/doc/styleguide/item-elements.html index fb33cd0..092965a 100644 --- a/doc/styleguide/item-elements.html +++ b/doc/styleguide/item-elements.html @@ -41,24 +41,35 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements @@ -125,7 +146,7 @@

    - 6 + 7 #Elements diff --git a/doc/styleguide/item-flexblock-activity.html b/doc/styleguide/item-flexblock-activity.html index c72e21c..a1cb248 100644 --- a/doc/styleguide/item-flexblock-activity.html +++ b/doc/styleguide/item-flexblock-activity.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.1 + 8.1 #Flexblock.Activity diff --git a/doc/styleguide/item-flexblock-blink.html b/doc/styleguide/item-flexblock-blink.html index 6ced92a..2fec679 100644 --- a/doc/styleguide/item-flexblock-blink.html +++ b/doc/styleguide/item-flexblock-blink.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.2 + 8.2 #Flexblock.Blink diff --git a/doc/styleguide/item-flexblock-clients.html b/doc/styleguide/item-flexblock-clients.html index 5324f6e..2d49035 100644 --- a/doc/styleguide/item-flexblock-clients.html +++ b/doc/styleguide/item-flexblock-clients.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.3 + 8.3 #Flexblock.Clients diff --git a/doc/styleguide/item-flexblock-features.html b/doc/styleguide/item-flexblock-features.html index 2918931..de34d7f 100644 --- a/doc/styleguide/item-flexblock-features.html +++ b/doc/styleguide/item-flexblock-features.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.4 + 8.4 #Flexblock.Features diff --git a/doc/styleguide/item-flexblock-gallery-overlay.html b/doc/styleguide/item-flexblock-gallery-overlay.html index 582867d..5ff6169 100644 --- a/doc/styleguide/item-flexblock-gallery-overlay.html +++ b/doc/styleguide/item-flexblock-gallery-overlay.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.5.1 + 8.5.1 #Flexblock.Gallery.Overlay diff --git a/doc/styleguide/item-flexblock-gallery.html b/doc/styleguide/item-flexblock-gallery.html index 7f0c46e..2f5596a 100644 --- a/doc/styleguide/item-flexblock-gallery.html +++ b/doc/styleguide/item-flexblock-gallery.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.5 + 8.5 #Flexblock.Gallery diff --git a/doc/styleguide/item-flexblock-metrics.html b/doc/styleguide/item-flexblock-metrics.html index e988204..937f348 100644 --- a/doc/styleguide/item-flexblock-metrics.html +++ b/doc/styleguide/item-flexblock-metrics.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.6 + 8.6 #Flexblock.Metrics diff --git a/doc/styleguide/item-flexblock-plans.html b/doc/styleguide/item-flexblock-plans.html index b0694fa..a99fcfa 100644 --- a/doc/styleguide/item-flexblock-plans.html +++ b/doc/styleguide/item-flexblock-plans.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.7 + 8.7 #Flexblock.Plans diff --git a/doc/styleguide/item-flexblock-reasons.html b/doc/styleguide/item-flexblock-reasons.html index 8981171..d8d0b20 100644 --- a/doc/styleguide/item-flexblock-reasons.html +++ b/doc/styleguide/item-flexblock-reasons.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.8 + 8.8 #Flexblock.Reasons diff --git a/doc/styleguide/item-flexblock-specs.html b/doc/styleguide/item-flexblock-specs.html index 6c58522..a489391 100644 --- a/doc/styleguide/item-flexblock-specs.html +++ b/doc/styleguide/item-flexblock-specs.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.9 + 8.9 #Flexblock.Specs diff --git a/doc/styleguide/item-flexblock-steps.html b/doc/styleguide/item-flexblock-steps.html index b70e9d3..085d0b3 100644 --- a/doc/styleguide/item-flexblock-steps.html +++ b/doc/styleguide/item-flexblock-steps.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 7.10 + 8.10 #Flexblock.Steps diff --git a/doc/styleguide/item-flexblock.html b/doc/styleguide/item-flexblock.html index 03c7923..e6bcb5e 100644 --- a/doc/styleguide/item-flexblock.html +++ b/doc/styleguide/item-flexblock.html @@ -41,89 +41,94 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock @@ -185,7 +200,7 @@

    - 7 + 8 #Flexblock diff --git a/doc/styleguide/item-forms-user.html b/doc/styleguide/item-forms-user.html index 5a40e76..5203654 100644 --- a/doc/styleguide/item-forms-user.html +++ b/doc/styleguide/item-forms-user.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 8.1 + 9.1 #Forms.User diff --git a/doc/styleguide/item-forms.html b/doc/styleguide/item-forms.html index 46655ca..bf0b9b3 100644 --- a/doc/styleguide/item-forms.html +++ b/doc/styleguide/item-forms.html @@ -41,34 +41,39 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms @@ -125,7 +140,7 @@

    - 8 + 9 #Forms diff --git a/doc/styleguide/item-grid.html b/doc/styleguide/item-grid.html index ea5daaa..270f2ea 100644 --- a/doc/styleguide/item-grid.html +++ b/doc/styleguide/item-grid.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 9 + 10 #Grid diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-layout-alignment.html index 1ceb1b1..6614d50 100644 --- a/doc/styleguide/item-layout-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 10.1 + 11.1 #Layout.Alignment diff --git a/doc/styleguide/item-layout-radius.html b/doc/styleguide/item-layout-radius.html index 00ba2af..1b2d874 100644 --- a/doc/styleguide/item-layout-radius.html +++ b/doc/styleguide/item-layout-radius.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 10.2 + 11.2 #Layout.Radius diff --git a/doc/styleguide/item-layout-shadow.html b/doc/styleguide/item-layout-shadow.html index 262e9ba..363b0f3 100644 --- a/doc/styleguide/item-layout-shadow.html +++ b/doc/styleguide/item-layout-shadow.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 10.3 + 11.3 #Layout.Shadow diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-layout-sizes.html index 6df313b..41a2fe4 100644 --- a/doc/styleguide/item-layout-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 10.4 + 11.4 #Layout.Sizes diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html index 0a20a27..13eea2d 100644 --- a/doc/styleguide/item-layout.html +++ b/doc/styleguide/item-layout.html @@ -41,62 +41,67 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout @@ -143,7 +158,7 @@

    - 10 + 11 #Layout diff --git a/doc/styleguide/item-longform.html b/doc/styleguide/item-longform.html index 45319f4..6a05203 100644 --- a/doc/styleguide/item-longform.html +++ b/doc/styleguide/item-longform.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 11 + 12 #Longform diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html index ab486ec..253468d 100644 --- a/doc/styleguide/item-media-embed.html +++ b/doc/styleguide/item-media-embed.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 12.1 + 13.1 #Media.Embed diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html index d428d49..beaf974 100644 --- a/doc/styleguide/item-media.html +++ b/doc/styleguide/item-media.html @@ -41,60 +41,65 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media @@ -131,7 +146,7 @@

    - 12 + 13 #Media diff --git a/doc/styleguide/item-navigation.html b/doc/styleguide/item-navigation.html index 49263ec..184928c 100644 --- a/doc/styleguide/item-navigation.html +++ b/doc/styleguide/item-navigation.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 13 + 14 #Navigation diff --git a/doc/styleguide/item-screenshots.html b/doc/styleguide/item-screenshots.html index 9f94fc4..23bdcdf 100644 --- a/doc/styleguide/item-screenshots.html +++ b/doc/styleguide/item-screenshots.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 14 + 15 #Screenshots diff --git a/doc/styleguide/item-slide-background-anim.html b/doc/styleguide/item-slide-background-anim.html index 451c0cc..03a081f 100644 --- a/doc/styleguide/item-slide-background-anim.html +++ b/doc/styleguide/item-slide-background-anim.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 15.1.1 + 16.1.1 #Slide.Background.Anim diff --git a/doc/styleguide/item-slide-background-video.html b/doc/styleguide/item-slide-background-video.html index 769b905..b4cf28d 100644 --- a/doc/styleguide/item-slide-background-video.html +++ b/doc/styleguide/item-slide-background-video.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 15.1.2 + 16.1.2 #Slide.Background.Video diff --git a/doc/styleguide/item-slide-background.html b/doc/styleguide/item-slide-background.html index 3da3799..366ebad 100644 --- a/doc/styleguide/item-slide-background.html +++ b/doc/styleguide/item-slide-background.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 15.1 + 16.1 #Slide.Background diff --git a/doc/styleguide/item-slide.html b/doc/styleguide/item-slide.html index bbebe69..643436b 100644 --- a/doc/styleguide/item-slide.html +++ b/doc/styleguide/item-slide.html @@ -41,89 +41,104 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides + +
  • - 16Typography + 18Typography
    • @@ -137,7 +152,7 @@

    - 15 + 16 #Slide diff --git a/doc/styleguide/item-slides-bottom.html b/doc/styleguide/item-slides-bottom.html new file mode 100644 index 0000000..c76671b --- /dev/null +++ b/doc/styleguide/item-slides-bottom.html @@ -0,0 +1,224 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 17.1 + + #Slides.Bottom + + + Align bottom + +

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

    Content

    +
    +
    +
    + +
    + Slide alignment +
    +
    + bottom +
    +
    +
    +

    Content

    +
    +
    +
    +
    + +
    + + Markup + + 
    <section class="slide-bottom">
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 74 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-slides-top.html b/doc/styleguide/item-slides-top.html new file mode 100644 index 0000000..1fc21b1 --- /dev/null +++ b/doc/styleguide/item-slides-top.html @@ -0,0 +1,224 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 17.2 + + #Slides.Top + + + Align top + +

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

    Content

    +
    +
    +
    + +
    + Slide alignment +
    +
    + top +
    +
    +
    +

    Content

    +
    +
    +
    +
    + +
    + + Markup + + 
    <section class="slide-top">
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 60 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-slides.html b/doc/styleguide/item-slides.html new file mode 100644 index 0000000..bdfd2bb --- /dev/null +++ b/doc/styleguide/item-slides.html @@ -0,0 +1,255 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 17 + + #Slides + + + Slides + +

    + +
    +

    Fullscreen. Vertically and horizontally centered. +Fade transition to all slides. +All HTML elements will have those styles

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

    Content

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section>
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-typography-columns.html b/doc/styleguide/item-typography-columns.html index aaed8fd..2c8a26c 100644 --- a/doc/styleguide/item-typography-columns.html +++ b/doc/styleguide/item-typography-columns.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.1 + 18.1 #Typography.Columns diff --git a/doc/styleguide/item-typography-context.html b/doc/styleguide/item-typography-context.html index a40aa40..c887a42 100644 --- a/doc/styleguide/item-typography-context.html +++ b/doc/styleguide/item-typography-context.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.2 + 18.2 #Typography.Context diff --git a/doc/styleguide/item-typography-data.html b/doc/styleguide/item-typography-data.html index f571f6f..2998e98 100644 --- a/doc/styleguide/item-typography-data.html +++ b/doc/styleguide/item-typography-data.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.3 + 18.3 #Typography.Data diff --git a/doc/styleguide/item-typography-emoji.html b/doc/styleguide/item-typography-emoji.html index acd7b7b..d5fce7e 100644 --- a/doc/styleguide/item-typography-emoji.html +++ b/doc/styleguide/item-typography-emoji.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.4 + 18.4 #Typography.Emoji diff --git a/doc/styleguide/item-typography-info.html b/doc/styleguide/item-typography-info.html index e67670c..75f69f0 100644 --- a/doc/styleguide/item-typography-info.html +++ b/doc/styleguide/item-typography-info.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.5 + 18.5 #Typography.Info diff --git a/doc/styleguide/item-typography-interviews.html b/doc/styleguide/item-typography-interviews.html index 5049957..17455df 100644 --- a/doc/styleguide/item-typography-interviews.html +++ b/doc/styleguide/item-typography-interviews.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.6 + 18.6 #Typography.Interviews diff --git a/doc/styleguide/item-typography-intro.html b/doc/styleguide/item-typography-intro.html index db37240..e25ffdb 100644 --- a/doc/styleguide/item-typography-intro.html +++ b/doc/styleguide/item-typography-intro.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.7 + 18.7 #Typography.Intro diff --git a/doc/styleguide/item-typography-label.html b/doc/styleguide/item-typography-label.html index 6f6470c..3bb5c73 100644 --- a/doc/styleguide/item-typography-label.html +++ b/doc/styleguide/item-typography-label.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.8 + 18.8 #Typography.Label diff --git a/doc/styleguide/item-typography-landings.html b/doc/styleguide/item-typography-landings.html index 54726ea..0861594 100644 --- a/doc/styleguide/item-typography-landings.html +++ b/doc/styleguide/item-typography-landings.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.9 + 18.9 #Typography.Landings diff --git a/doc/styleguide/item-typography-lowercase.html b/doc/styleguide/item-typography-lowercase.html index 08ed5f6..2086e2d 100644 --- a/doc/styleguide/item-typography-lowercase.html +++ b/doc/styleguide/item-typography-lowercase.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.10 + 18.10 #Typography.Lowercase diff --git a/doc/styleguide/item-typography-pull_quote.html b/doc/styleguide/item-typography-pull_quote.html index 586a337..615c404 100644 --- a/doc/styleguide/item-typography-pull_quote.html +++ b/doc/styleguide/item-typography-pull_quote.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.11 + 18.11 #Typography.Pull_Quote diff --git a/doc/styleguide/item-typography-separator.html b/doc/styleguide/item-typography-separator.html index de8ab7b..ef60cbd 100644 --- a/doc/styleguide/item-typography-separator.html +++ b/doc/styleguide/item-typography-separator.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.12 + 18.12 #Typography.Separator diff --git a/doc/styleguide/item-typography-serif.html b/doc/styleguide/item-typography-serif.html index a67ec8f..c14ec7b 100644 --- a/doc/styleguide/item-typography-serif.html +++ b/doc/styleguide/item-typography-serif.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.13 + 18.13 #Typography.Serif diff --git a/doc/styleguide/item-typography-subtitle.html b/doc/styleguide/item-typography-subtitle.html index 3e55833..80c30df 100644 --- a/doc/styleguide/item-typography-subtitle.html +++ b/doc/styleguide/item-typography-subtitle.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.14 + 18.14 #Typography.Subtitle diff --git a/doc/styleguide/item-typography-symbols.html b/doc/styleguide/item-typography-symbols.html index aff1091..e8f84b9 100644 --- a/doc/styleguide/item-typography-symbols.html +++ b/doc/styleguide/item-typography-symbols.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.15 + 18.15 #Typography.Symbols diff --git a/doc/styleguide/item-typography-uppercase.html b/doc/styleguide/item-typography-uppercase.html index b8ddc30..042bca7 100644 --- a/doc/styleguide/item-typography-uppercase.html +++ b/doc/styleguide/item-typography-uppercase.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 16.16 + 18.16 #Typography.Uppercase diff --git a/doc/styleguide/item-typography.html b/doc/styleguide/item-typography.html index 7249205..b707cd6 100644 --- a/doc/styleguide/item-typography.html +++ b/doc/styleguide/item-typography.html @@ -41,164 +41,179 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography diff --git a/doc/styleguide/section-badgets.html b/doc/styleguide/section-badgets.html index aa45220..556da3c 100644 --- a/doc/styleguide/section-badgets.html +++ b/doc/styleguide/section-badgets.html @@ -41,69 +41,84 @@ 3Base
    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/section-base.html b/doc/styleguide/section-base.html index 2169287..3ff6b87 100644 --- a/doc/styleguide/section-base.html +++ b/doc/styleguide/section-base.html @@ -61,69 +61,84 @@ +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • diff --git a/doc/styleguide/section-blocks.html b/doc/styleguide/section-blocks.html new file mode 100644 index 0000000..c1f6487 --- /dev/null +++ b/doc/styleguide/section-blocks.html @@ -0,0 +1,571 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4 + + #Blocks + + + Blocks + +

    + + +
    + + + +
    +
    + +
    +

    + + + 4.1 + + #Blocks.Cites + + + Cites + +

    + + +
    + +
    +
    + Example +
    + + +
    + Avatar @jlantunez +
    +
    + +
    + +
    + + Markup + + 
    <cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
    +
    + +
    + Source: modules/_quotes.scss, line 28 +
    + +
    +
    + +
    +

    + + + 4.2 + + #Blocks.CTA + + + Call to action + +

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

    $40

    +
    +
    +

    Watch TV shows anytime, anywhere

    +

    Lorem ipsum

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="cta">
+  <div class="number">
+    <p><span><sup>$</sup>40</span></p>
+  </div>
+  <div class="benefit">
+    <h2>Watch TV shows anytime, anywhere</h2>
+    <p>Lorem ipsum</p>
+  </div>
+</div>
    +
    + +
    + Source: modules/_promos.scss, line 1 +
    + +
    +
    + +
    +

    + + + 4.3 + + #Blocks.cta-cover + + + Headings + +

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

    HTML Presentations Made Easy

    +

    + + WebSlides + + Demos · Github +

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="cta-cover">
+  <h1><strong>HTML Presentations</strong> Made Easy</h1>
+  <p class="alignright">
+    <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
+      WebSlides
+    </a>
+    <span class="try"><a href="/demos/" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
+  </p>
+</div>
    +
    + +
    + Source: modules/_promos.scss, line 75 +
    + +
    +
    + +
    +

    + + + 4.4 + + #Blocks.Navigation + + + Slides navigation + +

    + + +
    + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <div id="navigation">
+  <a id="next" href="#" title="Arrow Keys">→</a>
+  <a id="previous" href="#" title="Arrow Keys">←</a>
+  <span id="counter"><a href="#" title="View all slides">53 / 120</a></span>
+</div>
    +
    + +
    + Source: modules/_slides-navigation.scss, line 1 +
    + +
    +
    + +
    +

    + + + 4.5 + + #Blocks.Quotes + + + Quotes + +

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

    "I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <blockquote>
+  <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
+</blockquote>
    +
    + +
    + Source: modules/_quotes.scss, line 1 +
    + +
    +
    + +
    +

    + + + 4.6 + + #Blocks.TOC + + + Table of contents + +

    + + +
    + +
    +
    + Example +
    + + +
    +
    +
      +
    1. + + Prologue: Learning to See + 01 + +
      2. +
    2. What is Design? + 04 +
      3. +
    3. + What is Beauty? + 08 +
        +
      1. Harmony + 12 +
        2. +
      2. Simplicity vs. Clarity + 14 +
        3. +
      +
      4. +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="toc">
+  <ol>
+    <li>
+      <a href="#" title="Go to Learning to see">
+      <span class="chapter">Prologue: Learning to See</span>
+      <span class="toc-page">01</span>
+      </a>
+    </li>
+    <li><a href="#" title="Go to What is Design?"><span class="chapter">What is Design?</span>
+      <span class="toc-page">04</span></a>
+    </li>
+    <li>
+      <a href="#" title="Go to What is Beauty?"><span class="chapter">What is Beauty?</span>
+      <span class="toc-page">08</span></a>
+      <ol>
+        <li><a href="#" title="Go to Harmony"><span class="chapter">Harmony</span>
+          <span class="toc-page">12</span></a>
+        </li>
+        <li><a href="#" title="Go to Simplicity vs. Clarity"><span class="chapter">Simplicity vs. Clarity</span>
+          <span class="toc-page">14</span></a>
+        </li>
+      </ol>
+    </li>
+  </ol>
+</div>
    +
    + +
    + Source: modules/_toc.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-buttons.html b/doc/styleguide/section-buttons.html index 4b53604..80e5ccc 100644 --- a/doc/styleguide/section-buttons.html +++ b/doc/styleguide/section-buttons.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 4 + 5 #Buttons diff --git a/doc/styleguide/section-cards.html b/doc/styleguide/section-cards.html index 7d1d3cb..40456f5 100644 --- a/doc/styleguide/section-cards.html +++ b/doc/styleguide/section-cards.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 5 + 6 #Cards diff --git a/doc/styleguide/section-elements.html b/doc/styleguide/section-elements.html index e17eb5c..e3e56be 100644 --- a/doc/styleguide/section-elements.html +++ b/doc/styleguide/section-elements.html @@ -41,24 +41,35 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements @@ -125,7 +146,7 @@

    - 6 + 7 #Elements @@ -140,13 +161,114 @@ +
    + +
    +

    + + + 7.1 + + #Elements.Tables + + + Tables + +

    + + +
    + +
    +
    + Example +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    PlansGoodBetterAwesome
    PriceFree$6$10
    Access to exclusive contentNoNoYes
    Screens you can watch on at the same time12Unlimited
    +
    +
    + +
    + +
    + + Markup + + 
    <table>
+  <thead>
+   <tr>
+     <th>Plans</th>
+     <th>Good</th>
+     <th>Better</th>
+     <th>Awesome</th>
+   </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Price</td>
+      <td>Free</td>
+      <td>$6</td>
+      <td>$10</td>
+    </tr>
+    <tr>
+      <td>Access to exclusive content</td>
+      <td>No</td>
+      <td>No</td>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <td>Screens you can watch on at the same time</td>
+      <td>1</td>
+      <td>2</td>
+      <td>Unlimited</td>
+    </tr>
+  </tbody>
+</table>
    +
    + +
    + Source: modules/_tables.scss, line 1 +
    + +

    - 6.1 + 7.2 #Elements.Try diff --git a/doc/styleguide/section-flexblock.html b/doc/styleguide/section-flexblock.html index 396f865..9c20571 100644 --- a/doc/styleguide/section-flexblock.html +++ b/doc/styleguide/section-flexblock.html @@ -41,89 +41,94 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock @@ -185,7 +200,7 @@

    - 7 + 8 #Flexblock @@ -206,7 +221,7 @@

    - 7.1 + 8.1 #Flexblock.Activity @@ -337,7 +352,7 @@

    - 7.2 + 8.2 #Flexblock.Blink @@ -491,7 +506,7 @@

    - 7.3 + 8.3 #Flexblock.Clients @@ -620,7 +635,7 @@

    - 7.4 + 8.4 #Flexblock.Features @@ -746,7 +761,7 @@

    - 7.5 + 8.5 #Flexblock.Gallery @@ -861,7 +876,7 @@

    - 7.5.1 + 8.5.1 #Flexblock.Gallery.Overlay @@ -964,7 +979,7 @@

    - 7.6 + 8.6 #Flexblock.Metrics @@ -1072,7 +1087,7 @@

    - 7.7 + 8.7 #Flexblock.Plans @@ -1225,7 +1240,7 @@

    - 7.8 + 8.8 #Flexblock.Reasons @@ -1290,7 +1305,7 @@

    - 7.9 + 8.9 #Flexblock.Specs @@ -1375,7 +1390,7 @@

    - 7.10 + 8.10 #Flexblock.Steps diff --git a/doc/styleguide/section-forms.html b/doc/styleguide/section-forms.html index c641059..1a1761e 100644 --- a/doc/styleguide/section-forms.html +++ b/doc/styleguide/section-forms.html @@ -41,34 +41,39 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms @@ -125,7 +140,7 @@

    - 8 + 9 #Forms @@ -146,7 +161,7 @@

    - 8.1 + 9.1 #Forms.User diff --git a/doc/styleguide/section-grid.html b/doc/styleguide/section-grid.html index 3d99c62..bb72ad6 100644 --- a/doc/styleguide/section-grid.html +++ b/doc/styleguide/section-grid.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 9 + 10 #Grid diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html index e94c514..6c8d06e 100644 --- a/doc/styleguide/section-layout.html +++ b/doc/styleguide/section-layout.html @@ -41,62 +41,67 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout @@ -143,7 +158,7 @@

    - 10 + 11 #Layout @@ -164,7 +179,7 @@

    - 10.1 + 11.1 #Layout.Alignment @@ -255,7 +270,7 @@

    - 10.2 + 11.2 #Layout.Radius @@ -306,7 +321,7 @@

    - 10.3 + 11.3 #Layout.Shadow @@ -357,7 +372,7 @@

    - 10.4 + 11.4 #Layout.Sizes diff --git a/doc/styleguide/section-longform.html b/doc/styleguide/section-longform.html index f2c23b2..0b1bd21 100644 --- a/doc/styleguide/section-longform.html +++ b/doc/styleguide/section-longform.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 11 + 12 #Longform diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html index 08fe170..a23e13c 100644 --- a/doc/styleguide/section-media.html +++ b/doc/styleguide/section-media.html @@ -41,60 +41,65 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media @@ -131,7 +146,7 @@

    - 12 + 13 #Media @@ -152,7 +167,7 @@

    - 12.1 + 13.1 #Media.Embed @@ -211,7 +226,7 @@

    - 12.1 + 13.1 #Media.Embed diff --git a/doc/styleguide/section-navigation.html b/doc/styleguide/section-navigation.html index 11f4b9b..f2fe872 100644 --- a/doc/styleguide/section-navigation.html +++ b/doc/styleguide/section-navigation.html @@ -41,69 +41,84 @@ 3Base

    • +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 13 + 14 #Navigation diff --git a/doc/styleguide/section-screenshots.html b/doc/styleguide/section-screenshots.html index ec6e9c6..0e82e93 100644 --- a/doc/styleguide/section-screenshots.html +++ b/doc/styleguide/section-screenshots.html @@ -41,69 +41,84 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography
    • @@ -117,7 +132,7 @@

    - 14 + 15 #Screenshots diff --git a/doc/styleguide/section-slide.html b/doc/styleguide/section-slide.html index edd5753..bdfe500 100644 --- a/doc/styleguide/section-slide.html +++ b/doc/styleguide/section-slide.html @@ -41,89 +41,104 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides + +
  • - 16Typography + 18Typography
    • @@ -137,7 +152,7 @@

    - 15 + 16 #Slide @@ -158,7 +173,7 @@

    - 15.1 + 16.1 #Slide.Background @@ -352,7 +367,7 @@

    - 15.1.1 + 16.1.1 #Slide.Background.Anim @@ -399,7 +414,7 @@

    - 15.1.2 + 16.1.2 #Slide.Background.Video diff --git a/doc/styleguide/section-slides.html b/doc/styleguide/section-slides.html new file mode 100644 index 0000000..2addc19 --- /dev/null +++ b/doc/styleguide/section-slides.html @@ -0,0 +1,430 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 17 + + #Slides + + + fullscreen + +

    + +
    +

    Slide with no padding (full card, .embed youtube video...)

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

    Content

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section>
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 43 +
    + +
    +
    + +
    +

    + + + 17 + + #Slides + + + Slides + +

    + +
    +

    Fullscreen. Vertically and horizontally centered. +Fade transition to all slides. +All HTML elements will have those styles

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

    Content

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section>
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 1 +
    + +
    +
    + +
    +

    + + + 17.1 + + #Slides.Bottom + + + Align bottom + +

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

    Content

    +
    +
    +
    + +
    + Slide alignment +
    +
    + bottom +
    +
    +
    +

    Content

    +
    +
    +
    +
    + +
    + + Markup + + 
    <section class="slide-bottom">
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 74 +
    + +
    +
    + +
    +

    + + + 17.2 + + #Slides.Top + + + Align top + +

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

    Content

    +
    +
    +
    + +
    + Slide alignment +
    +
    + top +
    +
    +
    +

    Content

    +
    +
    +
    +
    + +
    + + Markup + + 
    <section class="slide-top">
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 60 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-typography.html b/doc/styleguide/section-typography.html index 11fef0e..77e8e00 100644 --- a/doc/styleguide/section-typography.html +++ b/doc/styleguide/section-typography.html @@ -41,164 +41,179 @@ 3Base +
  • + + 4Blocks + +
  • - 4Buttons + 5Buttons
  • - 5Cards + 6Cards
  • - 6Elements + 7Elements
  • - 7Flexblock + 8Flexblock
  • - 8Forms + 9Forms
  • - 9Grid + 10Grid
  • - 10Layout + 11Layout
  • - 11Longform + 12Longform
  • - 12Media + 13Media
  • - 13Navigation + 14Navigation
  • - 14Screenshots + 15Screenshots
  • - 15Slide + 16Slide + +
    • +
  • + + 17fullscreen + +
    • +
  • + + 17Slides
  • - 16Typography + 18Typography