diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html index 9665cf7..3447339 100644 --- a/doc/styleguide/index.html +++ b/doc/styleguide/index.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • diff --git a/doc/styleguide/item-avatars.html b/doc/styleguide/item-avatars.html index 64e09fb..ba222c2 100644 --- a/doc/styleguide/item-avatars.html +++ b/doc/styleguide/item-avatars.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • diff --git a/doc/styleguide/item-badgets.html b/doc/styleguide/item-badgets.html new file mode 100644 index 0000000..7e7d534 --- /dev/null +++ b/doc/styleguide/item-badgets.html @@ -0,0 +1,166 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2 + + #Badgets + + + Badges + +

    + +
    +

    App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...

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

    Google Play

    +

    App Store

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
    +
    + +
    + Source: modules/_badges.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-base-backgrounds-gradient.html b/doc/styleguide/item-base-backgrounds-gradient.html index a5082de..6a25b95 100644 --- a/doc/styleguide/item-base-backgrounds-gradient.html +++ b/doc/styleguide/item-base-backgrounds-gradient.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 2.1.1 + 3.1.1 #Base.backgrounds.gradient diff --git a/doc/styleguide/item-base-backgrounds-transparent.html b/doc/styleguide/item-base-backgrounds-transparent.html index eb30f7a..758887e 100644 --- a/doc/styleguide/item-base-backgrounds-transparent.html +++ b/doc/styleguide/item-base-backgrounds-transparent.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 2.1.2 + 3.1.2 #Base.backgrounds.transparent diff --git a/doc/styleguide/item-base-backgrounds.html b/doc/styleguide/item-base-backgrounds.html index 8d5e462..27e4e49 100644 --- a/doc/styleguide/item-base-backgrounds.html +++ b/doc/styleguide/item-base-backgrounds.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 2.1 + 3.1 #Base.backgrounds diff --git a/doc/styleguide/item-base.html b/doc/styleguide/item-base.html index 6f7b2df..0563451 100644 --- a/doc/styleguide/item-base.html +++ b/doc/styleguide/item-base.html @@ -31,49 +31,69 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards + +
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -87,7 +107,7 @@

    - 2 + 3 #Base diff --git a/doc/styleguide/item-browser.html b/doc/styleguide/item-browser.html new file mode 100644 index 0000000..fba6a60 --- /dev/null +++ b/doc/styleguide/item-browser.html @@ -0,0 +1,165 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 4 + + #Browser + + + Screenshots + +

    + +
    +

    HTML browser

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    + +
    Foddie
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <figure class="browser">
+  <img src="http://lorempixel.com/500/500/food/" />
+  <figcaption>Foddie</figcaption>
+</figure>
    +
    + +
    + Source: modules/_browser.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-buttons.html b/doc/styleguide/item-buttons.html new file mode 100644 index 0000000..b6271a6 --- /dev/null +++ b/doc/styleguide/item-buttons.html @@ -0,0 +1,160 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 4 + + #Buttons + + + Buttons + +

    + + +
    + +
    +
    + Example +
    + + +
    + Download +
    +
    + +
    + +
    + + Markup + + 
    <a href="#" class="button">Download</a>
    +
    + +
    + Source: modules/_button.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-cards.html b/doc/styleguide/item-cards.html new file mode 100644 index 0000000..62a4ca3 --- /dev/null +++ b/doc/styleguide/item-cards.html @@ -0,0 +1,178 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 5 + + #Cards + + + Cards + +

    + +
    +

    Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    +
    iPhone
    +
    +

    iPhone 7

    +

    3D Touch, 12MP photos, and 4K video.

    +

    Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
      <div class="card-50">
