diff --git a/doc/kss/templates/default/index.hbs b/doc/kss/templates/default/index.hbs index 6850d4b..e02d323 100644 --- a/doc/kss/templates/default/index.hbs +++ b/doc/kss/templates/default/index.hbs @@ -17,7 +17,7 @@ @@ -36,7 +36,7 @@ {{#each menu}}
  • - + {{header}} {{#if isActive}} diff --git a/doc/kss/templates/default/kss-assets/arrow_down.svg b/doc/kss/templates/default/kss-assets/arrow_down.svg new file mode 100644 index 0000000..01aa8c9 --- /dev/null +++ b/doc/kss/templates/default/kss-assets/arrow_down.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/doc/kss/templates/default/kss-assets/arrow_up.svg b/doc/kss/templates/default/kss-assets/arrow_up.svg new file mode 100644 index 0000000..a552ff9 --- /dev/null +++ b/doc/kss/templates/default/kss-assets/arrow_up.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/doc/kss/templates/default/kss-assets/kss.css b/doc/kss/templates/default/kss-assets/kss.css index f310e70..706207f 100644 --- a/doc/kss/templates/default/kss-assets/kss.css +++ b/doc/kss/templates/default/kss-assets/kss.css @@ -213,9 +213,9 @@ #kss-node .kss-nav li { margin-left: 3.2rem; } #kss-node .kss-nav .kss-nav-has-children > a::before { - content: url("./images/down_arrow.svg"); } + content: url("./arrow_down.svg"); } #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before { - content: url("./images/up_arrow.svg"); } + content: url("./arrow_up.svg"); } #kss-node .kss-nav__menu { list-style-type: none; margin-bottom: 12px; @@ -256,7 +256,8 @@ #kss-node .kss-nav__ref:after { content: ' '; } #kss-node .kss-nav__ref-child { - font-weight: normal; } + font-weight: normal; + padding-left: 1.2rem; } #kss-node .kss-section { padding-bottom: 2.4rem; padding-top: 2.4rem; } @@ -443,6 +444,15 @@ z-index: 0; } #kss-node .kss-modifier__example:last-child { margin-bottom: 0; } + #kss-node .kss-modifier__example .fullscreen { + border: 2px solid #e7e7e9; + border-radius: 6px; + padding-bottom: 50%; } + #kss-node .kss-modifier__example .fullscreen::before { + background-color: #f3f3f5; + content: ''; + display: block; + height: 20px; } #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after, #kss-node.kss-guides-mode .kss-modifier__example-footer:before, #kss-node.kss-guides-mode .kss-modifier__example-footer:after { @@ -495,9 +505,9 @@ margin: 24px 0; padding: 20px; } #kss-node .kss-markup[open] summary { - background: url("./images/up_arrow.svg") no-repeat right center; } + background: url("./arrow_up.svg") no-repeat right center; } #kss-node .kss-markup summary { - background: url("./images/down_arrow.svg") no-repeat right center; + background: url("./arrow_down.svg") no-repeat right center; cursor: pointer; } #kss-node .kss-markup pre { background: #1d1f20; @@ -545,6 +555,8 @@ color: #d1783e; font-size: 13.33333px; font-weight: bold; } + #kss-node .fullscreen > .embed { + position: relative; } .kss-container { display: grid; diff --git a/doc/kss/templates/default/kss-assets/kss.scss b/doc/kss/templates/default/kss-assets/kss.scss index 4f1275f..cce200e 100644 --- a/doc/kss/templates/default/kss-assets/kss.scss +++ b/doc/kss/templates/default/kss-assets/kss.scss @@ -365,11 +365,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } .kss-nav-has-children > a::before { - content: url('./images/down_arrow.svg'); + content: url('./arrow_down.svg'); } .kss-nav-has-children > a.kss-nav__menu-link-active::before { - content: url('./images/up_arrow.svg'); + content: url('./arrow_up.svg'); } } @@ -435,6 +435,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; .kss-nav__ref-child { font-weight: normal; + padding-left: 1.2rem; } // ------------------------------------------------------------------------------ @@ -702,6 +703,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__description { margin-right: 20px; } @@ -716,6 +718,19 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; &:last-child { margin-bottom: 0; } + + .fullscreen { + border: 2px solid $kss-colors-subheader-border; + border-radius: 6px; + padding-bottom: 50%; + + &::before { + background-color: $kss-colors-subheader-bg; + content: ''; + display: block; + height: 20px; + } + } } &.kss-guides-mode .kss-modifier__example, @@ -801,11 +816,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; padding: 20px; &[open] summary { - background: url('./images/up_arrow.svg') no-repeat right center; + background: url('./arrow_up.svg') no-repeat right center; } & summary { - background: url('./images/down_arrow.svg') no-repeat right center; + background: url('./arrow_down.svg') no-repeat right center; cursor: pointer; } @@ -879,6 +894,10 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; font-weight: bold; } } + + .fullscreen > .embed { + position: relative; + } } .kss-container { diff --git a/doc/styleguide/index.html b/doc/styleguide/index.html index 15077f1..022fdbe 100644 --- a/doc/styleguide/index.html +++ b/doc/styleguide/index.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-architecture-forms.html b/doc/styleguide/item-architecture-forms.html deleted file mode 100644 index 07f3da8..0000000 --- a/doc/styleguide/item-architecture-forms.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - - WebSlides - Documentation 1.5.0 - - - - - - - - - - -
    -

    WebSlides - Documentation 1.5.0

    - -
    -
    -

    WebSlides - Documentation 1.5.0

    -
    -
    -
    - -
    -
    - -
    - -
    -

    - - Architecture.Forms - -

    - - -
    - - - - -
    -
    -
    - - - - - - - - - - - - - - - diff --git a/doc/styleguide/item-architecture-radius.html b/doc/styleguide/item-architecture-radius.html index 17fdaca..826e94f 100644 --- a/doc/styleguide/item-architecture-radius.html +++ b/doc/styleguide/item-architecture-radius.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-architecture-tables.html b/doc/styleguide/item-architecture-tables.html deleted file mode 100644 index a082dc5..0000000 --- a/doc/styleguide/item-architecture-tables.html +++ /dev/null @@ -1,193 +0,0 @@ - - - - - WebSlides - Documentation 1.5.0 - - - - - - - - - - -
    -

    WebSlides - Documentation 1.5.0

    - -
    -
    -

    WebSlides - Documentation 1.5.0

    -
    -
    -
    - -
    -
    - -
    - -
    -

    - - 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-architecture-try.html b/doc/styleguide/item-architecture-try.html index 03cfb5a..13fea05 100644 --- a/doc/styleguide/item-architecture-try.html +++ b/doc/styleguide/item-architecture-try.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-architecture.html b/doc/styleguide/item-architecture.html index f69090b..b3ade20 100644 --- a/doc/styleguide/item-architecture.html +++ b/doc/styleguide/item-architecture.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,212 +36,62 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-contents-resume.html b/doc/styleguide/item-contents-resume.html index 31dac4a..6eb377d 100644 --- a/doc/styleguide/item-contents-resume.html +++ b/doc/styleguide/item-contents-resume.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • @@ -65,7 +90,7 @@

    - Work / ResumΓ© / CV + CV / ResumΓ©

    diff --git a/doc/styleguide/item-contents.html b/doc/styleguide/item-contents.html index 25422b6..2236d09 100644 --- a/doc/styleguide/item-contents.html +++ b/doc/styleguide/item-contents.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,87 +36,57 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-architecture-forms-user.html b/doc/styleguide/item-forms-login.html similarity index 65% rename from doc/styleguide/item-architecture-forms-user.html rename to doc/styleguide/item-forms-login.html index 639de60..9bb89cf 100644 --- a/doc/styleguide/item-architecture-forms-user.html +++ b/doc/styleguide/item-forms-login.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,38 +36,63 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +
    -

    - +

    + Login form -

    +

    diff --git a/doc/styleguide/item-forms.html b/doc/styleguide/item-forms.html new file mode 100644 index 0000000..5cf0964 --- /dev/null +++ b/doc/styleguide/item-forms.html @@ -0,0 +1,145 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Forms + +

    + + +
    + + + + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-media-badgets.html b/doc/styleguide/item-landings-and-portfolio-badgets.html similarity index 66% rename from doc/styleguide/item-media-badgets.html rename to doc/styleguide/item-landings-and-portfolio-badgets.html index 8058181..45a3e12 100644 --- a/doc/styleguide/item-media-badgets.html +++ b/doc/styleguide/item-landings-and-portfolio-badgets.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Badges

    diff --git a/doc/styleguide/item-architecture-buttons.html b/doc/styleguide/item-landings-and-portfolio-buttons.html similarity index 68% rename from doc/styleguide/item-architecture-buttons.html rename to doc/styleguide/item-landings-and-portfolio-buttons.html index 546f291..deaf293 100644 --- a/doc/styleguide/item-architecture-buttons.html +++ b/doc/styleguide/item-landings-and-portfolio-buttons.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Buttons

    diff --git a/doc/styleguide/item-landings-cards.html b/doc/styleguide/item-landings-and-portfolio-cards.html similarity index 71% rename from doc/styleguide/item-landings-cards.html rename to doc/styleguide/item-landings-and-portfolio-cards.html index 60bc856..7caeec3 100644 --- a/doc/styleguide/item-landings-cards.html +++ b/doc/styleguide/item-landings-and-portfolio-cards.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Cards

    diff --git a/doc/styleguide/item-landings-cta-cover.html b/doc/styleguide/item-landings-and-portfolio-cta-cover.html similarity index 70% rename from doc/styleguide/item-landings-cta-cover.html rename to doc/styleguide/item-landings-and-portfolio-cta-cover.html index 417a52c..da9e522 100644 --- a/doc/styleguide/item-landings-cta-cover.html +++ b/doc/styleguide/item-landings-and-portfolio-cta-cover.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,36 +36,61 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - - Headings + + Covers

    diff --git a/doc/styleguide/item-landings-cta.html b/doc/styleguide/item-landings-and-portfolio-cta.html similarity index 68% rename from doc/styleguide/item-landings-cta.html rename to doc/styleguide/item-landings-and-portfolio-cta.html index 6421231..0660c21 100644 --- a/doc/styleguide/item-landings-cta.html +++ b/doc/styleguide/item-landings-and-portfolio-cta.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Call to action

    diff --git a/doc/styleguide/item-landings-quotes.html b/doc/styleguide/item-landings-and-portfolio-quotes.html similarity index 61% rename from doc/styleguide/item-landings-quotes.html rename to doc/styleguide/item-landings-and-portfolio-quotes.html index 4d56248..de56279 100644 --- a/doc/styleguide/item-landings-quotes.html +++ b/doc/styleguide/item-landings-and-portfolio-quotes.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,36 +36,61 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - - Quotes + + Quotes & Cites

    @@ -83,6 +108,7 @@

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

    + Avatar @jlantunez
    @@ -94,7 +120,8 @@ 
    <blockquote>
   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
-</blockquote>
    +</blockquote> +<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
    diff --git a/doc/styleguide/item-landings-toc.html b/doc/styleguide/item-landings-and-portfolio-toc.html similarity index 75% rename from doc/styleguide/item-landings-toc.html rename to doc/styleguide/item-landings-and-portfolio-toc.html index 6ae6329..ca68288 100644 --- a/doc/styleguide/item-landings-toc.html +++ b/doc/styleguide/item-landings-and-portfolio-toc.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Table of contents

    diff --git a/doc/styleguide/item-landings.html b/doc/styleguide/item-landings-and-portfolio.html similarity index 60% rename from doc/styleguide/item-landings.html rename to doc/styleguide/item-landings-and-portfolio.html index 6681129..1dc2c71 100644 --- a/doc/styleguide/item-landings.html +++ b/doc/styleguide/item-landings-and-portfolio.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,73 +36,98 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms + +
    • +
  • + + Landings and portfolio
  • - + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - - Landings + + Landings and portfolio

    diff --git a/doc/styleguide/item-landings-cites.html b/doc/styleguide/item-landings-cites.html deleted file mode 100644 index a971436..0000000 --- a/doc/styleguide/item-landings-cites.html +++ /dev/null @@ -1,135 +0,0 @@ - - - - - WebSlides - Documentation 1.5.0 - - - - - - - - - - -
    -

    WebSlides - Documentation 1.5.0

    - -
    -
    -

    WebSlides - Documentation 1.5.0

    -
    -
    -
    - -
    -
    - -
    - -
    -

    - - 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-architecture-alignment.html b/doc/styleguide/item-layout-alignment.html similarity index 80% rename from doc/styleguide/item-architecture-alignment.html rename to doc/styleguide/item-layout-alignment.html index 16e229b..85baf27 100644 --- a/doc/styleguide/item-architecture-alignment.html +++ b/doc/styleguide/item-layout-alignment.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Align content

    diff --git a/doc/styleguide/item-media-background-anim.html b/doc/styleguide/item-layout-background-anim.html similarity index 66% rename from doc/styleguide/item-media-background-anim.html rename to doc/styleguide/item-layout-background-anim.html index d7f6e76..2111c90 100644 --- a/doc/styleguide/item-media-background-anim.html +++ b/doc/styleguide/item-layout-background-anim.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Animated

    diff --git a/doc/styleguide/item-media-background-video.html b/doc/styleguide/item-layout-background-video.html similarity index 69% rename from doc/styleguide/item-media-background-video.html rename to doc/styleguide/item-layout-background-video.html index 221c790..140f83a 100644 --- a/doc/styleguide/item-media-background-video.html +++ b/doc/styleguide/item-layout-background-video.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Video

    diff --git a/doc/styleguide/item-architecture-background.html b/doc/styleguide/item-layout-background.html similarity index 84% rename from doc/styleguide/item-architecture-background.html rename to doc/styleguide/item-layout-background.html index 593aef4..2e182b8 100644 --- a/doc/styleguide/item-architecture-background.html +++ b/doc/styleguide/item-layout-background.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Backgrounds

    diff --git a/doc/styleguide/item-architecture-backgrounds-gradient.html b/doc/styleguide/item-layout-backgrounds-gradient.html similarity index 66% rename from doc/styleguide/item-architecture-backgrounds-gradient.html rename to doc/styleguide/item-layout-backgrounds-gradient.html index bb4d87a..4569839 100644 --- a/doc/styleguide/item-architecture-backgrounds-gradient.html +++ b/doc/styleguide/item-layout-backgrounds-gradient.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Backgrounds - Gradient

    diff --git a/doc/styleguide/item-architecture-backgrounds-transparent.html b/doc/styleguide/item-layout-backgrounds-transparent.html similarity index 67% rename from doc/styleguide/item-architecture-backgrounds-transparent.html rename to doc/styleguide/item-layout-backgrounds-transparent.html index d730368..2a797d4 100644 --- a/doc/styleguide/item-architecture-backgrounds-transparent.html +++ b/doc/styleguide/item-layout-backgrounds-transparent.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Backgrounds - Transparent

    diff --git a/doc/styleguide/item-architecture-backgrounds.html b/doc/styleguide/item-layout-backgrounds.html similarity index 73% rename from doc/styleguide/item-architecture-backgrounds.html rename to doc/styleguide/item-layout-backgrounds.html index 130baa8..9357b1d 100644 --- a/doc/styleguide/item-architecture-backgrounds.html +++ b/doc/styleguide/item-layout-backgrounds.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Backgrounds

    diff --git a/doc/styleguide/item-architecture-grid.html b/doc/styleguide/item-layout-grid.html similarity index 78% rename from doc/styleguide/item-architecture-grid.html rename to doc/styleguide/item-layout-grid.html index a345593..d3bc9ec 100644 --- a/doc/styleguide/item-architecture-grid.html +++ b/doc/styleguide/item-layout-grid.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Grid

    diff --git a/doc/styleguide/item-layout-navbars.html b/doc/styleguide/item-layout-navbars.html new file mode 100644 index 0000000..4c99f52 --- /dev/null +++ b/doc/styleguide/item-layout-navbars.html @@ -0,0 +1,272 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Navbars + +

    + +
    +

    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-architecture-sizes.html b/doc/styleguide/item-layout-sizes.html similarity index 77% rename from doc/styleguide/item-architecture-sizes.html rename to doc/styleguide/item-layout-sizes.html index c050900..df6db8c 100644 --- a/doc/styleguide/item-architecture-sizes.html +++ b/doc/styleguide/item-layout-sizes.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,36 +36,61 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - - Resizing + + Sizes

    diff --git a/doc/styleguide/item-architecture-navigation.html b/doc/styleguide/item-layout-slide-navigation.html similarity index 60% rename from doc/styleguide/item-architecture-navigation.html rename to doc/styleguide/item-layout-slide-navigation.html index 9f487bd..5726d68 100644 --- a/doc/styleguide/item-architecture-navigation.html +++ b/doc/styleguide/item-layout-slide-navigation.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Slides navigation

    @@ -138,65 +163,6 @@ - - - -/a> - - 53 / 120 -
    -
    -
    -
    - -
    - - 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/_navigation.scss, line 1 -
    - -
    -
    -
    - - - - - - - - - - - - diff --git a/doc/styleguide/item-architecture-slides-bottom.html b/doc/styleguide/item-layout-slides-bottom.html similarity index 68% rename from doc/styleguide/item-architecture-slides-bottom.html rename to doc/styleguide/item-layout-slides-bottom.html index 479f304..3d4967d 100644 --- a/doc/styleguide/item-architecture-slides-bottom.html +++ b/doc/styleguide/item-layout-slides-bottom.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Align bottom

    diff --git a/doc/styleguide/item-layout-slides-fullscreen.html b/doc/styleguide/item-layout-slides-fullscreen.html new file mode 100644 index 0000000..94d6ec4 --- /dev/null +++ b/doc/styleguide/item-layout-slides-fullscreen.html @@ -0,0 +1,168 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Fullscreen + +

    + +
    +

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

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

    Content

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section class="fullscreen">
+  <p>Content</p>
+</section>
    +
    + +
    + Source: modules/_slides.scss, line 43 +
    + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-slides-top.html b/doc/styleguide/item-layout-slides-top.html similarity index 68% rename from doc/styleguide/item-architecture-slides-top.html rename to doc/styleguide/item-layout-slides-top.html index a62b923..8c57f95 100644 --- a/doc/styleguide/item-architecture-slides-top.html +++ b/doc/styleguide/item-layout-slides-top.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Align top

    diff --git a/doc/styleguide/item-architecture-slides.html b/doc/styleguide/item-layout-slides.html similarity index 66% rename from doc/styleguide/item-architecture-slides.html rename to doc/styleguide/item-layout-slides.html index a1628b5..9e22b49 100644 --- a/doc/styleguide/item-architecture-slides.html +++ b/doc/styleguide/item-layout-slides.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Slides

    diff --git a/doc/styleguide/item-layout.html b/doc/styleguide/item-layout.html new file mode 100644 index 0000000..e7d814a --- /dev/null +++ b/doc/styleguide/item-layout.html @@ -0,0 +1,220 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Layout + +

    + + +
    + + + + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-architecture-interviews.html b/doc/styleguide/item-longforms-interviews.html similarity index 70% rename from doc/styleguide/item-architecture-interviews.html rename to doc/styleguide/item-longforms-interviews.html index 5ed4268..359670f 100644 --- a/doc/styleguide/item-architecture-interviews.html +++ b/doc/styleguide/item-longforms-interviews.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Interviews

    diff --git a/doc/styleguide/item-landings-longform.html b/doc/styleguide/item-longforms.html similarity index 60% rename from doc/styleguide/item-landings-longform.html rename to doc/styleguide/item-longforms.html index 9b4ca37..eacb3c2 100644 --- a/doc/styleguide/item-landings-longform.html +++ b/doc/styleguide/item-longforms.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,38 +36,70 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +
    -

    - +

    + Longform -

    +

    diff --git a/doc/styleguide/item-media-avatars.html b/doc/styleguide/item-media-avatars.html index 2c5619a..d560018 100644 --- a/doc/styleguide/item-media-avatars.html +++ b/doc/styleguide/item-media-avatars.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-media-background.html b/doc/styleguide/item-media-background.html deleted file mode 100644 index a80a78d..0000000 --- a/doc/styleguide/item-media-background.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - - WebSlides - Documentation 1.5.0 - - - - - - - - - - -
    -

    WebSlides - Documentation 1.5.0

    - -
    -
    -

    WebSlides - Documentation 1.5.0

    -
    -
    -
    - -
    -
    - -
    - -
    -

    - - Media.Background - -

    - - -
    - - - - -
    -
    -
    - - - - - - - - - - - - - - - diff --git a/doc/styleguide/item-media-embed.html b/doc/styleguide/item-media-embed.html index 3f9e17a..fea7518 100644 --- a/doc/styleguide/item-media-embed.html +++ b/doc/styleguide/item-media-embed.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-media-fullscreen-embed.html b/doc/styleguide/item-media-fullscreen-embed.html index 7145354..df42dfa 100644 --- a/doc/styleguide/item-media-fullscreen-embed.html +++ b/doc/styleguide/item-media-fullscreen-embed.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-media-fullscreen.html b/doc/styleguide/item-media-fullscreen.html index cfd71fd..280fad5 100644 --- a/doc/styleguide/item-media-fullscreen.html +++ b/doc/styleguide/item-media-fullscreen.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-media-screenshots.html b/doc/styleguide/item-media-screenshots.html index 4c1727c..4ef0bb9 100644 --- a/doc/styleguide/item-media-screenshots.html +++ b/doc/styleguide/item-media-screenshots.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,25 +36,50 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-media.html b/doc/styleguide/item-media.html index 1e45590..4bc54a8 100644 --- a/doc/styleguide/item-media.html +++ b/doc/styleguide/item-media.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,22 +36,37 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • diff --git a/doc/styleguide/item-contents-activity.html b/doc/styleguide/item-multipurpose-blocks-activity.html similarity index 76% rename from doc/styleguide/item-contents-activity.html rename to doc/styleguide/item-multipurpose-blocks-activity.html index bad61bd..647c510 100644 --- a/doc/styleguide/item-contents-activity.html +++ b/doc/styleguide/item-multipurpose-blocks-activity.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + CVs, News ad Activity

    diff --git a/doc/styleguide/item-contents-clients.html b/doc/styleguide/item-multipurpose-blocks-clients.html similarity index 77% rename from doc/styleguide/item-contents-clients.html rename to doc/styleguide/item-multipurpose-blocks-clients.html index c260ddd..600c7f3 100644 --- a/doc/styleguide/item-contents-clients.html +++ b/doc/styleguide/item-multipurpose-blocks-clients.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Clients

    diff --git a/doc/styleguide/item-contents-features.html b/doc/styleguide/item-multipurpose-blocks-features.html similarity index 73% rename from doc/styleguide/item-contents-features.html rename to doc/styleguide/item-multipurpose-blocks-features.html index 84ed8da..d85849f 100644 --- a/doc/styleguide/item-contents-features.html +++ b/doc/styleguide/item-multipurpose-blocks-features.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Features

    diff --git a/doc/styleguide/item-contents-gallery-overlay.html b/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html similarity index 73% rename from doc/styleguide/item-contents-gallery-overlay.html rename to doc/styleguide/item-multipurpose-blocks-gallery-overlay.html index 6b32cd8..209e5f2 100644 --- a/doc/styleguide/item-contents-gallery-overlay.html +++ b/doc/styleguide/item-multipurpose-blocks-gallery-overlay.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Gallery + Overflow

    diff --git a/doc/styleguide/item-contents-gallery.html b/doc/styleguide/item-multipurpose-blocks-gallery.html similarity index 74% rename from doc/styleguide/item-contents-gallery.html rename to doc/styleguide/item-multipurpose-blocks-gallery.html index 21c4336..0690e91 100644 --- a/doc/styleguide/item-contents-gallery.html +++ b/doc/styleguide/item-multipurpose-blocks-gallery.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Galleries (portfolios, teams...)

    diff --git a/doc/styleguide/item-contents-metrics.html b/doc/styleguide/item-multipurpose-blocks-metrics.html similarity index 71% rename from doc/styleguide/item-contents-metrics.html rename to doc/styleguide/item-multipurpose-blocks-metrics.html index 13be64a..155aa66 100644 --- a/doc/styleguide/item-contents-metrics.html +++ b/doc/styleguide/item-multipurpose-blocks-metrics.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Metrics

    diff --git a/doc/styleguide/item-contents-plans.html b/doc/styleguide/item-multipurpose-blocks-plans.html similarity index 79% rename from doc/styleguide/item-contents-plans.html rename to doc/styleguide/item-multipurpose-blocks-plans.html index 5504e00..449bbfa 100644 --- a/doc/styleguide/item-contents-plans.html +++ b/doc/styleguide/item-multipurpose-blocks-plans.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Plans / Pricing

    diff --git a/doc/styleguide/item-contents-reasons.html b/doc/styleguide/item-multipurpose-blocks-reasons.html similarity index 70% rename from doc/styleguide/item-contents-reasons.html rename to doc/styleguide/item-multipurpose-blocks-reasons.html index 4e439c1..93b960c 100644 --- a/doc/styleguide/item-contents-reasons.html +++ b/doc/styleguide/item-multipurpose-blocks-reasons.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Reasons

    diff --git a/doc/styleguide/item-contents-specs.html b/doc/styleguide/item-multipurpose-blocks-specs.html similarity index 70% rename from doc/styleguide/item-contents-specs.html rename to doc/styleguide/item-multipurpose-blocks-specs.html index 9fec135..d3d0824 100644 --- a/doc/styleguide/item-contents-specs.html +++ b/doc/styleguide/item-multipurpose-blocks-specs.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Specs

    diff --git a/doc/styleguide/item-contents-steps.html b/doc/styleguide/item-multipurpose-blocks-steps.html similarity index 72% rename from doc/styleguide/item-contents-steps.html rename to doc/styleguide/item-multipurpose-blocks-steps.html index e2c2864..77e14e3 100644 --- a/doc/styleguide/item-contents-steps.html +++ b/doc/styleguide/item-multipurpose-blocks-steps.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Steps

    diff --git a/doc/styleguide/item-contents-flexblocks.html b/doc/styleguide/item-multipurpose-blocks.html similarity index 51% rename from doc/styleguide/item-contents-flexblocks.html rename to doc/styleguide/item-multipurpose-blocks.html index da7e6e3..65b5908 100644 --- a/doc/styleguide/item-contents-flexblocks.html +++ b/doc/styleguide/item-multipurpose-blocks.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,38 +36,115 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + + +
    • +
  • + + Typography + +
    • -
    +
    -

    - - Flexblocks +

    + + Multipurpose blocks -

    +

    Auto-fill & Equal height columns

    diff --git a/doc/styleguide/item-architecture-columns.html b/doc/styleguide/item-typography-columns.html similarity index 66% rename from doc/styleguide/item-architecture-columns.html rename to doc/styleguide/item-typography-columns.html index c101815..ac802d3 100644 --- a/doc/styleguide/item-architecture-columns.html +++ b/doc/styleguide/item-typography-columns.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Columns

    diff --git a/doc/styleguide/item-architecture-context.html b/doc/styleguide/item-typography-context.html similarity index 65% rename from doc/styleguide/item-architecture-context.html rename to doc/styleguide/item-typography-context.html index 4d7097e..b97361f 100644 --- a/doc/styleguide/item-architecture-context.html +++ b/doc/styleguide/item-typography-context.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Context

    diff --git a/doc/styleguide/item-architecture-data.html b/doc/styleguide/item-typography-data.html similarity index 65% rename from doc/styleguide/item-architecture-data.html rename to doc/styleguide/item-typography-data.html index ab94cf4..5443d3d 100644 --- a/doc/styleguide/item-architecture-data.html +++ b/doc/styleguide/item-typography-data.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Data

    diff --git a/doc/styleguide/item-architecture-emoji.html b/doc/styleguide/item-typography-emoji.html similarity index 65% rename from doc/styleguide/item-architecture-emoji.html rename to doc/styleguide/item-typography-emoji.html index 52587c7..c0158e6 100644 --- a/doc/styleguide/item-architecture-emoji.html +++ b/doc/styleguide/item-typography-emoji.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Emoji

    diff --git a/doc/styleguide/item-architecture-info.html b/doc/styleguide/item-typography-info.html similarity index 66% rename from doc/styleguide/item-architecture-info.html rename to doc/styleguide/item-typography-info.html index 4f891bd..f5a5486 100644 --- a/doc/styleguide/item-architecture-info.html +++ b/doc/styleguide/item-typography-info.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Info Messages

    diff --git a/doc/styleguide/item-architecture-intro.html b/doc/styleguide/item-typography-intro.html similarity index 65% rename from doc/styleguide/item-architecture-intro.html rename to doc/styleguide/item-typography-intro.html index fc5af1b..a4af75b 100644 --- a/doc/styleguide/item-architecture-intro.html +++ b/doc/styleguide/item-typography-intro.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Intro

    diff --git a/doc/styleguide/item-architecture-label.html b/doc/styleguide/item-typography-label.html similarity index 65% rename from doc/styleguide/item-architecture-label.html rename to doc/styleguide/item-typography-label.html index 09e20c0..6eafcb7 100644 --- a/doc/styleguide/item-architecture-label.html +++ b/doc/styleguide/item-typography-label.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Label

    diff --git a/doc/styleguide/item-architecture-landings.html b/doc/styleguide/item-typography-landings.html similarity index 65% rename from doc/styleguide/item-architecture-landings.html rename to doc/styleguide/item-typography-landings.html index f6cb17a..3b4b96c 100644 --- a/doc/styleguide/item-architecture-landings.html +++ b/doc/styleguide/item-typography-landings.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Landings

    diff --git a/doc/styleguide/item-architecture-lowercase.html b/doc/styleguide/item-typography-lowercase.html similarity index 65% rename from doc/styleguide/item-architecture-lowercase.html rename to doc/styleguide/item-typography-lowercase.html index 97c5423..144e381 100644 --- a/doc/styleguide/item-architecture-lowercase.html +++ b/doc/styleguide/item-typography-lowercase.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Lowercase

    diff --git a/doc/styleguide/item-architecture-pull_quote.html b/doc/styleguide/item-typography-pull_quote.html similarity index 70% rename from doc/styleguide/item-architecture-pull_quote.html rename to doc/styleguide/item-typography-pull_quote.html index 5955e9b..4d66611 100644 --- a/doc/styleguide/item-architecture-pull_quote.html +++ b/doc/styleguide/item-typography-pull_quote.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,36 +36,61 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - - Pull Quote + + Pulls

    diff --git a/doc/styleguide/item-architecture-separator.html b/doc/styleguide/item-typography-separator.html similarity index 65% rename from doc/styleguide/item-architecture-separator.html rename to doc/styleguide/item-typography-separator.html index 1b7f6b8..21cd3fb 100644 --- a/doc/styleguide/item-architecture-separator.html +++ b/doc/styleguide/item-typography-separator.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Separator

    diff --git a/doc/styleguide/item-architecture-serif.html b/doc/styleguide/item-typography-serif.html similarity index 65% rename from doc/styleguide/item-architecture-serif.html rename to doc/styleguide/item-typography-serif.html index 0a0d665..f0f58a6 100644 --- a/doc/styleguide/item-architecture-serif.html +++ b/doc/styleguide/item-typography-serif.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Serif

    diff --git a/doc/styleguide/item-architecture-shadow.html b/doc/styleguide/item-typography-shadow.html similarity index 71% rename from doc/styleguide/item-architecture-shadow.html rename to doc/styleguide/item-typography-shadow.html index ac95150..7009e35 100644 --- a/doc/styleguide/item-architecture-shadow.html +++ b/doc/styleguide/item-typography-shadow.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Shadows

    diff --git a/doc/styleguide/item-architecture-subtitle.html b/doc/styleguide/item-typography-subtitle.html similarity index 66% rename from doc/styleguide/item-architecture-subtitle.html rename to doc/styleguide/item-typography-subtitle.html index a38247a..923fbc3 100644 --- a/doc/styleguide/item-architecture-subtitle.html +++ b/doc/styleguide/item-typography-subtitle.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Subtitule

    diff --git a/doc/styleguide/item-architecture-symbols.html b/doc/styleguide/item-typography-symbols.html similarity index 65% rename from doc/styleguide/item-architecture-symbols.html rename to doc/styleguide/item-typography-symbols.html index f718ead..f7ad621 100644 --- a/doc/styleguide/item-architecture-symbols.html +++ b/doc/styleguide/item-typography-symbols.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Symbols

    diff --git a/doc/styleguide/item-architecture-uppercase.html b/doc/styleguide/item-typography-uppercase.html similarity index 65% rename from doc/styleguide/item-architecture-uppercase.html rename to doc/styleguide/item-typography-uppercase.html index 5bf4278..6f7fb85 100644 --- a/doc/styleguide/item-architecture-uppercase.html +++ b/doc/styleguide/item-typography-uppercase.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,35 +36,60 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - + Uppercase

    diff --git a/doc/styleguide/item-typography.html b/doc/styleguide/item-typography.html new file mode 100644 index 0000000..010871b --- /dev/null +++ b/doc/styleguide/item-typography.html @@ -0,0 +1,220 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Typography + +

    + + +
    + + + + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/kss-assets/arrow_down.svg b/doc/styleguide/kss-assets/arrow_down.svg new file mode 100644 index 0000000..01aa8c9 --- /dev/null +++ b/doc/styleguide/kss-assets/arrow_down.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/doc/styleguide/kss-assets/arrow_up.svg b/doc/styleguide/kss-assets/arrow_up.svg new file mode 100644 index 0000000..a552ff9 --- /dev/null +++ b/doc/styleguide/kss-assets/arrow_up.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/doc/styleguide/kss-assets/kss.css b/doc/styleguide/kss-assets/kss.css index f310e70..706207f 100644 --- a/doc/styleguide/kss-assets/kss.css +++ b/doc/styleguide/kss-assets/kss.css @@ -213,9 +213,9 @@ #kss-node .kss-nav li { margin-left: 3.2rem; } #kss-node .kss-nav .kss-nav-has-children > a::before { - content: url("./images/down_arrow.svg"); } + content: url("./arrow_down.svg"); } #kss-node .kss-nav .kss-nav-has-children > a.kss-nav__menu-link-active::before { - content: url("./images/up_arrow.svg"); } + content: url("./arrow_up.svg"); } #kss-node .kss-nav__menu { list-style-type: none; margin-bottom: 12px; @@ -256,7 +256,8 @@ #kss-node .kss-nav__ref:after { content: ' '; } #kss-node .kss-nav__ref-child { - font-weight: normal; } + font-weight: normal; + padding-left: 1.2rem; } #kss-node .kss-section { padding-bottom: 2.4rem; padding-top: 2.4rem; } @@ -443,6 +444,15 @@ z-index: 0; } #kss-node .kss-modifier__example:last-child { margin-bottom: 0; } + #kss-node .kss-modifier__example .fullscreen { + border: 2px solid #e7e7e9; + border-radius: 6px; + padding-bottom: 50%; } + #kss-node .kss-modifier__example .fullscreen::before { + background-color: #f3f3f5; + content: ''; + display: block; + height: 20px; } #kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after, #kss-node.kss-guides-mode .kss-modifier__example-footer:before, #kss-node.kss-guides-mode .kss-modifier__example-footer:after { @@ -495,9 +505,9 @@ margin: 24px 0; padding: 20px; } #kss-node .kss-markup[open] summary { - background: url("./images/up_arrow.svg") no-repeat right center; } + background: url("./arrow_up.svg") no-repeat right center; } #kss-node .kss-markup summary { - background: url("./images/down_arrow.svg") no-repeat right center; + background: url("./arrow_down.svg") no-repeat right center; cursor: pointer; } #kss-node .kss-markup pre { background: #1d1f20; @@ -545,6 +555,8 @@ color: #d1783e; font-size: 13.33333px; font-weight: bold; } + #kss-node .fullscreen > .embed { + position: relative; } .kss-container { display: grid; diff --git a/doc/styleguide/kss-assets/kss.scss b/doc/styleguide/kss-assets/kss.scss index 4f1275f..cce200e 100644 --- a/doc/styleguide/kss-assets/kss.scss +++ b/doc/styleguide/kss-assets/kss.scss @@ -365,11 +365,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; } .kss-nav-has-children > a::before { - content: url('./images/down_arrow.svg'); + content: url('./arrow_down.svg'); } .kss-nav-has-children > a.kss-nav__menu-link-active::before { - content: url('./images/up_arrow.svg'); + content: url('./arrow_up.svg'); } } @@ -435,6 +435,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; .kss-nav__ref-child { font-weight: normal; + padding-left: 1.2rem; } // ------------------------------------------------------------------------------ @@ -702,6 +703,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; margin-bottom: ($kss-vertical-rhythm / 2); } + .is-fullscreen .kss-modifier__description { margin-right: 20px; } @@ -716,6 +718,19 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; &:last-child { margin-bottom: 0; } + + .fullscreen { + border: 2px solid $kss-colors-subheader-border; + border-radius: 6px; + padding-bottom: 50%; + + &::before { + background-color: $kss-colors-subheader-bg; + content: ''; + display: block; + height: 20px; + } + } } &.kss-guides-mode .kss-modifier__example, @@ -801,11 +816,11 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; padding: 20px; &[open] summary { - background: url('./images/up_arrow.svg') no-repeat right center; + background: url('./arrow_up.svg') no-repeat right center; } & summary { - background: url('./images/down_arrow.svg') no-repeat right center; + background: url('./arrow_down.svg') no-repeat right center; cursor: pointer; } @@ -879,6 +894,10 @@ $kss-vertical-rhythm: $kss-font-size * 1.5; font-weight: bold; } } + + .fullscreen > .embed { + position: relative; + } } .kss-container { diff --git a/doc/styleguide/section-architecture.html b/doc/styleguide/section-architecture.html index 0212909..da8b8c4 100644 --- a/doc/styleguide/section-architecture.html +++ b/doc/styleguide/section-architecture.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,212 +36,62 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • @@ -262,1291 +112,6 @@ -
    -
    - -
    -

    - - Align content - -

    - - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    -
    -
    -
    - -
    - .alignright -
    -
    - Align right. -
    -
    -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    -
    -
    -
    -
    - .alignleft -
    -
    - Align left. -
    -
    -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    -
    -
    -
    -
    - .aligncenter -
    -
    - Align center. -
    -
    -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    -
    -
    -
    -
    - -
    - - Markup - - 
    <div>
-  <img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
-</div>
    -
    - -
    - Source: _base.scss, line 143 -
    - -
    -
    - -
    -

    - - Backgrounds - -

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

    - - Architecture.backgrounds - -

    - - -
    - - - - -
    -
    - -
    -

    - - Backgrounds - -

    - -
    -

    Colors we use for backgrounds.

    - -
    - -
    - - -
    -
    - Example -
    - - -
    - Primary #44d -Secondary #67d -Light #f7f9fb -Black #000 -Black blue #123 -Blue #346 -Brown #f9f8f2 -Gray #d5d9e2 -Green #077 -Purple #62b -Red #c23 -White #fff -Facebook #3b5998 -
    -
    - -
    - -
    - - Markup - - 
    <span class="bg-primary size-20">Primary #44d</span>
-<span class="bg-secondary size-20">Secondary #67d</span>
-<span class="bg-light size-20">Light #f7f9fb</span>
-<span class="bg-black size-20">Black #000</span>
-<span class="bg-black-blue size-20">Black blue #123</span>
-<span class="bg-blue size-20">Blue #346</span>
-<span class="bg-brown size-20">Brown #f9f8f2</span>
-<span class="bg-gray size-20">Gray #d5d9e2</span>
-<span class="bg-green size-20">Green #077</span>
-<span class="bg-purple size-20">Purple #62b</span>
-<span class="bg-red size-20">Red #c23</span>
-<span class="bg-white size-20">White #fff</span>
-<span class="bg-facebook size-20">Facebook #3b5998</span>
    -
    - -
    - Source: _color.scss, line 107 -
    - -
    -
    - -
    -

    - - Backgrounds - Gradient - -

    - -
    -

    Colors we use for backgrounds.

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
    Horizontal
    -
    Vertical
    -
    Radial
    -
    -
    - -
    - -
    - - Markup - - 
      <div class="bg-gradient-h">Horizontal</div>
-  <div class="bg-gradient-v">Vertical</div>
-  <div class="bg-gradient-r">Radial</div>
    -
    - -
    - Source: _color.scss, line 193 -
    - -
    -
    - -
    -

    - - Backgrounds - Transparent - -

    - -
    -

    Colors we use for backgrounds.

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
    -
    Dark
    -
    Light
    -
    Gradient
    -
    -
    -
    - -
    - -
    - - Markup - - 
    <div class="bg-red">
-  <div class="bg-trans-dark">Dark</div>
-  <div class="bg-trans-light">Light</div>
-  <div class="bg-trans-gradient">Gradient</div>
-</div>
    -
    - -
    - Source: _color.scss, line 168 -
    - -
    -
    - -
    -

    - - Buttons - -

    - - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    - Download -
    -
    - -
    - .radius -
    -
    - Rounded corners -
    -
    - Download -
    -
    -
    - -
    - - Markup - - 
    <a href="#" class="button [modifier class]">Download</a>
    -
    - -
    - Source: modules/_button.scss, line 1 -
    - -
    -
    - -
    -

    - - Columns - -

    - -
    -

    Magazine Two Columns

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Column 1 text

    Column 2 text

    -
    -
    - -
    - -
    - - Markup - - 
    <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
    -
    - -
    - Source: _typography.scss, line 346 -
    - -
    -
    - -
    -

    - - Context - -

    - -
    -

    Heading with border

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Why WebSlides?

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-context">Why WebSlides?</p>
    -
    - -
    - Source: _typography.scss, line 376 -
    - -
    -
    - -
    -

    - - Data - -

    - -
    -

    Numbers (results, sales... )-

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    23,478,289

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-data">23,478,289</p>
    -
    - -
    - Source: _typography.scss, line 314 -
    - -
    -
    - -
    -

    - - Emoji - -

    - -
    -

    You'll love this

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-emoji">πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜</p>
    -
    - -
    - Source: _typography.scss, line 296 -
    - -
    -
    - -
    -

    - - Architecture.Forms - -

    - - -
    - - - - -
    -
    - -
    -

    - - Login form - -

    - - -
    - - -
    -
    - Example -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    - - Markup - - 
    <div class="user">
-  <input type="text" placeholder="Username" />
-  <button>Log in</button>
-</div>
    -
    - -
    - Source: modules/_form.scss, line 139 -
    - -
    -
    - -
    -

    - - Grid - -

    - -
    -

    Basic Grid (Flexible blocks) -Auto-fill & Equal height

    - -
    - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    -
    -
    -

    WebSlides is really easy

    -

    Each parent <section> in the #webslides element is an individual slide.

    -

    Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

    -
    -
    -

    WebSlides is the clean

    -

    Each parent <section> in the #webslides element is an individual slide.

    -
    -
    -
    -
    - -
    - .vertical-align -
    -
    - Vertical align -
    -
    -
    -
    -

    WebSlides is really easy

    -

    Each parent <section> in the #webslides element is an individual slide.

    -

    Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

    -
    -
    -

    WebSlides is the clean

    -

    Each parent <section> in the #webslides element is an individual slide.

    -
    -
    -
    -
    -
    - -
    - - Markup - - 
    <div class="grid [modifier class]">
-  <div class="column">
-    <h3><strong>WebSlides is really easy</strong></h3>
-    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
-    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
-  </div>
-  <div class="column">
-    <h3><strong>WebSlides is the clean</strong></h3>
-    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
-  </div>
-</div>
    -
    - -
    - Source: modules/_grid.scss, line 1 -
    - -
    -
    - -
    -

    - - Info Messages - -

    - -
    -

    Error, warning, success...

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Psychiatrists have long debated whether it really exists.

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
    -
    - -
    - Source: _typography.scss, line 546 -
    - -
    -
    - -
    -

    - - Interviews - -

    - -
    -

    Questions & Answers

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
    -
    Driftwood
    -
    -

    It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?

    -
    -
    Fiorello
    -
    -

    No. It's no good.

    -
    -
    Driftwood
    -
    -

    What's the matter with it?

    -
    -
    Fiorello
    -
    -

    I don't know, let's hear it again.

    -
    -
    -
    -
    - -
    - -
    - - Markup - - 
    <dl class="text-interview">
-  <dt>Driftwood</dt>
-  <dd>
-    <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
-  </dd>
-  <dt>Fiorello</dt>
-  <dd>
-    <p>No. It's no good.</p>
-  </dd>
-  <dt>Driftwood</dt>
-  <dd>
-    <p>What's the matter with it?</p>
-  </dd>
-  <dt>Fiorello</dt>
-  <dd>
-    <p>I don't know, let's hear it again.</p>
-  </dd>
-</dl>
    -
    - -
    - Source: _typography.scss, line 504 -
    - -
    -
    - -
    -

    - - Intro - -

    - -
    -

    Typography Classes = .text-

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Create a simple web presence.

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-intro">Create a simple web presence.</p>
    -
    - -
    - Source: _typography.scss, line 206 -
    - -
    -
    - -
    -

    - - Label - -

    - - -
    - - -
    -
    - Example -
    - - -
    -

    Website: http://webslides.tv

    -
    -
    - -
    - -
    - - Markup - - 
    <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
    -
    - -
    - Source: _typography.scss, line 333 -
    - -
    -
    - -
    -

    - - Landings - -

    - -
    -

    h1,h2... Promo/Landings

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Landings

    -
    -
    - -
    - -
    - - Markup - - 
    <h1 class="text-landing">Landings</h1>
    -
    - -
    - Source: _typography.scss, line 233 -
    - -
    -
    - -
    -

    - - Lowercase - -

    - - -
    - - -
    -
    - Example -
    - - -
    -

    Create a simple web presence.

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-lowercase">Create a simple web presence.</p>
    -
    - -
    - Source: _typography.scss, line 286 -
    - -
    -
    - -
    -

    - - Navigation - -

    - -
    -

    Responsive Media (videos, iframe...)

    - -
    - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    - -
    -
    - -
    - .navbar -
    -
    - Navigation bar -
    -
    - -
    -
    -
    - .aligncenter -
    -
    - Center alignment -
    -
    - -
    -
    -
    - .alignright -
    -
    - Right alignment -
    -
    - -
    -
    -
    - -
    - - 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/_navigation.scss, line 1 -
    - -
    -
    - -
    -

    - - 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 -
    - -
    -
    - -
    -

    - - Pull Quote - -

    - -
    -

    Pull Quote Right/Left

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

    -

    Psychiatrists have long debated whether it really exists.

    -

    Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

    -

    Psychiatrists have long debated whether it really exists.

    -
    -
    - -
    - -
    - - Markup - - 
    <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
-<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
-<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
-<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
    -
    - -
    - Source: _typography.scss, line 449 -
    -
    @@ -1593,635 +158,6 @@ Auto-fill & Equal height

    Source: _base.scss, line 129
    -
    -
    - -
    -

    - - Separator - -

    - -
    -

    Stars *

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Separator

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-separator">Separator</p>
    -
    - -
    - Source: _typography.scss, line 418 -
    - -
    -
    - -
    -

    - - Serif - -

    - -
    -

    Maitree font

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Create a simple web presence.

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-serif">Create a simple web presence.</p>
    -
    - -
    - Source: _typography.scss, line 220 -
    - -
    -
    - -
    -

    - - Shadows - -

    - -
    -

    Drops a shadow under the layer. The layer containing the shadow has to have a solid background

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi. -
    -
    -
    - -
    - -
    - - Markup - - 
    <div class="bg-white shadow">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
-</div>
    -
    - -
    - Source: _base.scss, line 73 -
    - -
    -
    - -
    -

    - - Resizing - -

    - - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    - -
    -
    - -
    - .size-80 -
    -
    - resize to 80%. -
    -
    - -
    -
    -
    - .size-70 -
    -
    - resize to 70%. -
    -
    - -
    -
    -
    - .size-60 -
    -
    - resize to 60%. -
    -
    - -
    -
    -
    - .size-50 -
    -
    - resize to 50%. -
    -
    - -
    -
    -
    - .size-40 -
    -
    - resize to 40%. -
    -
    - -
    -
    -
    - .size-30 -
    -
    - resize to 30%. -
    -
    - -
    -
    -
    - .size-20 -
    -
    - resize to 20%. -
    -
    - -
    -
    -
    - -
    - - Markup - - 
    <img src="../../../static/images/iphone.png" class="[modifier class]" />
    -
    - -
    - Source: _base.scss, line 199 -
    - -
    -
    - -
    -

    - - fullscreen - -

    - -
    -

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

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
    -

    Content

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

    - - 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 -
    - -
    -
    - -
    -

    - - 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 -
    - -
    -
    - -
    -

    - - 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 -
    - -
    -
    - -
    -

    - - Subtitule - -

    - -
    -

    Subtitle (Before h1, h2)

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    Powered by #WebSlides .text-subtitle

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
    -
    - -
    - Source: _typography.scss, line 250 -
    - -
    -
    - -
    -

    - - Symbols - -

    - -
    -

    Stars *

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -

    * * *

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-symbols">* * *</p>
    -
    - -
    - Source: _typography.scss, line 404 -
    - -
    -
    - -
    -

    - - 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 -
    -
    @@ -2261,44 +197,6 @@ All HTML elements will have those styles

    -
    - -
    -

    - - Uppercase - -

    - - -
    - - -
    -
    - Example -
    - - -
    -

    Create a simple web presence.

    -
    -
    - -
    - -
    - - Markup - - 
    <p class="text-uppercase">Create a simple web presence.</p>
    -
    - -
    - Source: _typography.scss, line 276 -
    - -
    diff --git a/doc/styleguide/section-contents.html b/doc/styleguide/section-contents.html index e1e7120..6756209 100644 --- a/doc/styleguide/section-contents.html +++ b/doc/styleguide/section-contents.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,87 +36,57 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • @@ -137,1052 +107,13 @@ -
    -
    - -
    -

    - - CVs, News ad Activity - -

    - -
    -

    Bla bla bla

    - -
    - -
    - - -
    -
    - Example -
    - - -
    - -
    -
    - -
    - -
    - - Markup - - 
    <ul class="flexblock activity">
-  <li>
-    <a href="#" title="UX Designer at ACME">
-      <div>
-        <p class="year">
-          2016
-        </p>
-        <p class="title">
-          UX Designer at ACME
-        </p>
-        <p class="summary">
-          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
-        </p>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="14 world famous buildings to inspire you">
-      <p class="year">
-        2 mins ago
-      </p>
-      <p class="title">
-        14 world famous buildings to inspire you
-      </p>
-      <p class="summary">
-        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
-      </p>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Co-Founder of GAMMA">
-      <p class="year">
-        2013
-      </p>
-      <p class="title">
-        Co-Founder of GAMMA
-      </p>
-      <p class="summary">
-        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
-      </p>
-    </a>
-  </li>
-</ul>
    -
    - -
    - Source: modules/_flexblock-activity.scss, line 1 -
    - -
    -
    - -
    -

    - - Clients - -

    - -
    -

    Highlight clients information

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

    - - Features - -

    - -
    -

    Special features

    - -
    - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    -
      -
    • -
      -

      100% customizable

      - Well documented. -
      -
      • -
    • -
      - $48 -

      Extra virgin olive oil

      - The Spanish caviar. -
      -
      • -
    • -
      -

      - Ultra-fast Wifi -

      - Simple file sharing. -
      -
      • -
    -
    -
    - -
    - .border -
    -
    - with border -
    -
    -
      -
    • -
      -

      100% customizable

      - Well documented. -
      -
      • -
    • -
      - $48 -

      Extra virgin olive oil

      - The Spanish caviar. -
      -
      • -
    • -
      -

      - Ultra-fast Wifi -

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

    - - Flexblocks - -

    - -
    -

    Auto-fill & Equal height columns

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

    - - Galleries (portfolios, teams...) - -

    - -
    -

    Beautiful gallery

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

    - - Gallery + Overflow - -

    - -
    -

    Beautiful gallery with overlay content

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

    - - Metrics - -

    - -
    -

    Bla bla bla

    - -
    - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    -
      -
    • Founded - 2016 -
      • -
    • - 24M - Subscribers -
      • -
    • - Revenue: - $16M -
      • -
    • - Monthly Growth - 64% -
      • -
    -
    -
    - -
    - .border -
    -
    - with border -
    -
    -
      -
    • Founded - 2016 -
      • -
    • - 24M - Subscribers -
      • -
    • - Revenue: - $16M -
      • -
    • - Monthly Growth - 64% -
      • -
    -
    -
    -
    - -
    - - Markup - - 
    <ul class="flexblock metrics  [modifier class]">
-  <li> Founded
-    <span>2016</span>
-  </li>
-  <li>
-    <span>24M</span>
-    Subscribers
-  </li>
-  <li>
-    Revenue:
-    <span>$16M</span>
-  </li>
-  <li>
-    Monthly Growth
-    <span>64%</span>
-  </li>
-</ul>
    -
    - -
    - Source: modules/_flexblock-metrics.scss, line 1 -
    - -
    -
    - -
    -

    - - Plans / Pricing - -

    - -
    -

    Bla bla bla

    - -
    - -
    - - -
    -
    - Examples -
    - -
    - Default styling -
    - -
    - -
    -
    - -
    - .blink -
    -
    - block linkable -
    -
    - -
    -
    -
    - -
    - - Markup - - 
    <ul class="flexblock plans [modifier class]">
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Basic</h2>
-      <div>
-        <span class="price">Free</span>
-        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
-        <span class="button">Select</span>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Medium</h2>
-      <div>
-        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
-        <p>Clean markup with popular naming conventions. Minimum effort.</p>
-        <span class="button">Buy Now</span>
-      </div>
-    </a>
-  </li>
-  <li>
-    <a href="#" title="Purchase">
-      <h2>Premium <sup>(save 20%)</sup></h2>
-      <div>
-        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
-        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
-        <span class="button">Select</span>
-      </div>
-    </a>
-  </li>
-</ul>
    -
    - -
    - Source: modules/_flexblock-plans.scss, line 1 -
    - -
    -
    - -
    -

    - - Reasons - -

    - -
    -

    Bla bla bla

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
      -
    • -

      Why WebSlides? Work better, faster.

      -

      Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

      -
      • -
    • -

      Good karma. Just the essentials and using lovely CSS.

      -

      WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

      -
      • -
    -
    -
    - -
    - -
    - - Markup - - 
    <ul class="flexblock reasons">
-  <li>
-    <h2>Why WebSlides? Work better, faster.</h2>
-    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
-  </li>
-  <li>
-    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
-    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
-  </li>
-</ul>
    -
    - -
    - Source: modules/_flexblock-reasons.scss, line 1 -
    -

    - Work / ResumΓ© / CV + CV / ResumΓ©

    @@ -1261,178 +192,6 @@
    -
    - -
    -

    - - Specs - -

    - -
    -

    Bla bla bla

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
      -
    • -
      -

      Ultra-Fast WiFi

      - Simple and secure file sharing. -
      -
      • -
    • -
      -

      All day battery life

      - Your battery worries may be over. -
      -
      • -
    • -
      -

      Lifetime Warranty

      - We'll fix it or if we can't, we'll replace it. -
      -
      • -
    -
    -
    - -
    - -
    - - Markup - - 
    <ul class="flexblock specs">
-    <li>
-      <div>
-        <h2>Ultra-Fast WiFi</h2>
-        Simple and secure file sharing.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>All day battery life</h2>
-        Your battery worries may be over.
-      </div>
-    </li>
-    <li>
-      <div>
-        <h2>Lifetime Warranty </h2>
-        We'll fix it or if we can't, we'll replace it.
-      </div>
-    </li>
-    </ul>
    -
    - -
    - Source: modules/_flexblock-specs.scss, line 1 -
    - -
    -
    - -
    -

    - - Steps - -

    - -
    -

    Bla bla bla

    - -
    - -
    - - -
    -
    - Example -
    - - -
    -
      -
    • -

      01. Passion

      -

      When you're really passionate about your job, you can change the world.

      -
      • -
    • -
      -

      02. Purpose

      -

      Why does this business exist? How are you different? Why matters?

      -
      • -
    • -
      -

      03. Principles

      -

      Leadership through usefulness, openness, empathy, and good taste.

      -
      • -
    • -
      -

      04. Process

      -
        -
      • Useful
        • -
      • Easy
        • -
      • Fast
        • -
      • Beautiful
        • -
      -
      • -
    -
    -
    - -
    - -
    - - Markup - - 
    <ul class="flexblock steps">
-  <li>
-    <h2>01. Passion</h2>
-    <p>When you're really passionate about your job, you can change the world.</p>
-  </li>
-  <li>
-    <div class="process step-2"></div>
-    <h2>02. Purpose</h2>
-    <p>Why does this business exist? How are you different? Why matters?</p>
-  </li>
-  <li>
-    <div class="process step-3"></div>
-    <h2>03. Principles</h2>
-    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
-  </li>
-  <li>
-    <div class="process step-4"></div>
-    <h2>04. Process</h2>
-    <ul>
-      <li>Useful</li>
-      <li>Easy</li>
-      <li>Fast</li>
-      <li>Beautiful</li>
-    </ul>
-  </li>
-</ul>
    -
    - -
    - Source: modules/_flexblock-steps.scss, line 1 -
    - -
    diff --git a/doc/styleguide/section-forms.html b/doc/styleguide/section-forms.html new file mode 100644 index 0000000..8184df0 --- /dev/null +++ b/doc/styleguide/section-forms.html @@ -0,0 +1,189 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Forms + +

    + + +
    + + + + +
    +
    + +
    +

    + + Login form + +

    + + +
    + + +
    +
    + Example +
    + + +
    +
    + + +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="user">
+  <input type="text" placeholder="Username" />
+  <button>Log in</button>
+</div>
    +
    + +
    + Source: modules/_form.scss, line 139 +
    + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-landings.html b/doc/styleguide/section-landings-and-portfolio.html similarity index 74% rename from doc/styleguide/section-landings.html rename to doc/styleguide/section-landings-and-portfolio.html index 36ce0bf..b4574bb 100644 --- a/doc/styleguide/section-landings.html +++ b/doc/styleguide/section-landings-and-portfolio.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,73 +36,98 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms + +
    • +
  • + + Landings and portfolio
  • - + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • -
    +

    - - Landings + + Landings and portfolio

    @@ -113,11 +138,106 @@
    -
    +

    - + + 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 +
    + +
    +
    + +
    +

    + + Buttons + +

    + + +
    + + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + Download +
    +
    + +
    + .radius +
    +
    + Rounded corners +
    +
    + Download +
    +
    +
    + +
    + + Markup + + 
    <a href="#" class="button [modifier class]">Download</a>
    +
    + +
    + Source: modules/_button.scss, line 1 +
    + +
    +
    + +
    +

    + Cards

    @@ -169,49 +289,11 @@
    -
    +

    - - 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 -
    - -
    -
    - -
    -

    - + Call to action

    @@ -261,12 +343,12 @@
    -
    +

    - - Headings + + Covers

    @@ -315,54 +397,12 @@
    -
    +

    - - Longform - -

    - - -
    - - -
    -
    - Example -
    - - -
    -
    -

    Lorem ipsum

    -
    -
    -
    - -
    - -
    - - Markup - - 
    <section class="wrap longform">
-  <p>Lorem ipsum</p>
-</section>
    -
    - -
    - Source: modules/_longform.scss, line 1 -
    - -
    -
    - -
    -

    - - Quotes + + Quotes & Cites

    @@ -380,6 +420,7 @@

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

    + Avatar @jlantunez
    @@ -391,7 +432,8 @@ 
    <blockquote>
   <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
-</blockquote>
    +</blockquote> +<cite> <img class="avatar-40" src="http://webslides.tv/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite>
    @@ -399,11 +441,11 @@
    -
    +

    - + Table of contents

    diff --git a/doc/styleguide/section-layout.html b/doc/styleguide/section-layout.html new file mode 100644 index 0000000..d33d523 --- /dev/null +++ b/doc/styleguide/section-layout.html @@ -0,0 +1,1370 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Layout + +

    + + +
    + + + + +
    +
    + +
    +

    + + Align content + +

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

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    +
    +
    +
    + +
    + .alignright +
    +
    + Align right. +
    +
    +
    + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    +
    +
    +
    +
    + .alignleft +
    +
    + Align left. +
    +
    +
    + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    +
    +
    +
    +
    + .aligncenter +
    +
    + Align center. +
    +
    +
    + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.

    +
    +
    +
    +
    + +
    + + Markup + + 
    <div>
+  <img src="../../../static/images/iphone.png" class="size-50 [modifier class]" />
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.</p>
+</div>
    +
    + +
    + Source: _base.scss, line 143 +
    + +
    +
    + +
    +

    + + Backgrounds + +

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

    + + Animated + +

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

    + + Video + +

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

    .background-video

    +

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

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section>
+  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
+    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
+  </video>
+  <div class="wrap">
+    <p><code>.background-video</code></p>
+    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
+  </div>
+</section>
    +
    + +
    + Source: modules/_slides-bg.scss, line 92 +
    + +
    +
    + +
    +

    + + Backgrounds + +

    + +
    +

    Colors we use for backgrounds.

    + +
    + +
    + + +
    +
    + Example +
    + + +
    + Primary #44d +Secondary #67d +Light #f7f9fb +Black #000 +Black blue #123 +Blue #346 +Brown #f9f8f2 +Gray #d5d9e2 +Green #077 +Purple #62b +Red #c23 +White #fff +Facebook #3b5998 +
    +
    + +
    + +
    + + Markup + + 
    <span class="bg-primary size-20">Primary #44d</span>
+<span class="bg-secondary size-20">Secondary #67d</span>
+<span class="bg-light size-20">Light #f7f9fb</span>
+<span class="bg-black size-20">Black #000</span>
+<span class="bg-black-blue size-20">Black blue #123</span>
+<span class="bg-blue size-20">Blue #346</span>
+<span class="bg-brown size-20">Brown #f9f8f2</span>
+<span class="bg-gray size-20">Gray #d5d9e2</span>
+<span class="bg-green size-20">Green #077</span>
+<span class="bg-purple size-20">Purple #62b</span>
+<span class="bg-red size-20">Red #c23</span>
+<span class="bg-white size-20">White #fff</span>
+<span class="bg-facebook size-20">Facebook #3b5998</span>
    +
    + +
    + Source: _color.scss, line 107 +
    + +
    +
    + +
    +

    + + Layout.backgrounds + +

    + + +
    + + + + +
    +
    + +
    +

    + + Backgrounds - Gradient + +

    + +
    +

    Colors we use for backgrounds.

    + +
    + +
    + + +
    +
    + Example +
    + + +
    +
    Horizontal
    +
    Vertical
    +
    Radial
    +
    +
    + +
    + +
    + + Markup + + 
      <div class="bg-gradient-h">Horizontal</div>
+  <div class="bg-gradient-v">Vertical</div>
+  <div class="bg-gradient-r">Radial</div>
    +
    + +
    + Source: _color.scss, line 193 +
    + +
    +
    + +
    +

    + + Backgrounds - Transparent + +

    + +
    +

    Colors we use for backgrounds.

    + +
    + +
    + + +
    +
    + Example +
    + + +
    +
    +
    Dark
    +
    Light
    +
    Gradient
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="bg-red">
+  <div class="bg-trans-dark">Dark</div>
+  <div class="bg-trans-light">Light</div>
+  <div class="bg-trans-gradient">Gradient</div>
+</div>
    +
    + +
    + Source: _color.scss, line 168 +
    + +
    +
    + +
    +

    + + Grid + +

    + +
    +

    Basic Grid (Flexible blocks) +Auto-fill & Equal height

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

    WebSlides is really easy

    +

    Each parent <section> in the #webslides element is an individual slide.

    +

    Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

    +
    +
    +

    WebSlides is the clean

    +

    Each parent <section> in the #webslides element is an individual slide.

    +
    +
    +
    +
    + +
    + .vertical-align +
    +
    + Vertical align +
    +
    +
    +
    +

    WebSlides is really easy

    +

    Each parent <section> in the #webslides element is an individual slide.

    +

    Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

    +
    +
    +

    WebSlides is the clean

    +

    Each parent <section> in the #webslides element is an individual slide.

    +
    +
    +
    +
    +
    + +
    + + Markup + + 
    <div class="grid [modifier class]">
+  <div class="column">
+    <h3><strong>WebSlides is really easy</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+    <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
+  </div>
+  <div class="column">
+    <h3><strong>WebSlides is the clean</strong></h3>
+    <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
+  </div>
+</div>
    +
    + +
    + Source: modules/_grid.scss, line 1 +
    + +
    +
    + +
    +

    + + Navbars + +

    + +
    +

    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 +
    + +
    +
    + +
    +

    + + Sizes + +

    + + +
    + + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .size-80 +
    +
    + resize to 80%. +
    +
    + +
    +
    +
    + .size-70 +
    +
    + resize to 70%. +
    +
    + +
    +
    +
    + .size-60 +
    +
    + resize to 60%. +
    +
    + +
    +
    +
    + .size-50 +
    +
    + resize to 50%. +
    +
    + +
    +
    +
    + .size-40 +
    +
    + resize to 40%. +
    +
    + +
    +
    +
    + .size-30 +
    +
    + resize to 30%. +
    +
    + +
    +
    +
    + .size-20 +
    +
    + resize to 20%. +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <img src="../../../static/images/iphone.png" class="[modifier class]" />
    +
    + +
    + Source: _base.scss, line 199 +
    + +
    +
    + +
    +

    + + 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 +
    + +
    +
    + +
    +

    + + 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 +
    + +
    +
    + +
    +

    + + 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 +
    + +
    +
    + +
    +

    + + Fullscreen + +

    + +
    +

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

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

    Content

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

    + + 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-longforms.html b/doc/styleguide/section-longforms.html new file mode 100644 index 0000000..ac5a004 --- /dev/null +++ b/doc/styleguide/section-longforms.html @@ -0,0 +1,247 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Longform + +

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

    Lorem ipsum

    +
    +
    +
    + +
    + +
    + + Markup + + 
    <section class="wrap longform">
+  <p>Lorem ipsum</p>
+</section>
    +
    + +
    + Source: modules/_longform.scss, line 1 +
    + +
    +
    + +
    +

    + + Interviews + +

    + +
    +

    Questions & Answers

    + +
    + +
    + + +
    +
    + Example +
    + + +
    +
    +
    Driftwood
    +
    +

    It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?

    +
    +
    Fiorello
    +
    +

    No. It's no good.

    +
    +
    Driftwood
    +
    +

    What's the matter with it?

    +
    +
    Fiorello
    +
    +

    I don't know, let's hear it again.

    +
    +
    +
    +
    + +
    + +
    + + Markup + + 
    <dl class="text-interview">
+  <dt>Driftwood</dt>
+  <dd>
+    <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>No. It's no good.</p>
+  </dd>
+  <dt>Driftwood</dt>
+  <dd>
+    <p>What's the matter with it?</p>
+  </dd>
+  <dt>Fiorello</dt>
+  <dd>
+    <p>I don't know, let's hear it again.</p>
+  </dd>
+</dl>
    +
    + +
    + Source: _typography.scss, line 504 +
    + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-media.html b/doc/styleguide/section-media.html index cd94384..19bbd4d 100644 --- a/doc/styleguide/section-media.html +++ b/doc/styleguide/section-media.html @@ -17,9 +17,9 @@

    WebSlides - Documentation 1.5.0

    @@ -36,22 +36,37 @@
  • - + Architecture
  • - + Contents
  • - - Landings + + Forms
  • - + + Landings and portfolio + +
    • +
  • + + Layout + +
    • +
  • + + Longform + +
    • +
  • + Media
    • +
  • + + Multipurpose blocks + +
    • +
  • + + Typography + +
    • @@ -185,162 +190,6 @@ Source: modules/_avatars.scss, line 5
    -
    -
    - -
    -

    - - Media.Background - -

    - - -
    - - - - -
    -
    - -
    -

    - - Animated - -

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

    - - Video - -

    - - -
    - - -
    -
    - Example -
    - - -
    -
    - -
    -

    .background-video

    -

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

    -
    -
    -
    -
    - -
    - -
    - - Markup - - 
    <section>
-  <video class="background-video" autoplay poster="https://webslides.tv/static/images/working.jpg">
-    <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
-  </video>
-  <div class="wrap">
-    <p><code>.background-video</code></p>
-    <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
-  </div>
-</section>
    -
    - -
    - Source: modules/_slides-bg.scss, line 92 -
    - -
    -
    - -
    -

    - - 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-multipurpose-blocks.html b/doc/styleguide/section-multipurpose-blocks.html new file mode 100644 index 0000000..b201dea --- /dev/null +++ b/doc/styleguide/section-multipurpose-blocks.html @@ -0,0 +1,1385 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Multipurpose blocks + +

    + +
    +

    Auto-fill & Equal height columns

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

    + + CVs, News ad Activity + +

    + +
    +

    Bla bla bla

    + +
    + +
    + + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock activity">
+  <li>
+    <a href="#" title="UX Designer at ACME">
+      <div>
+        <p class="year">
+          2016
+        </p>
+        <p class="title">
+          UX Designer at ACME
+        </p>
+        <p class="summary">
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        </p>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="14 world famous buildings to inspire you">
+      <p class="year">
+        2 mins ago
+      </p>
+      <p class="title">
+        14 world famous buildings to inspire you
+      </p>
+      <p class="summary">
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
+      </p>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Co-Founder of GAMMA">
+      <p class="year">
+        2013
+      </p>
+      <p class="title">
+        Co-Founder of GAMMA
+      </p>
+      <p class="summary">
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      </p>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-activity.scss, line 1 +
    + +
    +
    + +
    +

    + + Clients + +

    + +
    +

    Highlight clients information

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

    + + Features + +

    + +
    +

    Special features

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

      100% customizable

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

      Extra virgin olive oil

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

      + Ultra-fast Wifi +

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

      100% customizable

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

      Extra virgin olive oil

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

      + Ultra-fast Wifi +

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

    + + Galleries (portfolios, teams...) + +

    + +
    +

    Beautiful gallery

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

    + + Gallery + Overflow + +

    + +
    +

    Beautiful gallery with overlay content

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

    + + Metrics + +

    + +
    +

    Bla bla bla

    + +
    + +
    + + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    +
      +
    • Founded + 2016 +
      • +
    • + 24M + Subscribers +
      • +
    • + Revenue: + $16M +
      • +
    • + Monthly Growth + 64% +
      • +
    +
    +
    + +
    + .border +
    +
    + with border +
    +
    +
      +
    • Founded + 2016 +
      • +
    • + 24M + Subscribers +
      • +
    • + Revenue: + $16M +
      • +
    • + Monthly Growth + 64% +
      • +
    +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock metrics  [modifier class]">
+  <li> Founded
+    <span>2016</span>
+  </li>
+  <li>
+    <span>24M</span>
+    Subscribers
+  </li>
+  <li>
+    Revenue:
+    <span>$16M</span>
+  </li>
+  <li>
+    Monthly Growth
+    <span>64%</span>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-metrics.scss, line 1 +
    + +
    +
    + +
    +

    + + Plans / Pricing + +

    + +
    +

    Bla bla bla

    + +
    + +
    + + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .blink +
    +
    + block linkable +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock plans [modifier class]">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-plans.scss, line 1 +
    + +
    +
    + +
    +

    + + Reasons + +

    + +
    +

    Bla bla bla

    + +
    + +
    + + +
    +
    + Example +
    + + +
    +
      +
    • +

      Why WebSlides? Work better, faster.

      +

      Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

      +
      • +
    • +

      Good karma. Just the essentials and using lovely CSS.

      +

      WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

      +
      • +
    +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock reasons">
+  <li>
+    <h2>Why WebSlides? Work better, faster.</h2>
+    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
+  </li>
+  <li>
+    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
+    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-reasons.scss, line 1 +
    + +
    +
    + +
    +

    + + Specs + +

    + +
    +

    Bla bla bla

    + +
    + +
    + + +
    +
    + Example +
    + + +
    +
      +
    • +
      +

      Ultra-Fast WiFi

      + Simple and secure file sharing. +
      +
      • +
    • +
      +

      All day battery life

      + Your battery worries may be over. +
      +
      • +
    • +
      +

      Lifetime Warranty

      + We'll fix it or if we can't, we'll replace it. +
      +
      • +
    +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock specs">
+    <li>
+      <div>
+        <h2>Ultra-Fast WiFi</h2>
+        Simple and secure file sharing.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>All day battery life</h2>
+        Your battery worries may be over.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>Lifetime Warranty </h2>
+        We'll fix it or if we can't, we'll replace it.
+      </div>
+    </li>
+    </ul>
    +
    + +
    + Source: modules/_flexblock-specs.scss, line 1 +
    + +
    +
    + +
    +

    + + Steps + +

    + +
    +

    Bla bla bla

    + +
    + +
    + + +
    +
    + Example +
    + + +
    +
      +
    • +

      01. Passion

      +

      When you're really passionate about your job, you can change the world.

      +
      • +
    • +
      +

      02. Purpose

      +

      Why does this business exist? How are you different? Why matters?

      +
      • +
    • +
      +

      03. Principles

      +

      Leadership through usefulness, openness, empathy, and good taste.

      +
      • +
    • +
      +

      04. Process

      +
        +
      • Useful
        • +
      • Easy
        • +
      • Fast
        • +
      • Beautiful
        • +
      +
      • +
    +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock steps">
+  <li>
+    <h2>01. Passion</h2>
+    <p>When you're really passionate about your job, you can change the world.</p>
+  </li>
+  <li>
+    <div class="process step-2"></div>
+    <h2>02. Purpose</h2>
+    <p>Why does this business exist? How are you different? Why matters?</p>
+  </li>
+  <li>
+    <div class="process step-3"></div>
+    <h2>03. Principles</h2>
+    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
+  </li>
+  <li>
+    <div class="process step-4"></div>
+    <h2>04. Process</h2>
+    <ul>
+      <li>Useful</li>
+      <li>Easy</li>
+      <li>Fast</li>
+      <li>Beautiful</li>
+    </ul>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-steps.scss, line 1 +
    + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/doc/styleguide/section-typography.html b/doc/styleguide/section-typography.html new file mode 100644 index 0000000..d29e728 --- /dev/null +++ b/doc/styleguide/section-typography.html @@ -0,0 +1,890 @@ + + + + + WebSlides - Documentation 1.5.0 + + + + + + + + + + +
    +

    WebSlides - Documentation 1.5.0

    + +
    +
    +

    WebSlides - Documentation 1.5.0

    +
    +
    +
    + +
    +
    + +
    + +
    +

    + + Typography + +

    + + +
    + + + + +
    +
    + +
    +

    + + Columns + +

    + +
    +

    Magazine Two Columns

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

    Column 1 text

    Column 2 text

    +
    +
    + +
    + +
    + + Markup + + 
    <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
    +
    + +
    + Source: _typography.scss, line 346 +
    + +
    +
    + +
    +

    + + Context + +

    + +
    +

    Heading with border

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

    Why WebSlides?

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-context">Why WebSlides?</p>
    +
    + +
    + Source: _typography.scss, line 376 +
    + +
    +
    + +
    +

    + + Data + +

    + +
    +

    Numbers (results, sales... )-

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

    23,478,289

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-data">23,478,289</p>
    +
    + +
    + Source: _typography.scss, line 314 +
    + +
    +
    + +
    +

    + + Emoji + +

    + +
    +

    You'll love this

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

    πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-emoji">πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜</p>
    +
    + +
    + Source: _typography.scss, line 296 +
    + +
    +
    + +
    +

    + + Info Messages + +

    + +
    +

    Error, warning, success...

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

    Psychiatrists have long debated whether it really exists.

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
    +
    + +
    + Source: _typography.scss, line 546 +
    + +
    +
    + +
    +

    + + Intro + +

    + +
    +

    Typography Classes = .text-

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

    Create a simple web presence.

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-intro">Create a simple web presence.</p>
    +
    + +
    + Source: _typography.scss, line 206 +
    + +
    +
    + +
    +

    + + Label + +

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

    Website: http://webslides.tv

    +
    +
    + +
    + +
    + + Markup + + 
    <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
    +
    + +
    + Source: _typography.scss, line 333 +
    + +
    +
    + +
    +

    + + Landings + +

    + +
    +

    h1,h2... Promo/Landings

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

    Landings

    +
    +
    + +
    + +
    + + Markup + + 
    <h1 class="text-landing">Landings</h1>
    +
    + +
    + Source: _typography.scss, line 233 +
    + +
    +
    + +
    +

    + + Lowercase + +

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

    Create a simple web presence.

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-lowercase">Create a simple web presence.</p>
    +
    + +
    + Source: _typography.scss, line 286 +
    + +
    +
    + +
    +

    + + Pulls + +

    + +
    +

    Pull Quote Right/Left

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

    Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

    +

    Psychiatrists have long debated whether it really exists.

    +

    Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

    +

    Psychiatrists have long debated whether it really exists.

    +
    +
    + +
    + +
    + + Markup + + 
    <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
+<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
    +
    + +
    + Source: _typography.scss, line 449 +
    + +
    +
    + +
    +

    + + Separator + +

    + +
    +

    Stars *

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

    Separator

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-separator">Separator</p>
    +
    + +
    + Source: _typography.scss, line 418 +
    + +
    +
    + +
    +

    + + Serif + +

    + +
    +

    Maitree font

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

    Create a simple web presence.

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-serif">Create a simple web presence.</p>
    +
    + +
    + Source: _typography.scss, line 220 +
    + +
    +
    + +
    +

    + + Shadows + +

    + +
    +

    Drops a shadow under the layer. The layer containing the shadow has to have a solid background

    + +
    + +
    + + +
    +
    + Example +
    + + +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi. +
    +
    +
    + +
    + +
    + + Markup + + 
    <div class="bg-white shadow">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi.
+</div>
    +
    + +
    + Source: _base.scss, line 73 +
    + +
    +
    + +
    +

    + + Subtitule + +

    + +
    +

    Subtitle (Before h1, h2)

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

    Powered by #WebSlides .text-subtitle

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
    +
    + +
    + Source: _typography.scss, line 250 +
    + +
    +
    + +
    +

    + + Symbols + +

    + +
    +

    Stars *

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

    * * *

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-symbols">* * *</p>
    +
    + +
    + Source: _typography.scss, line 404 +
    + +
    +
    + +
    +

    + + Uppercase + +

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

    Create a simple web presence.

    +
    +
    + +
    + +
    + + Markup + + 
    <p class="text-uppercase">Create a simple web presence.</p>
    +
    + +
    + Source: _typography.scss, line 276 +
    + +
    +
    +
    + + + + + + + + + + + + + + + diff --git a/kss-config.json b/kss-config.json index 8898920..a1822fd 100644 --- a/kss-config.json +++ b/kss-config.json @@ -20,9 +20,9 @@ ], "mainmenu": [ - {"title" : "WebSlides", "url" : "../../index.html"}, - {"title" : "Documentation", "url" : "./"}, - {"title" : "Demos", "url" : ".../demos/index.html"} + {"title" : "WebSlides", "url" : "../../index.html", "class": ""}, + {"title" : "Documentation", "url" : "./", "class": "kss-menu-active"}, + {"title" : "Demos", "url" : ".../demos/index.html", "class": ""} ] } diff --git a/src/scss/_base.scss b/src/scss/_base.scss index c82b661..db458fb 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -79,7 +79,7 @@ nav a[rel='external'] em, // Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dignissim libero ac egestas. Vivamus pretium, mauris non commodo dapibus, purus elit gravida justo, at hendrerit arcu turpis in libero. Curabitur lacinia diam est, id eleifend turpis ornare quis. Sed a metus id ligula bibendum scelerisque vel at velit. Duis congue mattis nibh at pharetra. Cras hendrerit, enim ac tristique finibus, mauris dui placerat nulla, a porttitor sapien metus eu arcu. Ut pharetra justo et felis gravida vulputate. Nulla facilisi. //
    // -// Styleguide Architecture.Shadow +// Styleguide Typography.Shadow .shadow { position: relative; @@ -152,7 +152,7 @@ footer nav { // .alignleft - Align left. // .aligncenter - Align center. // -// Styleguide Architecture.Alignment +// Styleguide Layout.Alignment .alignright { float: right; } @@ -196,7 +196,7 @@ figure.alignleft { margin: .8rem 2.4rem .8rem 0; } -// Resizing +// Sizes // // Markup: // @@ -209,7 +209,7 @@ figure.alignleft { // .size-30 - resize to 30%. // .size-20 - resize to 20%. // -// Styleguide Architecture.Sizes +// Styleguide Layout.Sizes $sizes: 80, 70, 60, 50, 40, 30, 20; /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */ diff --git a/src/scss/_color.scss b/src/scss/_color.scss index 58fdb7c..34cc21e 100644 --- a/src/scss/_color.scss +++ b/src/scss/_color.scss @@ -123,7 +123,7 @@ Slides - Backgrounds
    // White #fff // Facebook #3b5998 // -// Styleguide Architecture.Backgrounds +// Styleguide Layout.Backgrounds @each $name, $color in $bg-colors { .bg-#{$name} { background-color: $color; @@ -176,7 +176,7 @@ Slides - Backgrounds
    //
    Gradient
    //
    // -// Styleguide Architecture.backgrounds.transparent +// Styleguide Layout.backgrounds.transparent .bg-trans-dark { background: rgba($black, .8); } @@ -199,7 +199,7 @@ Slides - Backgrounds
    //
    Vertical
    //
    Radial
    // -// Styleguide Architecture.backgrounds.gradient +// Styleguide Layout.backgrounds.gradient /*Horizontal Gradient*/ .bg-gradient-h { background: linear-gradient(134deg, #32b 0, #62b 100%); diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss index 8242d7c..beb12ce 100644 --- a/src/scss/_typography.scss +++ b/src/scss/_typography.scss @@ -210,7 +210,7 @@ h3 [class*='bg-'] { // Markup: //

    Create a simple web presence.

    // -// Styleguide Architecture.Intro +// Styleguide Typography.Intro .text-intro, [class*='content-'] p { font-size: 2.4rem; @@ -224,7 +224,7 @@ h3 [class*='bg-'] { // Markup: //

    Create a simple web presence.

    // -// Styleguide Architecture.Serif +// Styleguide Typography.Serif .text-serif, h1 span { font-family: 'Maitree', times, serif; @@ -237,7 +237,7 @@ h1 span { // Markup: //

    Landings

    // -// Styleguide Architecture.Landings +// Styleguide Typography.Landings .text-landing { letter-spacing: .4rem; text-transform: uppercase; @@ -254,7 +254,7 @@ h1 span { // Markup: //

    Powered by #WebSlides .text-subtitle

    // -// Styleguide Architecture.Subtitle +// Styleguide Typography.Subtitle .text-subtitle { letter-spacing: .2rem; margin-bottom: 0; @@ -278,7 +278,7 @@ h1 span { // Markup: //

    Create a simple web presence.

    // -// Styleguide Architecture.Uppercase +// Styleguide Typography.Uppercase .text-uppercase { text-transform: uppercase; } @@ -288,7 +288,7 @@ h1 span { // Markup: //

    Create a simple web presence.

    // -// Styleguide Architecture.Lowercase +// Styleguide Typography.Lowercase .text-lowercase { text-transform: lowercase; } @@ -300,7 +300,7 @@ h1 span { // Markup: //

    πŸ˜€πŸ˜πŸ˜‚πŸ˜…πŸ˜‰πŸ˜‹πŸ˜ŽπŸ˜

    // -// Styleguide Architecture.Emoji +// Styleguide Typography.Emoji .text-emoji { font-size: 6.8rem; line-height: 8.8rem; @@ -318,7 +318,7 @@ h1 span { // Markup: //

    23,478,289

    // -// Styleguide Architecture.Data +// Styleguide Typography.Data .text-data { font-size: 6.4rem; line-height: 8rem; @@ -335,7 +335,7 @@ h1 span { // Markup: //

    Website: http://webslides.tv

    // -// Styleguide Architecture.Label +// Styleguide Typography.Label .text-label { display: inline-block; font-weight: 600; @@ -350,7 +350,7 @@ h1 span { // Markup: //

    Column 1 text

    Column 2 text

    // -// Styleguide Architecture.Columns +// Styleguide Typography.Columns @media (min-width: 768px) { .text-cols { column-count: 2; @@ -380,7 +380,7 @@ h1 span { // Markup: //

    Why WebSlides?

    // -// Styleguide Architecture.Context +// Styleguide Typography.Context .text-context { position: relative; @@ -408,7 +408,7 @@ h1 span { // Markup: //

    * * *

    // -// Styleguide Architecture.Symbols +// Styleguide Typography.Symbols .text-symbols { font-weight: 600; letter-spacing: .8rem; @@ -422,7 +422,7 @@ h1 span { // Markup: //

    Separator

    // -// Styleguide Architecture.Separator +// Styleguide Typography.Separator .text-separator { margin-top: 2.4rem; @@ -446,7 +446,7 @@ h1 span { } } -// Pull Quote +// Pulls // // Pull Quote Right/Left // @@ -456,7 +456,7 @@ h1 span { //

    Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

    //

    Psychiatrists have long debated whether it really exists.

    // -// Styleguide Architecture.Pull_Quote +// Styleguide Typography.Pull_Quote [class*='text-pull'] { font-size: 2.4rem; font-weight: 400; @@ -525,7 +525,7 @@ figure[class*='text-pull-'] { // // // -// Styleguide Architecture.Interviews +// Styleguide Longforms.Interviews .text-interview dt { font-weight: 600; margin-bottom: 0; @@ -550,7 +550,7 @@ figure[class*='text-pull-'] { // Markup: //

    Psychiatrists have long debated whether it really exists.

    // -// Styleguide Architecture.Info +// Styleguide Typography.Info .text-info { font-size: 1.6rem; line-height: 2.4rem; diff --git a/src/scss/modules/_badges.scss b/src/scss/modules/_badges.scss index ba88533..0844e51 100644 --- a/src/scss/modules/_badges.scss +++ b/src/scss/modules/_badges.scss @@ -6,7 +6,7 @@ //

    Google Play

    //

    App Store

    // -// Styleguide Media.Badgets +// Styleguide Landings and portfolio.Badgets [class*='badge-'] { background-repeat: no-repeat; background-size: cover; diff --git a/src/scss/modules/_button.scss b/src/scss/modules/_button.scss index 52860a2..9c24f7d 100644 --- a/src/scss/modules/_button.scss +++ b/src/scss/modules/_button.scss @@ -5,7 +5,7 @@ // // .radius - Rounded corners // -// Styleguide Architecture.Buttons +// Styleguide Landings and portfolio.Buttons [class*='button'] { @media (min-width: 500px) { & + & { diff --git a/src/scss/modules/_cards.scss b/src/scss/modules/_cards.scss index d4dab26..01ec5ce 100644 --- a/src/scss/modules/_cards.scss +++ b/src/scss/modules/_cards.scss @@ -12,7 +12,7 @@ //
    //
    // -// Styleguide Landings.Cards +// Styleguide Landings and portfolio.Cards [class*='card-'] { &, & > a { diff --git a/src/scss/modules/_flexblock-activity.scss b/src/scss/modules/_flexblock-activity.scss index 63104eb..27b3512 100644 --- a/src/scss/modules/_flexblock-activity.scss +++ b/src/scss/modules/_flexblock-activity.scss @@ -47,7 +47,7 @@ // // // -// Styleguide Contents.Activity +// Styleguide Multipurpose blocks.Activity .flexblock.activity { flex-direction: column; diff --git a/src/scss/modules/_flexblock-clients.scss b/src/scss/modules/_flexblock-clients.scss index 5d1ba6c..e87806b 100644 --- a/src/scss/modules/_flexblock-clients.scss +++ b/src/scss/modules/_flexblock-clients.scss @@ -30,7 +30,7 @@ // // .border - with border // -// Styleguide Contents.Clients +// Styleguide Multipurpose blocks.Clients .flexblock.clients.blink li > a, .flexblock.clients li { diff --git a/src/scss/modules/_flexblock-features.scss b/src/scss/modules/_flexblock-features.scss index 94d92fa..8d2c94e 100644 --- a/src/scss/modules/_flexblock-features.scss +++ b/src/scss/modules/_flexblock-features.scss @@ -29,7 +29,7 @@ // // .border - with border // -// Styleguide Contents.Features +// Styleguide Multipurpose blocks.Features .flexblock.features { > li { border-radius: .4rem; diff --git a/src/scss/modules/_flexblock-gallery.scss b/src/scss/modules/_flexblock-gallery.scss index f81149c..a29b8c6 100644 --- a/src/scss/modules/_flexblock-gallery.scss +++ b/src/scss/modules/_flexblock-gallery.scss @@ -39,7 +39,7 @@ // // // -// Styleguide Contents.Gallery +// Styleguide Multipurpose blocks.Gallery // Gallery + Overflow // @@ -76,7 +76,7 @@ // // // -// Styleguide Contents.Gallery.Overlay +// Styleguide Multipurpose blocks.Gallery.Overlay .flexblock.gallery { li { diff --git a/src/scss/modules/_flexblock-metrics.scss b/src/scss/modules/_flexblock-metrics.scss index 7cb23e4..3146ade 100644 --- a/src/scss/modules/_flexblock-metrics.scss +++ b/src/scss/modules/_flexblock-metrics.scss @@ -23,7 +23,7 @@ // // .border - with border // -// Styleguide Contents.Metrics +// Styleguide Multipurpose blocks.Metrics .metrics li { text-align: center; width: 100%; diff --git a/src/scss/modules/_flexblock-plans.scss b/src/scss/modules/_flexblock-plans.scss index 57284d0..db4480e 100644 --- a/src/scss/modules/_flexblock-plans.scss +++ b/src/scss/modules/_flexblock-plans.scss @@ -38,7 +38,7 @@ // // .blink - block linkable // -// Styleguide Contents.Plans +// Styleguide Multipurpose blocks.Plans .flexblock.plans { > li { border-radius: 3px; diff --git a/src/scss/modules/_flexblock-reasons.scss b/src/scss/modules/_flexblock-reasons.scss index 6e8e060..2f077ce 100644 --- a/src/scss/modules/_flexblock-reasons.scss +++ b/src/scss/modules/_flexblock-reasons.scss @@ -14,7 +14,7 @@ // // // -// Styleguide Contents.Reasons +// Styleguide Multipurpose blocks.Reasons .flexblock.reasons { li { counter-increment: list; diff --git a/src/scss/modules/_flexblock-specs.scss b/src/scss/modules/_flexblock-specs.scss index 3bc8b7c..4944748 100644 --- a/src/scss/modules/_flexblock-specs.scss +++ b/src/scss/modules/_flexblock-specs.scss @@ -24,7 +24,7 @@ // // // -// Styleguide Contents.Specs +// Styleguide Multipurpose blocks.Specs .specs li { text-align: left; diff --git a/src/scss/modules/_flexblock-steps.scss b/src/scss/modules/_flexblock-steps.scss index 1feb104..ef831e8 100644 --- a/src/scss/modules/_flexblock-steps.scss +++ b/src/scss/modules/_flexblock-steps.scss @@ -30,7 +30,7 @@ // // // -// Styleguide Contents.Steps +// Styleguide Multipurpose blocks.Steps .steps li { width: 100%; diff --git a/src/scss/modules/_flexblock.scss b/src/scss/modules/_flexblock.scss index 5382004..8da7513 100644 --- a/src/scss/modules/_flexblock.scss +++ b/src/scss/modules/_flexblock.scss @@ -1,4 +1,4 @@ -// Flexblocks +// Multipurpose blocks // // Auto-fill & Equal height columns // @@ -29,7 +29,7 @@ // .blink - Linkable block // .border - With border // -// Styleguide Contents.Flexblocks +// Styleguide Multipurpose blocks .flexblock { clear: both; display: flex; diff --git a/src/scss/modules/_form.scss b/src/scss/modules/_form.scss index 52dc5ae..92be355 100644 --- a/src/scss/modules/_form.scss +++ b/src/scss/modules/_form.scss @@ -144,7 +144,7 @@ button:disabled:hover { // //
    // -// Styleguide Architecture.Forms.User +// Styleguide Forms.Login .user { input { margin-bottom: 0; diff --git a/src/scss/modules/_grid.scss b/src/scss/modules/_grid.scss index 65a2591..2c50d58 100644 --- a/src/scss/modules/_grid.scss +++ b/src/scss/modules/_grid.scss @@ -18,7 +18,7 @@ // // .vertical-align - Vertical align // -// Styleguide Architecture.Grid +// Styleguide Layout.Grid .grid { clear: both; display: flex; diff --git a/src/scss/modules/_longform.scss b/src/scss/modules/_longform.scss index 112d296..206bc69 100644 --- a/src/scss/modules/_longform.scss +++ b/src/scss/modules/_longform.scss @@ -5,7 +5,7 @@ //

    Lorem ipsum

    // // -// Styleguide Landings.Longform +// Styleguide Longforms .longform { width: 72rem; /* Why 72rem=720px? diff --git a/src/scss/modules/_navigation.scss b/src/scss/modules/_navigation.scss index 0af9677..421f321 100644 --- a/src/scss/modules/_navigation.scss +++ b/src/scss/modules/_navigation.scss @@ -1,4 +1,4 @@ -// Navigation +// Navbars // // Responsive Media (videos, iframe...) // @@ -24,7 +24,7 @@ // .aligncenter - Center alignment // .alignright - Right alignment // -// Styleguide Architecture.Navigation +// Styleguide Layout.Navbars nav ul { display: flex; flex-wrap: wrap; diff --git a/src/scss/modules/_promos.scss b/src/scss/modules/_promos.scss index 9c0da29..499f3b1 100644 --- a/src/scss/modules/_promos.scss +++ b/src/scss/modules/_promos.scss @@ -11,7 +11,7 @@ //
    //
    // -// Styleguide Landings.CTA +// Styleguide Landings and portfolio.CTA .cta { display: flex; flex-wrap: wrap; @@ -72,7 +72,7 @@ } } -// Headings +// Covers // // Markup: //
    @@ -85,7 +85,7 @@ //

    //
    // -// Styleguide Landings.cta-cover +// Styleguide Landings and portfolio.cta-cover .cta-cover { display: table; width: 100%; diff --git a/src/scss/modules/_quotes.scss b/src/scss/modules/_quotes.scss index dbb328b..6c30a17 100644 --- a/src/scss/modules/_quotes.scss +++ b/src/scss/modules/_quotes.scss @@ -1,11 +1,13 @@ -// Quotes +// Quotes & Cites // // Markup: //
    //

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

    //
    +// Avatar @jlantunez // -// Styleguide Landings.Quotes +// +// Styleguide Landings and portfolio.Quotes blockquote { display: inline-block; position: relative; @@ -25,12 +27,6 @@ dd blockquote p:last-child { margin-bottom: 0; } -// Cites -// -// Markup: -// Avatar @jlantunez -// -// Styleguide Landings.Cites cite { display: block; text-align: center; diff --git a/src/scss/modules/_slides-bg.scss b/src/scss/modules/_slides-bg.scss index 355b635..c123500 100644 --- a/src/scss/modules/_slides-bg.scss +++ b/src/scss/modules/_slides-bg.scss @@ -32,7 +32,7 @@ // .background-left - Left. // .background-right - Right. // -// Styleguide Architecture.Background +// Styleguide Layout.Background .background { background-position: center; background-size: cover; @@ -102,7 +102,7 @@ //
    // // - // Styleguide Media.Background.Video + // Styleguide Layout.Background.Video &-video { height: 100%; object-fit: fill; @@ -144,7 +144,7 @@ // // // -// Styleguide Media.Background.Anim +// Styleguide Layout.Background.Anim .background.anim { animation: anim 80s linear infinite; background-position: center top; diff --git a/src/scss/modules/_slides-navigation.scss b/src/scss/modules/_slides-navigation.scss index 79768b3..a6b3f2c 100644 --- a/src/scss/modules/_slides-navigation.scss +++ b/src/scss/modules/_slides-navigation.scss @@ -7,7 +7,7 @@ // 53 / 120 //
    // -// Styleguide Architecture.Navigation +// Styleguide Layout.Slide-Navigation #navigation { animation: fadeIn 8s; bottom: 0; diff --git a/src/scss/modules/_slides.scss b/src/scss/modules/_slides.scss index 691a5e6..39f1ce6 100644 --- a/src/scss/modules/_slides.scss +++ b/src/scss/modules/_slides.scss @@ -9,7 +9,7 @@ //

    Content

    // // -// Styleguide Architecture.Slides +// Styleguide Layout.Slides section * { animation: fadeIn .6s ease-in-out; } @@ -40,7 +40,7 @@ section, } } -// fullscreen +// Fullscreen // // Slide with no padding (full card, .embed youtube video...) // @@ -49,7 +49,7 @@ section, //

    Content

    // // -// Styleguide Architecture.Slides +// Styleguide Layout.Slides.Fullscreen .fullscreen { padding: 0; /* Fixed/Visible header? @@ -66,7 +66,7 @@ section, //

    Content

    // // -// Styleguide Architecture.Slides.Top +// Styleguide Layout.Slides.Top .slide-top { justify-content: flex-start; } @@ -80,7 +80,7 @@ section, //

    Content

    // // -// Styleguide Architecture.Slides.Bottom +// Styleguide Layout.Slides.Bottom .slide-bottom { justify-content: flex-end; } diff --git a/src/scss/modules/_tables.scss b/src/scss/modules/_tables.scss index d936c6a..689b712 100644 --- a/src/scss/modules/_tables.scss +++ b/src/scss/modules/_tables.scss @@ -1,38 +1,3 @@ -// Tables -// -// Markup: -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -//
    PlansGoodBetterAwesome
    PriceFree$6$10
    Access to exclusive contentNoNoYes
    Screens you can watch on at the same time12Unlimited
    -// -// Styleguide Architecture.Tables table { margin-bottom: 3.2rem; margin-top: 3.2rem; diff --git a/src/scss/modules/_toc.scss b/src/scss/modules/_toc.scss index 8509129..78c5d10 100644 --- a/src/scss/modules/_toc.scss +++ b/src/scss/modules/_toc.scss @@ -27,7 +27,7 @@ // //
    // -// Styleguide Landings.TOC +// Styleguide Landings and portfolio.TOC .toc, .toc ol > li:before, .chapter { diff --git a/src/scss/modules/_work.scss b/src/scss/modules/_work.scss index c88e595..4a1d9e9 100644 --- a/src/scss/modules/_work.scss +++ b/src/scss/modules/_work.scss @@ -1,4 +1,4 @@ -// Work / ResumΓ© / CV +// CV / ResumΓ© // // Markup: //