diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html index 557a4e3..28f1e68 100644 --- a/doc/styleguide/index.html +++ b/doc/styleguide/index.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-avatars.html b/doc/styleguide/item-avatars.html index 2f18648..509f014 100644 --- a/doc/styleguide/item-avatars.html +++ b/doc/styleguide/item-avatars.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-badgets.html b/doc/styleguide/item-badgets.html index 0437b88..dc27587 100644 --- a/doc/styleguide/item-badgets.html +++ b/doc/styleguide/item-badgets.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-base-backgrounds-gradient.html b/doc/styleguide/item-base-backgrounds-gradient.html index 8d646d9..53e819c 100644 --- a/doc/styleguide/item-base-backgrounds-gradient.html +++ b/doc/styleguide/item-base-backgrounds-gradient.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-base-backgrounds-transparent.html b/doc/styleguide/item-base-backgrounds-transparent.html index 8f65b6a..18b4a06 100644 --- a/doc/styleguide/item-base-backgrounds-transparent.html +++ b/doc/styleguide/item-base-backgrounds-transparent.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-base-backgrounds.html b/doc/styleguide/item-base-backgrounds.html index 8f3724c..ec1c3a2 100644 --- a/doc/styleguide/item-base-backgrounds.html +++ b/doc/styleguide/item-base-backgrounds.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-base.html b/doc/styleguide/item-base.html index fa503ea..b6fb773 100644 --- a/doc/styleguide/item-base.html +++ b/doc/styleguide/item-base.html @@ -96,19 +96,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-buttons.html b/doc/styleguide/item-buttons.html index 5c08ee7..0780b95 100644 --- a/doc/styleguide/item-buttons.html +++ b/doc/styleguide/item-buttons.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-cards.html b/doc/styleguide/item-cards.html index c725f90..c748891 100644 --- a/doc/styleguide/item-cards.html +++ b/doc/styleguide/item-cards.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-elements-try.html b/doc/styleguide/item-elements-try.html index 6287cbd..58d1c74 100644 --- a/doc/styleguide/item-elements-try.html +++ b/doc/styleguide/item-elements-try.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-elements.html b/doc/styleguide/item-elements.html index 799ebed..fb33cd0 100644 --- a/doc/styleguide/item-elements.html +++ b/doc/styleguide/item-elements.html @@ -84,19 +84,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-activity.html b/doc/styleguide/item-flexblock-activity.html index 64710e2..c72e21c 100644 --- a/doc/styleguide/item-flexblock-activity.html +++ b/doc/styleguide/item-flexblock-activity.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-blink.html b/doc/styleguide/item-flexblock-blink.html index 37624e6..6ced92a 100644 --- a/doc/styleguide/item-flexblock-blink.html +++ b/doc/styleguide/item-flexblock-blink.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-clients.html b/doc/styleguide/item-flexblock-clients.html index 2afaa07..5324f6e 100644 --- a/doc/styleguide/item-flexblock-clients.html +++ b/doc/styleguide/item-flexblock-clients.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-features.html b/doc/styleguide/item-flexblock-features.html index fe74adc..2918931 100644 --- a/doc/styleguide/item-flexblock-features.html +++ b/doc/styleguide/item-flexblock-features.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-gallery-overlay.html b/doc/styleguide/item-flexblock-gallery-overlay.html index c148c8a..582867d 100644 --- a/doc/styleguide/item-flexblock-gallery-overlay.html +++ b/doc/styleguide/item-flexblock-gallery-overlay.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-gallery.html b/doc/styleguide/item-flexblock-gallery.html index 7bcc583..7f0c46e 100644 --- a/doc/styleguide/item-flexblock-gallery.html +++ b/doc/styleguide/item-flexblock-gallery.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-metrics.html b/doc/styleguide/item-flexblock-metrics.html index cf5ee87..e988204 100644 --- a/doc/styleguide/item-flexblock-metrics.html +++ b/doc/styleguide/item-flexblock-metrics.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-plans.html b/doc/styleguide/item-flexblock-plans.html index c78fcaf..b0694fa 100644 --- a/doc/styleguide/item-flexblock-plans.html +++ b/doc/styleguide/item-flexblock-plans.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-reasons.html b/doc/styleguide/item-flexblock-reasons.html index 3b0e84a..8981171 100644 --- a/doc/styleguide/item-flexblock-reasons.html +++ b/doc/styleguide/item-flexblock-reasons.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-specs.html b/doc/styleguide/item-flexblock-specs.html index 2f4ba53..6c58522 100644 --- a/doc/styleguide/item-flexblock-specs.html +++ b/doc/styleguide/item-flexblock-specs.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock-steps.html b/doc/styleguide/item-flexblock-steps.html index ad759f3..b70e9d3 100644 --- a/doc/styleguide/item-flexblock-steps.html +++ b/doc/styleguide/item-flexblock-steps.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-flexblock.html b/doc/styleguide/item-flexblock.html index 9569335..03c7923 100644 --- a/doc/styleguide/item-flexblock.html +++ b/doc/styleguide/item-flexblock.html @@ -144,19 +144,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-forms-user.html b/doc/styleguide/item-forms-user.html index feda1f9..5a40e76 100644 --- a/doc/styleguide/item-forms-user.html +++ b/doc/styleguide/item-forms-user.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-forms.html b/doc/styleguide/item-forms.html index 1445632..46655ca 100644 --- a/doc/styleguide/item-forms.html +++ b/doc/styleguide/item-forms.html @@ -84,19 +84,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-grid.html b/doc/styleguide/item-grid.html index d72e2dd..ea5daaa 100644 --- a/doc/styleguide/item-grid.html +++ b/doc/styleguide/item-grid.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-layout-alignment.html index 1f76ee6..1ceb1b1 100644 --- a/doc/styleguide/item-layout-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-layout-radius.html b/doc/styleguide/item-layout-radius.html index 1c70854..00ba2af 100644 --- a/doc/styleguide/item-layout-radius.html +++ b/doc/styleguide/item-layout-radius.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-layout-shadow.html b/doc/styleguide/item-layout-shadow.html index 6fb1f0b..262e9ba 100644 --- a/doc/styleguide/item-layout-shadow.html +++ b/doc/styleguide/item-layout-shadow.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-layout-sizes.html index bd4db13..6df313b 100644 --- a/doc/styleguide/item-layout-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html index 0fb06fb..0a20a27 100644 --- a/doc/styleguide/item-layout.html +++ b/doc/styleguide/item-layout.html @@ -102,19 +102,34 @@ +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/item-longform.html b/doc/styleguide/item-longform.html new file mode 100644 index 0000000..45319f4 --- /dev/null +++ b/doc/styleguide/item-longform.html @@ -0,0 +1,194 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 11 + + #Longform + + + Longform + +

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

    Lorem ipsum

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section class="wrap longform">
+  <p>Lorem ipsum</p>
+</section>
    +
    + +
    + Source: modules/_longform.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html new file mode 100644 index 0000000..ab486ec --- /dev/null +++ b/doc/styleguide/item-media-embed.html @@ -0,0 +1,207 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 12.1 + + #Media.Embed + + + Fullscreen + +

    + +
    +

    Responsive background video +https://fvsch.com/code/video-background/

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    +
    + +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+    </video>