+    <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
+    <div class="flex-content">
+      <h2>iPhone 7</h2>
+      <p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
+      <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
+    </div>
+  </div>
    +
    + +
    + Source: modules/_cards.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-activity.html b/doc/styleguide/item-flexblock-activity.html index eba16ea..4914e00 100644 --- a/doc/styleguide/item-flexblock-activity.html +++ b/doc/styleguide/item-flexblock-activity.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.1 + 6.1 #Flexblock.Activity diff --git a/doc/styleguide/item-flexblock-blink.html b/doc/styleguide/item-flexblock-blink.html index abdb238..923351a 100644 --- a/doc/styleguide/item-flexblock-blink.html +++ b/doc/styleguide/item-flexblock-blink.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.2 + 6.2 #Flexblock.Blink diff --git a/doc/styleguide/item-flexblock-clients.html b/doc/styleguide/item-flexblock-clients.html index 6ea8bc3..e4b0a66 100644 --- a/doc/styleguide/item-flexblock-clients.html +++ b/doc/styleguide/item-flexblock-clients.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.3 + 6.3 #Flexblock.Clients diff --git a/doc/styleguide/item-flexblock-features.html b/doc/styleguide/item-flexblock-features.html index 4cbb803..ae91971 100644 --- a/doc/styleguide/item-flexblock-features.html +++ b/doc/styleguide/item-flexblock-features.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.4 + 6.4 #Flexblock.Features diff --git a/doc/styleguide/item-flexblock-gallery-overlay.html b/doc/styleguide/item-flexblock-gallery-overlay.html index f65add3..650b435 100644 --- a/doc/styleguide/item-flexblock-gallery-overlay.html +++ b/doc/styleguide/item-flexblock-gallery-overlay.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.5.1 + 6.5.1 #Flexblock.Gallery.Overlay diff --git a/doc/styleguide/item-flexblock-gallery.html b/doc/styleguide/item-flexblock-gallery.html index 766bb40..8197d8a 100644 --- a/doc/styleguide/item-flexblock-gallery.html +++ b/doc/styleguide/item-flexblock-gallery.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.5 + 6.5 #Flexblock.Gallery diff --git a/doc/styleguide/item-flexblock-metrics.html b/doc/styleguide/item-flexblock-metrics.html index 1bb3b76..6fb6b8d 100644 --- a/doc/styleguide/item-flexblock-metrics.html +++ b/doc/styleguide/item-flexblock-metrics.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.6 + 6.6 #Flexblock.Metrics diff --git a/doc/styleguide/item-flexblock-plans.html b/doc/styleguide/item-flexblock-plans.html index f41cb45..a2cce16 100644 --- a/doc/styleguide/item-flexblock-plans.html +++ b/doc/styleguide/item-flexblock-plans.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.7 + 6.7 #Flexblock.Plans diff --git a/doc/styleguide/item-flexblock-reasons.html b/doc/styleguide/item-flexblock-reasons.html index d1d1ae4..8dee3f5 100644 --- a/doc/styleguide/item-flexblock-reasons.html +++ b/doc/styleguide/item-flexblock-reasons.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.8 + 6.8 #Flexblock.Reasons diff --git a/doc/styleguide/item-flexblock-specs.html b/doc/styleguide/item-flexblock-specs.html index 74462ee..d7893a3 100644 --- a/doc/styleguide/item-flexblock-specs.html +++ b/doc/styleguide/item-flexblock-specs.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.9 + 6.9 #Flexblock.Specs diff --git a/doc/styleguide/item-flexblock-steps.html b/doc/styleguide/item-flexblock-steps.html index 2ebab2a..82f4d03 100644 --- a/doc/styleguide/item-flexblock-steps.html +++ b/doc/styleguide/item-flexblock-steps.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 3.10 + 6.10 #Flexblock.Steps diff --git a/doc/styleguide/item-flexblock.html b/doc/styleguide/item-flexblock.html index 8538fb1..13804a9 100644 --- a/doc/styleguide/item-flexblock.html +++ b/doc/styleguide/item-flexblock.html @@ -31,79 +31,94 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock @@ -135,7 +155,7 @@

    - 3 + 6 #Flexblock diff --git a/doc/styleguide/item-layout-alignment.html b/doc/styleguide/item-layout-alignment.html index 9435abc..3b443de 100644 --- a/doc/styleguide/item-layout-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -31,29 +31,49 @@ 1Avatars

    • +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 4.1 + 7.1 #Layout.Alignment diff --git a/doc/styleguide/item-layout-radius.html b/doc/styleguide/item-layout-radius.html index e9ed144..c99c9a6 100644 --- a/doc/styleguide/item-layout-radius.html +++ b/doc/styleguide/item-layout-radius.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 4.2 + 7.2 #Layout.Radius diff --git a/doc/styleguide/item-layout-shadow.html b/doc/styleguide/item-layout-shadow.html index edd468a..8de46e9 100644 --- a/doc/styleguide/item-layout-shadow.html +++ b/doc/styleguide/item-layout-shadow.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 4.3 + 7.3 #Layout.Shadow diff --git a/doc/styleguide/item-layout-sizes.html b/doc/styleguide/item-layout-sizes.html index 1db8f11..ca17ba9 100644 --- a/doc/styleguide/item-layout-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 4.4 + 7.4 #Layout.Sizes diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html index acbd030..de2a45f 100644 --- a/doc/styleguide/item-layout.html +++ b/doc/styleguide/item-layout.html @@ -31,55 +31,75 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout
    • +
  • + + 8Screenshots + +
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -93,7 +113,7 @@

    - 4 + 7 #Layout diff --git a/doc/styleguide/item-screenshots.html b/doc/styleguide/item-screenshots.html new file mode 100644 index 0000000..004006d --- /dev/null +++ b/doc/styleguide/item-screenshots.html @@ -0,0 +1,170 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 8 + + #Screenshots + + + Screenshots + +

    + +
    +

    HTML browser

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    + +
    Foddie
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <figure class="browser">
+  <img src="http://lorempixel.com/500/500/food/" />
+  <figcaption>Foddie</figcaption>
+</figure>
    +
    + +
    + Source: modules/_browser.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-slide-background-anim.html b/doc/styleguide/item-slide-background-anim.html index e2eece3..85b3a88 100644 --- a/doc/styleguide/item-slide-background-anim.html +++ b/doc/styleguide/item-slide-background-anim.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 5.1.1 + 9.1.1 #Slide.Background.Anim diff --git a/doc/styleguide/item-slide-background-video.html b/doc/styleguide/item-slide-background-video.html index 8eae8f9..5db009b 100644 --- a/doc/styleguide/item-slide-background-video.html +++ b/doc/styleguide/item-slide-background-video.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 5.1.2 + 9.1.2 #Slide.Background.Video diff --git a/doc/styleguide/item-slide-background.html b/doc/styleguide/item-slide-background.html index d92ffe3..f4b56c0 100644 --- a/doc/styleguide/item-slide-background.html +++ b/doc/styleguide/item-slide-background.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 5.1 + 9.1 #Slide.Background diff --git a/doc/styleguide/item-slide.html b/doc/styleguide/item-slide.html index 28d4f22..81313d5 100644 --- a/doc/styleguide/item-slide.html +++ b/doc/styleguide/item-slide.html @@ -31,41 +31,61 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide @@ -87,7 +107,7 @@

    - 5 + 9 #Slide diff --git a/doc/styleguide/item-typography-columns.html b/doc/styleguide/item-typography-columns.html index ffbc6ca..cda5460 100644 --- a/doc/styleguide/item-typography-columns.html +++ b/doc/styleguide/item-typography-columns.html @@ -31,29 +31,49 @@ 1Avatars

    • +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.1 + 10.1 #Typography.Columns diff --git a/doc/styleguide/item-typography-context.html b/doc/styleguide/item-typography-context.html index 3de6fd5..48f6ec9 100644 --- a/doc/styleguide/item-typography-context.html +++ b/doc/styleguide/item-typography-context.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.2 + 10.2 #Typography.Context diff --git a/doc/styleguide/item-typography-data.html b/doc/styleguide/item-typography-data.html index 1080d8f..d6445e3 100644 --- a/doc/styleguide/item-typography-data.html +++ b/doc/styleguide/item-typography-data.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.3 + 10.3 #Typography.Data diff --git a/doc/styleguide/item-typography-emoji.html b/doc/styleguide/item-typography-emoji.html index 0a07479..3a1231d 100644 --- a/doc/styleguide/item-typography-emoji.html +++ b/doc/styleguide/item-typography-emoji.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.4 + 10.4 #Typography.Emoji diff --git a/doc/styleguide/item-typography-info.html b/doc/styleguide/item-typography-info.html index e3efd04..9cd11f1 100644 --- a/doc/styleguide/item-typography-info.html +++ b/doc/styleguide/item-typography-info.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.5 + 10.5 #Typography.Info diff --git a/doc/styleguide/item-typography-interviews.html b/doc/styleguide/item-typography-interviews.html index 57871f1..80a0401 100644 --- a/doc/styleguide/item-typography-interviews.html +++ b/doc/styleguide/item-typography-interviews.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.6 + 10.6 #Typography.Interviews diff --git a/doc/styleguide/item-typography-intro.html b/doc/styleguide/item-typography-intro.html index 04b8534..4b39a5a 100644 --- a/doc/styleguide/item-typography-intro.html +++ b/doc/styleguide/item-typography-intro.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.7 + 10.7 #Typography.Intro diff --git a/doc/styleguide/item-typography-label.html b/doc/styleguide/item-typography-label.html index f5073cd..ab7722d 100644 --- a/doc/styleguide/item-typography-label.html +++ b/doc/styleguide/item-typography-label.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.8 + 10.8 #Typography.Label diff --git a/doc/styleguide/item-typography-landings.html b/doc/styleguide/item-typography-landings.html index 9b0c93e..7a24d40 100644 --- a/doc/styleguide/item-typography-landings.html +++ b/doc/styleguide/item-typography-landings.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.9 + 10.9 #Typography.Landings diff --git a/doc/styleguide/item-typography-lowercase.html b/doc/styleguide/item-typography-lowercase.html index 7b33245..e594aaa 100644 --- a/doc/styleguide/item-typography-lowercase.html +++ b/doc/styleguide/item-typography-lowercase.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.10 + 10.10 #Typography.Lowercase diff --git a/doc/styleguide/item-typography-pull_quote.html b/doc/styleguide/item-typography-pull_quote.html index 6ab1aca..6f6634d 100644 --- a/doc/styleguide/item-typography-pull_quote.html +++ b/doc/styleguide/item-typography-pull_quote.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.11 + 10.11 #Typography.Pull_Quote diff --git a/doc/styleguide/item-typography-separator.html b/doc/styleguide/item-typography-separator.html index 5eb5326..f911639 100644 --- a/doc/styleguide/item-typography-separator.html +++ b/doc/styleguide/item-typography-separator.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.12 + 10.12 #Typography.Separator diff --git a/doc/styleguide/item-typography-serif.html b/doc/styleguide/item-typography-serif.html index b883aad..d114109 100644 --- a/doc/styleguide/item-typography-serif.html +++ b/doc/styleguide/item-typography-serif.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.13 + 10.13 #Typography.Serif diff --git a/doc/styleguide/item-typography-subtitle.html b/doc/styleguide/item-typography-subtitle.html index 3f24a9f..128de7e 100644 --- a/doc/styleguide/item-typography-subtitle.html +++ b/doc/styleguide/item-typography-subtitle.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.14 + 10.14 #Typography.Subtitle diff --git a/doc/styleguide/item-typography-symbols.html b/doc/styleguide/item-typography-symbols.html index 3e9df64..9750c04 100644 --- a/doc/styleguide/item-typography-symbols.html +++ b/doc/styleguide/item-typography-symbols.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.15 + 10.15 #Typography.Symbols diff --git a/doc/styleguide/item-typography-uppercase.html b/doc/styleguide/item-typography-uppercase.html index 1b1e841..6b6b5c6 100644 --- a/doc/styleguide/item-typography-uppercase.html +++ b/doc/styleguide/item-typography-uppercase.html @@ -31,29 +31,49 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -67,7 +87,7 @@

    - 6.16 + 10.16 #Typography.Uppercase diff --git a/doc/styleguide/item-typography.html b/doc/styleguide/item-typography.html index b5c1dfb..f3b1f69 100644 --- a/doc/styleguide/item-typography.html +++ b/doc/styleguide/item-typography.html @@ -31,124 +31,144 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography diff --git a/doc/styleguide/section-badgets.html b/doc/styleguide/section-badgets.html new file mode 100644 index 0000000..d3e1f56 --- /dev/null +++ b/doc/styleguide/section-badgets.html @@ -0,0 +1,166 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 2 + + #Badgets + + + Badges + +

    + +
    +

    App Store Badges. Change width and height: 216x64px, 162x48px, 135x40...

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

    Google Play

    +

    App Store

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="badge-android">Google Play</p>
+<p class="badge-ios">App Store</p>
    +
    + +
    + Source: modules/_badges.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-base.html b/doc/styleguide/section-base.html index c802436..a61a8bc 100644 --- a/doc/styleguide/section-base.html +++ b/doc/styleguide/section-base.html @@ -31,49 +31,69 @@ 1Avatars
    • +
  • + + 2Badges + +
  • - 2Base + 3Base
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards + +
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -87,7 +107,7 @@

    - 2 + 3 #Base @@ -108,7 +128,7 @@

    - 2.1 + 3.1 #Base.backgrounds @@ -179,7 +199,7 @@

    - 2.1.1 + 3.1.1 #Base.backgrounds.gradient @@ -230,7 +250,7 @@

    - 2.1.2 + 3.1.2 #Base.backgrounds.transparent diff --git a/doc/styleguide/section-browser.html b/doc/styleguide/section-browser.html new file mode 100644 index 0000000..3049e17 --- /dev/null +++ b/doc/styleguide/section-browser.html @@ -0,0 +1,165 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 4 + + #Browser + + + Screenshots + +

    + +
    +

    HTML browser

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    + +
    Foddie
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <figure class="browser">
+  <img src="http://lorempixel.com/500/500/food/" />
+  <figcaption>Foddie</figcaption>
+</figure>
    +
    + +
    + Source: modules/_browser.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-buttons.html b/doc/styleguide/section-buttons.html new file mode 100644 index 0000000..f7d5928 --- /dev/null +++ b/doc/styleguide/section-buttons.html @@ -0,0 +1,160 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    + + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-cards.html b/doc/styleguide/section-cards.html new file mode 100644 index 0000000..b87c47a --- /dev/null +++ b/doc/styleguide/section-cards.html @@ -0,0 +1,178 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    + +
    +
    + +
    + +
    +

    + + + 5 + + #Cards + + + Cards + +

    + +
    +

    Different sizes: .card-30, .card-40, .card-50, .card-60, .card-70, .card-80

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    +
    iPhone
    +
    +

    iPhone 7

    +

    3D Touch, 12MP photos, and 4K video.

    +

    Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
      <div class="card-50">