+  </div>
+</div>
    +
    + +
    + Source: modules/_media.scss, line 35 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html new file mode 100644 index 0000000..d428d49 --- /dev/null +++ b/doc/styleguide/item-media.html @@ -0,0 +1,182 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 12 + + #Media + + + Media + +

    + + +
    + + + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-navigation.html b/doc/styleguide/item-navigation.html new file mode 100644 index 0000000..49263ec --- /dev/null +++ b/doc/styleguide/item-navigation.html @@ -0,0 +1,302 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 13 + + #Navigation + + + Navigation + +

    + +
    +

    Responsive Media (videos, iframe...)

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .navbar +
    +
    + Navigation bar +
    +
    + +
    +
    +
    + .aligncenter +
    +
    + Center alignment +
    +
    + +
    +
    +
    + .alignright +
    +
    + Right alignment +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <nav role="navigation" class="[modifier class]">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
    +
    + +
    + Source: modules/_navigation.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-screenshots.html b/doc/styleguide/item-screenshots.html index 9d06d9f..9f94fc4 100644 --- a/doc/styleguide/item-screenshots.html +++ b/doc/styleguide/item-screenshots.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 11 + 14 #Screenshots diff --git a/doc/styleguide/item-slide-background-anim.html b/doc/styleguide/item-slide-background-anim.html index 63d789b..451c0cc 100644 --- a/doc/styleguide/item-slide-background-anim.html +++ b/doc/styleguide/item-slide-background-anim.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 12.1.1 + 15.1.1 #Slide.Background.Anim diff --git a/doc/styleguide/item-slide-background-video.html b/doc/styleguide/item-slide-background-video.html index 6d5459e..769b905 100644 --- a/doc/styleguide/item-slide-background-video.html +++ b/doc/styleguide/item-slide-background-video.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 12.1.2 + 15.1.2 #Slide.Background.Video diff --git a/doc/styleguide/item-slide-background.html b/doc/styleguide/item-slide-background.html index a5bba60..3da3799 100644 --- a/doc/styleguide/item-slide-background.html +++ b/doc/styleguide/item-slide-background.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 12.1 + 15.1 #Slide.Background diff --git a/doc/styleguide/item-slide.html b/doc/styleguide/item-slide.html index 1f6f3c5..bbebe69 100644 --- a/doc/styleguide/item-slide.html +++ b/doc/styleguide/item-slide.html @@ -76,31 +76,46 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide @@ -122,7 +137,7 @@

    - 12 + 15 #Slide diff --git a/doc/styleguide/item-typography-columns.html b/doc/styleguide/item-typography-columns.html index 27cd942..aaed8fd 100644 --- a/doc/styleguide/item-typography-columns.html +++ b/doc/styleguide/item-typography-columns.html @@ -76,19 +76,34 @@ 10Layout

    • +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.1 + 16.1 #Typography.Columns diff --git a/doc/styleguide/item-typography-context.html b/doc/styleguide/item-typography-context.html index a50ee50..a40aa40 100644 --- a/doc/styleguide/item-typography-context.html +++ b/doc/styleguide/item-typography-context.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.2 + 16.2 #Typography.Context diff --git a/doc/styleguide/item-typography-data.html b/doc/styleguide/item-typography-data.html index 66ca1c0..f571f6f 100644 --- a/doc/styleguide/item-typography-data.html +++ b/doc/styleguide/item-typography-data.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.3 + 16.3 #Typography.Data diff --git a/doc/styleguide/item-typography-emoji.html b/doc/styleguide/item-typography-emoji.html index 7092c49..acd7b7b 100644 --- a/doc/styleguide/item-typography-emoji.html +++ b/doc/styleguide/item-typography-emoji.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.4 + 16.4 #Typography.Emoji diff --git a/doc/styleguide/item-typography-info.html b/doc/styleguide/item-typography-info.html index 7c433c2..e67670c 100644 --- a/doc/styleguide/item-typography-info.html +++ b/doc/styleguide/item-typography-info.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.5 + 16.5 #Typography.Info diff --git a/doc/styleguide/item-typography-interviews.html b/doc/styleguide/item-typography-interviews.html index d928a4c..5049957 100644 --- a/doc/styleguide/item-typography-interviews.html +++ b/doc/styleguide/item-typography-interviews.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.6 + 16.6 #Typography.Interviews diff --git a/doc/styleguide/item-typography-intro.html b/doc/styleguide/item-typography-intro.html index fba8610..db37240 100644 --- a/doc/styleguide/item-typography-intro.html +++ b/doc/styleguide/item-typography-intro.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.7 + 16.7 #Typography.Intro diff --git a/doc/styleguide/item-typography-label.html b/doc/styleguide/item-typography-label.html index ecb3204..6f6470c 100644 --- a/doc/styleguide/item-typography-label.html +++ b/doc/styleguide/item-typography-label.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.8 + 16.8 #Typography.Label diff --git a/doc/styleguide/item-typography-landings.html b/doc/styleguide/item-typography-landings.html index 0a66baf..54726ea 100644 --- a/doc/styleguide/item-typography-landings.html +++ b/doc/styleguide/item-typography-landings.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.9 + 16.9 #Typography.Landings diff --git a/doc/styleguide/item-typography-lowercase.html b/doc/styleguide/item-typography-lowercase.html index 5e9abf6..08ed5f6 100644 --- a/doc/styleguide/item-typography-lowercase.html +++ b/doc/styleguide/item-typography-lowercase.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.10 + 16.10 #Typography.Lowercase diff --git a/doc/styleguide/item-typography-pull_quote.html b/doc/styleguide/item-typography-pull_quote.html index beb38d2..586a337 100644 --- a/doc/styleguide/item-typography-pull_quote.html +++ b/doc/styleguide/item-typography-pull_quote.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.11 + 16.11 #Typography.Pull_Quote diff --git a/doc/styleguide/item-typography-separator.html b/doc/styleguide/item-typography-separator.html index f67638d..de8ab7b 100644 --- a/doc/styleguide/item-typography-separator.html +++ b/doc/styleguide/item-typography-separator.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.12 + 16.12 #Typography.Separator diff --git a/doc/styleguide/item-typography-serif.html b/doc/styleguide/item-typography-serif.html index 46c5d99..a67ec8f 100644 --- a/doc/styleguide/item-typography-serif.html +++ b/doc/styleguide/item-typography-serif.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.13 + 16.13 #Typography.Serif diff --git a/doc/styleguide/item-typography-subtitle.html b/doc/styleguide/item-typography-subtitle.html index 46747f1..3e55833 100644 --- a/doc/styleguide/item-typography-subtitle.html +++ b/doc/styleguide/item-typography-subtitle.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.14 + 16.14 #Typography.Subtitle diff --git a/doc/styleguide/item-typography-symbols.html b/doc/styleguide/item-typography-symbols.html index 17243bf..aff1091 100644 --- a/doc/styleguide/item-typography-symbols.html +++ b/doc/styleguide/item-typography-symbols.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.15 + 16.15 #Typography.Symbols diff --git a/doc/styleguide/item-typography-uppercase.html b/doc/styleguide/item-typography-uppercase.html index a2f5991..b8ddc30 100644 --- a/doc/styleguide/item-typography-uppercase.html +++ b/doc/styleguide/item-typography-uppercase.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 13.16 + 16.16 #Typography.Uppercase diff --git a/doc/styleguide/item-typography.html b/doc/styleguide/item-typography.html index 019b70e..7249205 100644 --- a/doc/styleguide/item-typography.html +++ b/doc/styleguide/item-typography.html @@ -76,114 +76,129 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography diff --git a/doc/styleguide/section-badgets.html b/doc/styleguide/section-badgets.html index 140db95..aa45220 100644 --- a/doc/styleguide/section-badgets.html +++ b/doc/styleguide/section-badgets.html @@ -76,19 +76,34 @@ 10Layout
    • +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-base.html b/doc/styleguide/section-base.html index e91a682..2169287 100644 --- a/doc/styleguide/section-base.html +++ b/doc/styleguide/section-base.html @@ -96,19 +96,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-buttons.html b/doc/styleguide/section-buttons.html index 60e98d3..4b53604 100644 --- a/doc/styleguide/section-buttons.html +++ b/doc/styleguide/section-buttons.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-cards.html b/doc/styleguide/section-cards.html index cc7109a..7d1d3cb 100644 --- a/doc/styleguide/section-cards.html +++ b/doc/styleguide/section-cards.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-elements.html b/doc/styleguide/section-elements.html index 2d58cdf..e17eb5c 100644 --- a/doc/styleguide/section-elements.html +++ b/doc/styleguide/section-elements.html @@ -84,19 +84,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-flexblock.html b/doc/styleguide/section-flexblock.html index c3464f2..396f865 100644 --- a/doc/styleguide/section-flexblock.html +++ b/doc/styleguide/section-flexblock.html @@ -144,19 +144,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-forms.html b/doc/styleguide/section-forms.html index b6b4aff..c641059 100644 --- a/doc/styleguide/section-forms.html +++ b/doc/styleguide/section-forms.html @@ -84,19 +84,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-grid.html b/doc/styleguide/section-grid.html index 75141d9..3d99c62 100644 --- a/doc/styleguide/section-grid.html +++ b/doc/styleguide/section-grid.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html index 1e3ad94..e94c514 100644 --- a/doc/styleguide/section-layout.html +++ b/doc/styleguide/section-layout.html @@ -102,19 +102,34 @@ +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • diff --git a/doc/styleguide/section-longform.html b/doc/styleguide/section-longform.html new file mode 100644 index 0000000..f2c23b2 --- /dev/null +++ b/doc/styleguide/section-longform.html @@ -0,0 +1,194 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 11 + + #Longform + + + Longform + +

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

    Lorem ipsum

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section class="wrap longform">
+  <p>Lorem ipsum</p>
+</section>
    +
    + +
    + Source: modules/_longform.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html new file mode 100644 index 0000000..08fe170 --- /dev/null +++ b/doc/styleguide/section-media.html @@ -0,0 +1,301 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 12 + + #Media + + + Media + +

    + + +
    + + + +
    +
    + +
    +

    + + + 12.1 + + #Media.Embed + + + Embed + +

    + +
    +

    Responsive Media (videos, iframe...)

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    +
    + +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+    </video>
+  </div>
+</div>
    +
    + +
    + Source: modules/_media.scss, line 1 +
    + +
    +
    + +
    +

    + + + 12.1 + + #Media.Embed + + + Fullscreen + +

    + +
    +

    Responsive background video +https://fvsch.com/code/video-background/

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    +
    + +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+      <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+    </video>
+  </div>
+</div>
    +
    + +
    + Source: modules/_media.scss, line 35 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-navigation.html b/doc/styleguide/section-navigation.html new file mode 100644 index 0000000..11f4b9b --- /dev/null +++ b/doc/styleguide/section-navigation.html @@ -0,0 +1,302 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 13 + + #Navigation + + + Navigation + +

    + +
    +

    Responsive Media (videos, iframe...)

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .navbar +
    +
    + Navigation bar +
    +
    + +
    +
    +
    + .aligncenter +
    +
    + Center alignment +
    +
    + +
    +
    +
    + .alignright +
    +
    + Right alignment +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <nav role="navigation" class="[modifier class]">
+  <ul>
+    <li><a href="">About</a></li>
+    <li><a href="">Clients</a></li>
+    <li class="facebook">
+      <a rel="external" href="https://facebook.com/webslides" title="Facebook">
+        Facebook
+      </a>
+    </li>
+    <li class="twitter">
+      <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+        @WebSlides
+      </a>
+    </li>
+  </ul>
+</nav>
    +
    + +
    + Source: modules/_navigation.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-screenshots.html b/doc/styleguide/section-screenshots.html index 8496fbb..ec6e9c6 100644 --- a/doc/styleguide/section-screenshots.html +++ b/doc/styleguide/section-screenshots.html @@ -76,19 +76,34 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography
    • @@ -102,7 +117,7 @@

    - 11 + 14 #Screenshots diff --git a/doc/styleguide/section-slide.html b/doc/styleguide/section-slide.html index 196f61e..edd5753 100644 --- a/doc/styleguide/section-slide.html +++ b/doc/styleguide/section-slide.html @@ -76,31 +76,46 @@ 10Layout +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide @@ -122,7 +137,7 @@

    - 12 + 15 #Slide @@ -143,7 +158,7 @@

    - 12.1 + 15.1 #Slide.Background @@ -337,7 +352,7 @@

    - 12.1.1 + 15.1.1 #Slide.Background.Anim @@ -384,7 +399,7 @@

    - 12.1.2 + 15.1.2 #Slide.Background.Video diff --git a/doc/styleguide/section-typography.html b/doc/styleguide/section-typography.html index 7f405a1..11fef0e 100644 --- a/doc/styleguide/section-typography.html +++ b/doc/styleguide/section-typography.html @@ -76,114 +76,129 @@ 10Layout

    • +
  • + + 11Longform + +
    • +
  • + + 12Media + +
    • +
  • + + 13Navigation + +
  • - 11Screenshots + 14Screenshots
  • - 12Slide + 15Slide
  • - 13Typography + 16Typography