+    <figure><img class="aligncenter" src="/static/images/iphone.png" alt="iPhone"></figure>
+    <div class="flex-content">
+      <h2>iPhone 7</h2>
+      <p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
+      <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
+    </div>
+  </div>
    +
    + +
    + Source: modules/_cards.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-flexblock.html b/doc/styleguide/section-flexblock.html index f3418ca..23faa7f 100644 --- a/doc/styleguide/section-flexblock.html +++ b/doc/styleguide/section-flexblock.html @@ -31,79 +31,94 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock @@ -135,7 +155,7 @@

    - 3 + 6 #Flexblock @@ -156,7 +176,7 @@

    - 3.1 + 6.1 #Flexblock.Activity @@ -287,7 +307,7 @@

    - 3.2 + 6.2 #Flexblock.Blink @@ -441,7 +461,7 @@

    - 3.3 + 6.3 #Flexblock.Clients @@ -570,7 +590,7 @@

    - 3.4 + 6.4 #Flexblock.Features @@ -696,7 +716,7 @@

    - 3.5 + 6.5 #Flexblock.Gallery @@ -811,7 +831,7 @@

    - 3.5.1 + 6.5.1 #Flexblock.Gallery.Overlay @@ -914,7 +934,7 @@

    - 3.6 + 6.6 #Flexblock.Metrics @@ -1022,7 +1042,7 @@

    - 3.7 + 6.7 #Flexblock.Plans @@ -1175,7 +1195,7 @@

    - 3.8 + 6.8 #Flexblock.Reasons @@ -1240,7 +1260,7 @@

    - 3.9 + 6.9 #Flexblock.Specs @@ -1325,7 +1345,7 @@

    - 3.10 + 6.10 #Flexblock.Steps diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html index 1bc1441..bb15972 100644 --- a/doc/styleguide/section-layout.html +++ b/doc/styleguide/section-layout.html @@ -31,55 +31,75 @@ 1Avatars

    • +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout
    • +
  • + + 8Screenshots + +
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography
    • @@ -93,7 +113,7 @@

    - 4 + 7 #Layout @@ -114,7 +134,7 @@

    - 4.1 + 7.1 #Layout.Alignment @@ -205,7 +225,7 @@

    - 4.2 + 7.2 #Layout.Radius @@ -256,7 +276,7 @@

    - 4.3 + 7.3 #Layout.Shadow @@ -307,7 +327,7 @@

    - 4.4 + 7.4 #Layout.Sizes diff --git a/doc/styleguide/section-screenshots.html b/doc/styleguide/section-screenshots.html new file mode 100644 index 0000000..b408888 --- /dev/null +++ b/doc/styleguide/section-screenshots.html @@ -0,0 +1,170 @@ + + + + + WebSlides + + + + + + + + + + + +
    +
    +

    WebSlides

    +
    +     +
    +
    + +
    + +
    +

    + + + 8 + + #Screenshots + + + Screenshots + +

    + +
    +

    HTML browser

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
    + +
    Foddie
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <figure class="browser">
+  <img src="http://lorempixel.com/500/500/food/" />
+  <figcaption>Foddie</figcaption>
+</figure>
    +
    + +
    + Source: modules/_browser.scss, line 1 +
    + +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-slide.html b/doc/styleguide/section-slide.html index 1fb2cc5..d71218b 100644 --- a/doc/styleguide/section-slide.html +++ b/doc/styleguide/section-slide.html @@ -31,41 +31,61 @@ 1Avatars +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide @@ -87,7 +107,7 @@

    - 5 + 9 #Slide @@ -108,7 +128,7 @@

    - 5.1 + 9.1 #Slide.Background @@ -302,7 +322,7 @@

    - 5.1.1 + 9.1.1 #Slide.Background.Anim @@ -349,7 +369,7 @@

    - 5.1.2 + 9.1.2 #Slide.Background.Video diff --git a/doc/styleguide/section-typography.html b/doc/styleguide/section-typography.html index b3a89a7..fcc11ea 100644 --- a/doc/styleguide/section-typography.html +++ b/doc/styleguide/section-typography.html @@ -31,124 +31,144 @@ 1Avatars

    • +
  • + + 2Badges + +
  • - 2Base + 3Base + +
    • +
  • + + 4Buttons + +
    • +
  • + + 5Cards
  • - 3Flexblock + 6Flexblock
  • - 4Layout + 7Layout + +
    • +
  • + + 8Screenshots
  • - 5Slide + 9Slide
  • - 6Typography + 10Typography